Recaptcha not showing up

Hi, I am using Typhoon, with a form in a modular page. On localhost the recaptcha field shows up, but not online. The form plugin is up to date and filled in with the right recaptcha thingies.
When loading the page Console gives the following error:

Refused to load the script 'https://www.google.com/recaptcha/api.js?onload=captchaOnloadCallback_contact&render=explicit&hl=&theme=dark' because it violates the following Content Security Policy directive: "default-src 'self' data: 'unsafe-inline' 'unsafe-eval' *.googletagmanager.com *.google-analytics.com". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

Here is the frontmatter of the form page

---
title: 'Neem contact op'
subtitle: 'Meer weten?'
section_classes: 'bg-primary-darker text-primary-lighter py-8 md:py-24'
title_text: light
cache_enable: false
form:
    name: contact
    action: '/#neem-contact-op'
    inline_errors: true
    fields:
        name:
            label: Name
            display_label: false
            placeholder: '* Je naam'
            autocomplete: 'on'
            type: text
            validate:
                required: true
        email:
            label: Email
            display_label: false
            placeholder: '* Je emailadres'
            type: email
            validate:
                required: true
        phone:
            label: Phone
            display_label: false
            placeholder: 'Je telefoonnummer (WhatsApp of Signal) (optioneel)'
            type: text
        message:
            label: Message
            display_label: false
            placeholder: '* Je bericht'
            type: textarea
            rows: 4
            validate:
                required: true
        g-recaptcha-response:
            label: Captcha
            type: captcha
            recaptcha_not_validated: 'Captcha not valid!'
    buttons:
        submit:
            type: submit
            classes: 'bg-gray-600 hover:bg-gray-900'
            value: Versturen
    process:
        captcha: true
        message: '<b>Merci!</b> Wij hebben je bericht gekregen en zullen asap contact opnemen.'
        email:
            from: '{{ config.plugins.email.from }}'
            to: '{{ config.plugins.email.to }}'
            subject: '[Site Contact Form] {{ form.value.name|e }}'
            body: '{% include ''forms/data.html.twig'' %}'
---

Hi, I believe your online webserver is setup to use CSP directives which prevents loading remote scripts if not setup.

I found this documentation from Google Developers that instructs on how to enable captcha in the CSP directive, probably this is configurable somewhere in your web hosting admin panel, if you can’t find it I would suggest opening a ticket so they can quickly sort that for you.

Thanks for you reply. I placed a ticket at my hosting company. Funny things is, that on a subdomain page, the captcha does show.

Main page: https://www.wideopenwindows.be (form is at the bottom)
Subdomain page: http://tonhaarmans.wideopenwindows.be/contact

@TonHaarmans, Not an expert in any way on the topic, but did some googling anyway...

From the HTML of your sites:

• Your main site, using theme Typhoon, contains:

  TXTCopy

  <meta http-equiv="Content-Security-Policy" content="default-src &#039;self&#039; data: &#039;unsafe-inline&#039; &#039;unsafe-eval&#039; *.googletagmanager.com *.google-analytics.com;" />
  

  This meta-tag is used to reduce the risk of XSS attacks. See link to Stackoverflow below.

• Your subdomain, using different theme, does not contain the meta-tag.

Notes:

• My first though: @djamil It's Typhoon related and not the webserver config.
  • It looks like the quotes have been auto-escaped, which could be the issue, or one of the issues.
• Similar issue + solution on Stackoverflow: Refused to load the script because it violates the following Content Security Policy directive
• Background info on Stackoverflow: How does Content Security Policy (CSP) work?

Thanks a lot Pamtbaau! I could remove this meta tag and then indeed the captcha turned up, but now I probably have less security. I have been looking for an improved tag, but could not find one, probably because I don't understand. I also tried the original tag but with the entities replaced with apostrophe, but that did not help. Perhaps I should report a bug...

@TonHaarmans:
but now I probably have less security

This is the first time I see this meta-tag, so I don't think you will be in danger immediately...

Perhaps I should report a bug…

I would.... ;-)

yes, I am busy with it 🙂

We are working on fixing the meta so it doesn't escape single quotes. Thanks!

Hi, I saw that it is resolved in the latest Grav update, but now I don't know how to get the content-security-policy meta tag back... Can you help me?

@TonHaarmans, Probably by undoing what you did before to fix the issue temporarily...

I could remove this meta tag and then indeed the captcha turned up,

Yes, I figured that one out too and I uncommented the line {% include 'partials/metadata.html.twig' %} in base.html.twig. Emptied all caches, but the meta tag did not returned. Probably there is some more, but I can't remember...

@TonHaarmans, What woud a developer be without Git to revert changes ;-)

I know. I should have documented it. But I didn't. And I am not a developer, but a graphic designer with some skills in HTML, CSS and some JS...