Configure Your CSP Policy
Resource directives
Enable the directives you want to include. Enter source expressions separated by spaces. Leave the source field empty only when the directive does not require a value.
Additional security directives
Generated Content Security Policy
What Is Content Security Policy?
Content Security Policy (CSP) is a browser security mechanism that helps website owners control which resources a browser is allowed to load and execute. It is primarily used as an additional layer of defense against cross-site scripting (XSS), data injection, and certain unwanted resource-loading behaviors.
A CSP is normally delivered through the HTTP
Content-Security-Policy response header.
It can also be delivered using an HTML meta element,
although meta-based CSP has important limitations.
Example policy
This example restricts many resource types to the website's own origin, limits scripts to the same origin, disables plugin objects, and restricts the base element. It is only an illustration, not a universal policy.
Important CSP Directives
- default-src: Provides a fallback for several resource-loading directives.
- script-src: Controls permitted JavaScript sources and execution.
- style-src: Controls stylesheets and CSS.
- img-src: Controls image sources.
- font-src: Controls font resources.
- connect-src: Controls network connections initiated by browser APIs.
- object-src: Controls plugin-based embedded content.
- frame-src: Controls nested browsing contexts loaded by your page.
- frame-ancestors: Controls which sites can embed your page.
- base-uri: Restricts the URLs that can be used in a base element.
- form-action: Restricts form submission destinations.
- upgrade-insecure-requests: Requests that insecure resource URLs be upgraded to HTTPS.
What Do CSP Source Expressions Mean?
Common source expressions include:
'self'— resources from the same origin.'none'— no sources are permitted for that directive.https:— resources loaded using HTTPS, subject to the directive.data:— resources using data URLs, where supported by that directive.*.example.com— matching subdomains of a domain.'nonce-...'— a matching nonce on an allowed script or style element.'sha256-...'— a matching cryptographic hash source.
Be careful with broad sources and keywords such as
'unsafe-inline' and 'unsafe-eval'.
They can substantially weaken the protections provided by CSP.
Report-Only Mode vs Enforced Mode
Report-Only mode
A report-only policy allows you to observe CSP violations without blocking the resources that caused them. It is useful when introducing a new policy or testing changes to an existing configuration.
Enforced mode
An enforced CSP actively blocks resources that violate the configured policy. A policy that is too restrictive may prevent legitimate website features from working.
A practical rollout is to test a policy using the
Content-Security-Policy-Report-Only header,
review violations, adjust the policy, and then move to
enforcement after testing.
Strict CSP: Nonces and Hashes
A strict CSP generally uses a cryptographic nonce or hash to authorize scripts and styles, instead of relying only on broad domain allowlists.
Nonce-based CSP
A nonce is a random value generated by the server for each response. The same value is included in the CSP header and the corresponding authorized script or style elements. The value must be unpredictable and newly generated for every response.
The placeholder above is not a working nonce. Your application must generate a secure value for each response and insert that value into both the header and the authorized elements.
Hash-based CSP
A hash-based policy authorizes specific inline script or style content using a SHA-256, SHA-384, or SHA-512 hash. If the content changes, its hash must be recalculated.
These approaches require more careful implementation than simply allowing a list of third-party domains.
Related Security Tools
Explore more security utilities from Permitir.net: