jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

SEO Tools

CSP Starter Policy Generator for Static Sites

Choose preset templates for common static site setups or customize each directive. Get a Content-Security-Policy header and a report-only version for testing.

Loading tool...

What is CSP Starter Policy Generator for Static Sites?

Content-Security-Policy (CSP) is a browser security header that controls which resources a page is allowed to load. It helps prevent cross-site scripting, data injection, and other code injection attacks. For static sites, a CSP header can be simple and conservative because most static pages load resources from predictable, controlled origins.

Quick answer

A Content Security Policy blocks cross-site scripting and data injection attacks by restricting which resources the browser can load. Start with a restrictive policy and widen only when needed.

Limitations

  • CSP does not protect against server-side vulnerabilities or compromised third-party libraries already included in the policy.
  • Inline event handlers and javascript: URLs are blocked unless 'unsafe-inline' or a hash/nonce is set.
  • GitHub Pages does not support custom HTTP headers; use a meta tag-based CSP instead, which has limited directive support compared to the HTTP header.

How to use this tool

  1. Pick a preset that matches your site type: static, with CDN, with analytics, or with embedded content.
  2. Review the generated directives and toggle additional sources your site needs.
  3. Copy the CSP header into your hosting configuration or as a meta tag.
  4. Deploy the report-only version first and check the browser console for violations before enforcing.

What you can use it for

  • Create a conservative CSP for a plain HTML static site with no external resources.
  • Add script and font sources for Google Fonts, Bootstrap CDN, or Google Analytics.
  • Prepare a CSP for GitHub Pages that accounts for the hosting origin.

Use cases

Practical examples

Example

Plain static site CSP

A hand-coded HTML site with no CDN, no analytics, and no embeds gets a minimal CSP that allows its own origin for all resource types.

Example

Static site with CDN and analytics

A site using a CSS framework CDN, Google Fonts, and Google Analytics gets a CSP that allows those origins while blocking everything else.

Common mistakes

  • Deploying a CSP in enforce mode without testing in report-only mode first, which can break legitimate resources.
  • Using 'unsafe-inline' for scripts without understanding that it disables most of the XSS protection CSP provides.
  • Forgetting to add the GitHub Pages preview domain or CDN origin to the policy, causing the site to break on deployment.

Verification

  1. Deploy the CSP in report-only mode first by using Content-Security-Policy-Report-Only and check the browser console for violation reports.
  2. Switch to the enforce header only after confirming no legitimate resources are being blocked.

Comparison

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

Questions about CSP Starter Policy Generator for Static Sites

Can CSP be delivered as a meta tag?

Yes. Use <meta http-equiv="Content-Security-Policy" content="..."> in the page head. Note that some directives such as frame-ancestors and report-uri do not work in the meta tag.

Should I start with report-only mode?

Yes. Deploy with Content-Security-Policy-Report-Only first, monitor the browser console for violations, adjust the policy, and only switch to enforce mode when no unexpected violations appear.

What is the safest default-src for a static site?

default-src 'self' is a practical starting point. It allows resources from the same origin and blocks everything else. Add specific origins for CDNs, fonts, and analytics as needed.

Related tools

More seo tools

Also try

Also try