How to Configure CSP Nonce

1. Generate nonce per request: $nonce = base64_encode(random_bytes(16));
2. Set CSP header: Content-Security-Policy: script-src 'self' 'nonce-<NONCE>' 'strict-dynamic'
3. In HTML: <script nonce="<NONCE>">doStuff()</script>
4. All other inline is blocked (as intended for XSS defence)
5. For React/Next.js: via __webpack_nonce__ + middleware
6. Verify: DevTools → Console → should be no "Refused to execute inline script"
7. Enterno CSP Analyzer → grade = A

• Non-random nonce (timestamp, sequential) — attacker can predict
• Reusing a nonce across requests — completely breaks security
• Forgetting to add nonce to a legitimate inline script — blocked, sign-in form breaks
• Google Analytics / GTM scripts don't expect nonce — use strict-dynamic or hash
• CSP via HTML meta instead of HTTP header — ineffective for first-page XSS

To configure a Content Security Policy (CSP) with a nonce and remove 'unsafe-inline', generate a unique nonce for each request, insert it into your HTML, and apply it to your script tags. This approach enhances security by preventing the execution of unauthorized inline scripts while still allowing specific scripts to run.

Content Security Policy (CSP) is a security feature designed to mitigate various types of attacks such as Cross-Site Scripting (XSS) and data injection attacks. By implementing CSP, web developers can specify which sources of content are trusted and which are not. A nonce (number used once) is a critical component that allows you to enable inline scripts without resorting to the less secure 'unsafe-inline' directive.

The primary goal of using a nonce is to enhance security while maintaining functionality. When a nonce is included in the CSP header, it must be added to the script tags in your HTML. This ensures that only scripts with the correct nonce value will be executed, effectively blocking any unauthorized inline scripts.

To set up a nonce-based CSP, follow these steps:

1. Generate a unique nonce for each HTTP response.
2. Add the nonce to your CSP header.
3. Include the same nonce in your inline script tags.

Here’s a practical example of how to implement this:

const nonce = generateNonce(); // Function to generate a unique nonce

In your HTTP response header, set the CSP:

Content-Security-Policy: script-src 'self' 'nonce-{nonce}'

And in your HTML:

<script nonce="{nonce}">console.log('Secure Script');</script>

Replace {nonce} with the actual nonce generated for that request. This approach ensures that only scripts with the correct nonce are executed, effectively removing the need for 'unsafe-inline' and significantly enhancing your website’s security posture.

In the context of EU regulations, particularly the GDPR, ensuring robust security measures like CSP can help in compliance with data protection standards and prevent unauthorized access to user data.