Google reCAPTCHA Enterprise en Content Security Policy

Staat je MailCamp-inschrijfformulier op je website, maar laadt Google reCAPTCHA Enterprise niet? Dan blokkeert de Content Security Policy (CSP) van je website meestal de scripts en frames van Google. Je kunt dat zien door jouw browser console te openen (rechtermuisknop -> Inspecteren -> Console).

Je lost dit op door een paar regels aan je CSP toe te voegen.

Een CSP is een beveiligingsinstelling van je website. Daarmee bepaal je welke scripts, frames, stijlen en verbindingen de browser mag laden. Alles wat niet expliciet is toegestaan, wordt geblokkeerd. Dat is goed voor de veiligheid, maar het blokkeert ook reCAPTCHA als Google niet op de lijst staat.

Je herkent het probleem aan meldingen zoals deze in de browserconsole (F12 → tabblad Console):

• Executing inline script violates the following Content Security Policy directive 'script-src-elem' …
• Loading the script 'https://www.google.com/recaptcha/enterprise.js?render=…' violates the following Content Security Policy directive …
• Framing 'https://www.google.com/' violates the following Content Security Policy directive: "frame-src" …

Gevolg: het reCAPTCHA-badge verschijnt niet, er wordt geen token aangemaakt en de inschrijving wordt door MailCamp geweigerd.

De CSP stel je in op je eigen webserver of in je CMS (bijvoorbeeld via een security-plugin, .htaccess, Nginx-configuratie of een <meta http-equiv="Content-Security-Policy">-tag). MailCamp kan dit niet voor je aanpassen. Weet je niet waar je CSP staat? Vraag het je websitebouwer of hostingpartij en stuur dit artikel mee.

Welke CSP-regels zijn nodig en waarom?

reCAPTCHA Enterprise heeft vier dingen nodig: Google-scripts laden, een onzichtbaar Google-frame tonen, verbinding maken met Google en het formulier mogen versturen naar MailCamp. Daarnaast bevat het formulier zelf een paar inline scripts en stijlen. Dit zijn de regels die Google zelf adviseert, aangevuld met wat het MailCamp-formulier nodig heeft.

Let op: elke directive die je niet noemt, valt terug op default-src. Gebruik je alleen default-src 'self', dan moet je de directives hierboven dus allemaal toevoegen.

Gebruik je script-src-elem naast script-src? Dan geldt voor <script>-tags alleen script-src-elem. Zet de Google-domeinen dan ook daar.

Voorbeeld van een complete CSP

Hieronder staat een voorbeeld voor een website die de formulier-HTML zonder inline JavaScript & CSS gebruikt. Vervang mail.jouwdomein.nl door het adres van je MailCamp-omgeving. Voeg de regels toe aan je bestaande CSP; haal niets weg wat je website zelf nodig heeft.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/;
  frame-src 'self' https://www.google.com/recaptcha/ https://recaptcha.google.com/recaptcha/;
  connect-src 'self' https://www.google.com/recaptcha/;
  style-src 'self';
  img-src 'self' https://mail.jouwdomein.nl;
  form-action 'self' https://mail.jouwdomein.nl;

Gebruik je liever de standaard-HTML met een nonce? Zie het alternatief voor ontwikkelaars in de volgende paragraaf. reCAPTCHA Enterprise werkt ook met 'strict-dynamic', zolang enterprise.js de juiste nonce heeft.

Inline JavaScript en CSS: kies de juiste formulier-HTML

Staat je CSP geen 'unsafe-inline' toe? Gebruik dan de formulier-HTML uit het tabblad Geavanceerd. Je vindt de formulier-HTML in MailCamp onder Formulieren: klik bij je formulier op Insluiten en kijk onder het kopje Formulier HTML. Daar staan drie tabbladen:

Onder Geavanceerd staan drie varianten onder elkaar, elk met een eigen kopje:

De melding “Executing inline script violates … 'script-src-elem'” betekent dat je een van de twee varianten zonder inline JavaScript nodig hebt. Het JavaScript-bestand bevat de controle van het formulier en het script dat het reCAPTCHA-token ophaalt. Zonder dat token weigert MailCamp de inschrijving.

Zo plaats je het formulier:

1. Open het tabblad Geavanceerd, zoek de variant die bij je CSP past en klik op de downloadlink van het bestand (of de bestanden).
2. Zet de bestanden op je eigen website, bijvoorbeeld in de map met je andere stylesheets en scripts. Ze vallen dan onder 'self' in je CSP.
3. Pas in de HTML het pad aan naar de plek van de bestanden: href in de <link>-regel en src in de laatste <script>-regel. De <link>-regel mag ook in de <head> van je pagina.
4. Laat de <script>-regel onder het formulier staan. Het script moet na het formulier en na het reCAPTCHA-script van Google worden geladen.
5. Kopieer de HTML van die variant en plak die in je website.

Pas je het formulier later aan in MailCamp? Download de bestanden dan opnieuw en vervang ze op je website.

Verander verder niets aan de formulier-HTML. De veldnamen, het action-adres en de verborgen velden zijn nodig om de inschrijving te verwerken.

Alternatief voor ontwikkelaars. Wil je de standaard-HTML gebruiken met een strikte CSP? Dan kan dat ook met een nonce: je server zet bij elke paginaweergave dezelfde nonce in de CSP-header en in elke <script>-tag van het formulier. Een hash ('sha256-…') kan ook, maar verandert zodra je het formulier aanpast. Gebruik liever geen 'unsafe-inline' voor scripts: dat zet een groot deel van de bescherming van je CSP uit.

Controleren of het werkt

1. Open de pagina met het formulier in een privévenster en druk op F12.
2. Kijk in het tabblad Console of er nog meldingen met “Content Security Policy” staan. De melding noemt de directive die nog moet worden aangepast.
3. Controleer of rechtsonder op de pagina het reCAPTCHA-badge verschijnt.
4. Doe een testinschrijving en controleer of het contact in je MailCamp-lijst staat.

Nog een paar aandachtspunten:

• Meerdere CSP's. Staat er een CSP in de serverheader én in een <meta>-tag, of zetten twee plugins elk een header? Dan moet een script aan beide voldoen. Pas ze allebei aan, of zorg dat er maar één overblijft.
• Report-Only. Een Content-Security-Policy-Report-Only-header blokkeert niets; die meldingen kun je negeren. Pas alleen de header Content-Security-Policy aan.
• Caching. Leeg na een wijziging de cache van je CMS of CDN. Anders ziet de bezoeker nog de oude CSP. Gebruik je nonces, zorg dan dat de pagina niet met een vaste nonce in de cache blijft staan.
• Trusted Types. Gebruik je require-trusted-types-for 'script'? Test het formulier dan extra goed. Zie je meldingen over Trusted Types, neem dan contact op met je websitebouwer.

Kom je er niet uit? Stuur ons de URL van de pagina en een screenshot van de console-meldingen. Dan kijken we met je mee.