Content Security Policy
Protect your site against user data breaches and cross-site scripting (XSS) attacks by controlling which scripts, content, and other resources can fetch or execute requests on your site.
A Content Security Policy (CSP) instructs the browser to restrict network requests to a set of trusted domains that your site specifies.
A CSP should be considered by any organization that cares about compliance and protecting against security concerns such as:
- client-side attacks
- exfiltration of customer data
- website defacement
When you implement a CSP, you create a custom response header that defines an allowlist. The allowlist contains the accepted domains, content hashes, and/or cryptographic nonces for your site.
To avoid the complexities that come with manually maintaining an allowlist, we recommend using the Content Security Policy extension to dynamically generate nonces for use with your CSP response headers.
This document outlines how to set up and use a CSP with your site on Netlify. You can also learn more by reading How I learned to stop worrying and love the Content Security Policy on the Netlify blog.
# Add a CSP to your site
To implement a CSP for your site, complete the following steps:
# 1. Define a CSP with custom headers
Define your CSP by setting custom headers. There are two headers in particular that are responsible for CSP:
Content-Security-Policy: This header instructs the browser to enforce the CSP as defined by this header’s value. Any resource that does not conform to this value will be blocked.Content-Security-Policy-Report-Only: This header acts as a dry-run of a CSP. You can test your production traffic against your proposed CSP and safely collect reported violations without actually blocking any resources.
If you’re not sure where to start, we recommend the following from the Content Security Policy Reference as a good starter policy for many sites. The policy allows images, scripts, AJAX, form actions, and CSS from the same origin, and does not allow any other resources to load. Include the following in your _headers file:
Content-Security-Policy-Report-Only: default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self';base-uri 'self';form-action 'self'
# 2. Generate a dynamic nonce
A unique nonce, or a number used once, can supplement the script-src directive. Instead of maintaining a static allowlist, you can rely on this dynamic value matching the nonce attribute of your <script> tags to verify integrity.
You can dynamically generate a unique nonce on every request by using Netlify Edge Functions. As a convenience, we’ve packaged this functionality into the Content Security Policy extension.
To install and configure the extension:
- As a Team Owner, navigate to Content Security Policy and install the extension on your team.
- Next, go to for the site you want to add a CSP nonce to and select Enable.
- The page will automatically update to reveal the extension’s configuration fields. Fill in the fields to configure the CSP for your site and then select Save.
If you prefer configuration as code, you can use the @netlify/plugin-csp-nonce build plugin instead.
# 3. Verify the integrity of your CSP
We recommend you test your CSP with Google’s CSP Evaluator test site.
# Monitor report violations
Netlify’s Content Security Policy extension automatically injects a CSP reporting function into your site if you don’t specify a reporting URL. Once installed, you can review CSP violation reports by navigating to
for your site and accessing the__csp-violations function logs. For more advanced monitoring, consider using a third-party tool like ReportURI or Datadog. If you already use an observability tool, it may offer a CSP report integration.
# More resources
Did you find this doc useful?
Your feedback helps us improve our docs.