How to setup nonce with NextJS
Learn how to properly setup nonce with NextJS to ensure a secure CSP configuration.
2024-12-03
5 min read

Theotime Quere
Read more →
Main menu
All articles
Next Article
HTTP Headers vs Meta Tags Implementation
Content Security Policy can be implemented in multiple ways and even multiple times in the same page. While this offers flexibility, it requires careful consideration to avoid security gaps and maintenance issues.
While it's possible to define your CSP across multiple headers, it's recommended to consolidate your policy into a single header. This approach offers better maintainability and makes it easier to predict the final policy behavior.
Example of a consolidated CSP in a single header
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.com; style-src 'self' 'unsafe-inline';
Example of CSP split across multiple headers
Content-Security-Policy: default-src 'self';
Content-Security-Policy: script-src 'self' https://trusted.com;
Content-Security-Policy: style-src 'self' 'unsafe-inline';
Policy Combination
When multiple policies are present, browsers will apply every directive from each policy, resulting in the most restrictive combination of all policies.
Since each Content Security Policy operates independently, when multiple policies are defined, the browser enforces each one separately. The resulting effective policy becomes the most restrictive combination of all defined policies. Let's see this in action:
First CSP header
Content-Security-Policy: script-src 'self' https://trusted.com https://analytics.com;
Second CSP header
Content-Security-Policy: script-src 'self' https://trusted.com;
Result
The final policy will only allow scripts from 'self' and https://trusted.com. The https://analytics.com source will be blocked because it's not present in all script-src directives.
You can use both Content-Security-Policy and Content-Security-Policy-Report-Only headers simultaneously. This allows you to enforce one policy while testing another one in report-only mode.
Enforced CSP header
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.com;
Report-only CSP header (stricter policy being tested)
Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self';
Behavior
In this example, scripts from trusted.com will be allowed to execute (due to the enforced policy) but will generate violation reports (due to the stricter report-only policy).
This approach is particularly useful when:
Sign up for a CentralCSP account in a minute. Get 14 days free trial.
Once logged in, register you application and get your reporting endpoint. You'll receive a unique endpoint URL that looks like: https://report.centralcsp.com/[your-endpoint-id]
Add your new endpoint URL to your CSP configuration using both report-uri and report-to directives for maximum browser compatibility.
Access your CentralCSP dashboard to view and analyze any CSP violations in real-time. You'll receive detailed reports about blocked resources and potential security issues.
First Tier Benefits
The first tier includes all essential features: real-time violation reporting, detailed analytics, and support for multiple domains. Upgrade only when you need advanced features like custom alerting, API access, or higher volume reporting.
While it's possible to implement multiple CSP policies, consolidating them into a single, well-structured policy is the recommended approach. This simplifies maintenance, reduces the risk of conflicts, and makes it easier to understand and update your security policies. Always use CSP reporting to monitor policy effectiveness and identify potential issues.
Learn how to properly setup nonce with NextJS to ensure a secure CSP configuration.
2024-12-03
5 min read
Theotime Quere
Read more →
Learn how to properly setup your CSP to ensure a secure configuration.
2024-12-03
5 min read
Theotime Quere
Read more →
Main menu
All articles
Written by
Theotime Quere
CentralSaaS © 2025