Empty dialogue box when `kirby3-security-headers` are installed

[S1SYPHOS]

Hey there, great plugin, would be really helpful, but I can't get it to work as expected :frowning:

I'm using Kirby v3.4.4, this is my setup:

# site/blueprints/pages/my.blueprint.yml

title:
  de: Lesetipp
  en: Reading tip

addFields:
  title:
    label:
      de: Titel
      en: Title
    icon: title
    type: text
    required: true

  isbn:
    label: ISBN
    type: text

As you can see, the dialog box is empty.

Also, is it possible to append fields instead of replacing title and slug? That would be great ..

Cheers, S1SYPHOS

[steirico]

Hey,

could check/confirm that you are using v1.4.1 of the plugin, please.

Previous versions of the plugin are known to fail with kirby v3.4.3 and newer.

[S1SYPHOS]

I just installed it via Composer, but will confirm and get back to you later.

Thanks for the quick reply!

[S1SYPHOS]

Hey @steirico, I am using v1.4.1 - does the addFields need to go inside a tabs definition or somewhere else? It's a pity I don't seem to get it to work ..

[S1SYPHOS]

It's weird, even if I don't specify any addFields, after installing the plugin, my page add dialogs are all empty :confused:

[steirico]

does the addFields need to go inside a tabs definition or somewhere else?

addFields has to be at the root level of the yaml file (c.f. README for some examples). But your blueprint seems to be fine - it works in my test setup.

Could you inspect the JS console as well as the network connections in your browser's developer tools, please. Are there any errors? The JS console has to show Plugin is replacing "k-page-create-dialog"

[S1SYPHOS]

No errors, just Plugin is replacing "k-page-create-dialog" and network tab request returns 200:

[{"name":"lesetipps.article","title":"Lesetipp","addFields":null,"options":{"redirectToNewPage":true},"parentPage":""}]

[steirico]

The provided payload is typical for a blueprint which doesn't contain the addFields property. But, such a payload should lead to the default add dialog with title and slug fields.

So I suggest:

• Double check the installed versions (kirby and plugin)
• Double check your blueprint. Feel free to provide the entire blueprint for testing it in my setup.
• In order to get a clean and isolated test environment, setup a kirby starterkit with the custom add dialog plugin and your blueprint. Check for the correct versions.

[S1SYPHOS]

I'll try. Still , it's pretty standard and nothing out of the ordinary - I wonder what could be causing this ..

[S1SYPHOS]

What can I say .. it works on a starterkit, I copied my plugins & vendor directory over and it just works:

Sadly, it doesn't bring me any closer to a solution for the actual website I want to use this on :face_with_head_bandage:

[steirico]

Did you copy your templates/snippets/blueprints as well?

In a project I encountered very strange behaviours because of a preceding newline in a php file (see forum post).

[S1SYPHOS]

Hey there, I was able to identify the source of this: @bnomei's kirby3-security-headers plugin, see here. When installed, the dialogue box remains empty. Without it, everything works:

I was able to reproduce this in a plainkit with only your plugin and kirby3-security-headers, adding a simple addFields as described in your README!

The problem lies within the route.before hook on this line.

It's a CSP problem, then .. only FF spits out that loading a resource failed (somewhere inside vendor.js):

Content Security Policy: The page's settings blocked the loading of a resource at eval ("script-src").

[S1SYPHOS]

.. which points to somewhere in your index.js - but I can't figure out where .. most CSP problems I know have to do with eval() or script/link/style elements not using a nonce. Maybe it's some API call? I don't know - but this might be a deal breaker.

I'll see if I can disable the security-headers on the panel :rabbit:

[steirico]

Thanks for tracking this down!

I suppose the problem lies in the way how I overwrite/replace the default add dialog:

https://github.com/steirico/kirby-plugin-custom-add-fields/blob/573b4bc698b31f7d6572f9f912db8a9cdf0fc8c0/index.js#L223-L243

The following screenshot shows where the "exception" due to CSP is thrown. The scope shows variables and values coming from the plugin.

The overwrite is a bit of a hack because of this issue https://github.com/getkirby/kirby/issues/1438 which should be fixed in kirby v3.5.0. That may solve this issue as well. I will try to test it in a pre-release.

[S1SYPHOS]

Sounds great! One more reason to be excited for v3.5 - thanks for sharing, keep it up 👍

Cheers, S1SYPHOS

[S1SYPHOS]

@steirico: Is it possible to append fields instead of replacing title and slug? That would be great .. or do you have a quick blueprint example to add those as they are by default?

Cheers!

[steirico]

@steirico: Is it possible to append fields instead of replacing title and slug? That would be great .. or do you have a quick blueprint example to add those as they are by default?

Cheers!

Use feature branch feature/default-fields as documented in https://github.com/steirico/kirby-plugin-custom-add-fields/commit/70e69af76ac643f0b1a0e74a5bd37559f6b72589 or use these field definitions:

fields:
  title:
    label: title
    type: text
    required: true
    icon: title
  slug:
    label: "slug"
    type: text
    required: true
    counter: false
    icon: url

[steirico]

Kirby v3.5.0 won't fix this issue since the blocked new Function() is part of Vue.js: https://vuejs.org/v2/guide/installation.html#CSP-environments

I'll investigate if it's possible to precompile the template and then replace the plugin/component.