SEO-tools

Gratis CSP Starter Policy Generator

Genereer een Content-Security-Policy header voor statische sites met CDN-, analytics-, lettertype- en embedopties.

Tool laden...

Wat is CSP Starter Policy Generator?

Content-Security-Policy (CSP) is een browserbeveiligingsheader die bepaalt welke bronnen een pagina mag laden. Het helpt cross-site scripting, datainjectie en andere code-injectieaanvallen te voorkomen. Voor statische sites kan een CSP-header eenvoudig en conservatief zijn, omdat de meeste statische pagina's bronnen laden van voorspelbare, gecontroleerde oorsprongen.

Snel antwoord

Een Content Security Policy blokkeert cross-site scripting en datainjectieaanvallen door te beperken welke bronnen de browser mag laden. Begin met een restrictief beleid en verbreed alleen wanneer nodig.

Last updated: 2026-05-25

Beperkingen

  • CSP beschermt niet tegen server-side kwetsbaarheden of gecompromitteerde bibliotheken van derden die al in het beleid zijn opgenomen.
  • Inline event handlers en javascript:-URL's worden geblokkeerd tenzij 'unsafe-inline' of een hash/nonce is ingesteld.
  • GitHub Pages ondersteunt geen aangepaste HTTP-headers; gebruik een meta-tag-gebaseerde CSP, die beperkte richtlijnondersteuning heeft vergeleken met de HTTP-header.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Kies een preset die overeenkomt met uw sitetype: statisch, met CDN, met analytics of met ingebedde content.
  2. Controleer de gegenereerde richtlijnen en schakel aanvullende bronnen in die uw site nodig heeft.
  3. Kopieer de CSP-header naar uw hostingconfiguratie of als meta-tag.
  4. Implementeer eerst de report-only-versie en controleer de browserconsole op overtredingen voordat u deze afdwingt.

Waarvoor je het kunt gebruiken

  • Een conservatieve CSP maken voor een gewone HTML-statische site zonder externe bronnen.
  • Script- en lettertypebronnen toevoegen voor Google Fonts, Bootstrap CDN of Google Analytics.
  • Een CSP voorbereiden voor GitHub Pages die rekening houdt met de hosting-oorsprong.

Gebruik

Praktische voorbeelden

Voorbeeld

CSP voor een gewone statische site

Een handgecodeerde HTML-site zonder CDN, analytics of inbeddingen krijgt een minimale CSP die de eigen oorsprong toestaat voor alle brontypen.

Voorbeeld

Statische site met CDN en analytics

Een site die een CSS-framework-CDN, Google Fonts en Google Analytics gebruikt, krijgt een CSP die die oorsprongen toestaat terwijl alles wordt geblokkeerd.

Veelgemaakte fouten

  • Een CSP implementeren in afdwingmodus zonder eerst te testen in report-only-modus, wat legitieme bronnen kan breken.
  • 'unsafe-inline' gebruiken voor scripts zonder te begrijpen dat het de meeste XSS-bescherming die CSP biedt, uitschakelt.
  • Vergeten het GitHub Pages-previewdomein of de CDN-oorsprong aan het beleid toe te voegen, waardoor de site crasht bij implementatie.

Verificatie

  1. Implementeer de CSP eerst in report-only-modus door Content-Security-Policy-Report-Only te gebruiken en controleer de browserconsole op overtredingsrapporten.
  2. Schakel alleen over naar de afdwingheader nadat u hebt bevestigd dat er geen legitieme bronnen worden geblokkeerd.

Vergelijking

CSP vs Permissions-Policy vs Referrer-Policy

AspectContent-Security-PolicyPermissions-PolicyReferrer-Policy
What it controlsWhich resources (scripts, styles, images, fonts) the page can load and from which originsWhich browser features (camera, microphone, geolocation, payment) the page can accessHow much referrer information is sent when the page navigates to or loads a resource from another origin
Example directivesdefault-src 'self'; script-src 'self' cdn.example.com; img-src *camera=(), geolocation=(self), fullscreen=*strict-origin-when-cross-origin, no-referrer, same-origin
Delivered as header or metaBoth. HTTP header is preferred. Meta tag works but does not support frame-ancestors or report-uri.HTTP header only. Meta tag is not supported for Permissions-Policy.Both. Meta tag works and is commonly used for static pages.
What happens if misconfiguredResources are blocked. The page may appear broken with missing styles, scripts, or images.Features silently fail. JavaScript calls to blocked APIs throw without visible browser UI.Referrer data is sent with unintended detail or is missing when analytics need it.

CSP controls resource loading, Permissions-Policy controls feature access, and Referrer-Policy controls referrer data sent to other origins. They are complementary security headers that serve different purposes.

FAQ

Vragen over CSP Starter Policy Generator

Kan CSP als meta-tag worden geleverd?

Ja. Gebruik <meta http-equiv='Content-Security-Policy' content='...'> in de paginakop. Houd er rekening mee dat sommige richtlijnen zoals frame-ancestors en report-uri niet werken in de meta-tag.

Moet ik beginnen met report-only-modus?

Ja. Implementeer eerst met Content-Security-Policy-Report-Only, monitor de browserconsole op overtredingen, pas het beleid aan en schakel pas over naar afdwingmodus wanneer er geen onverwachte overtredingen verschijnen.

Wat is de veiligste default-src voor een statische site?

default-src 'self' is een praktisch startpunt. Het staat bronnen van dezelfde oorsprong toe en blokkeert alles. Voeg specifieke oorsprongen toe voor CDN's, lettertypen en analytics indien nodig.

Hoe sta ik Google Analytics, Google Fonts of een CDN toe in CSP?

Voeg de specifieke oorsprong toe aan de relevante richtlijn. Voor Google Analytics: script-src https://www.googletagmanager.com en connect-src https://www.google-analytics.com. Voor Google Fonts: style-src https://fonts.googleapis.com en font-src https://fonts.gstatic.com. Voor een CDN zoals cdnjs: script-src https://cdnjs.cloudflare.com. Implementeer eerst in report-only-modus, zodat u eventuele extra oorsprongen van derden die uw site laadt kunt opvangen voordat u gaat afdwingen.

Gerelateerde tools

Meer seo-tools

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool