How to Configure Content-Security-Policy with Nonce

1. Generate nonce in PHP. At template top: $nonce = base64_encode(random_bytes(16));. Must be a new nonce per request.
2. Add CSP header. In PHP: header("Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-{$nonce}'; style-src 'self' 'nonce-{$nonce}'; object-src 'none'; base-uri 'self'");
3. Set nonce on inline scripts. <script nonce="<?= $nonce ?>">console.log('ok');</script>. Without nonce the script will be blocked.
4. Validate. Use /en/csp Enterno.io checker. Grade A means correct setup.
5. Run CSP-Report-Only in parallel. For monitoring: Content-Security-Policy-Report-Only: ...; report-uri /csp-report.php. Collect violations before enforcing.

Open tool →

Content Security Policy (CSP) is a security feature that helps prevent Cross-Site Scripting (XSS) attacks by controlling which resources can be loaded on a webpage. One of the most effective ways to use CSP is through the nonce mechanism. A nonce (number used once) is a random value generated for each HTTP request that allows you to specify which scripts are safe to execute.

The nonce is included in your CSP header and must also be placed in the nonce attribute of each inline <script> tag. This creates a secure link between the CSP directive and the script, ensuring that only scripts with the correct nonce can be executed. If a script does not have the corresponding nonce, the browser will block it, thus enhancing your site's security.

To effectively implement the nonce mechanism, you must ensure that the nonce value is unique for each request. This uniqueness prevents attackers from reusing nonces to execute malicious scripts. Additionally, it is crucial to avoid using unsafe-inline in your CSP, as this would undermine the security intended by the nonce.

To configure CSP headers with nonce in a practical environment, follow these steps:

• Step 1: Generate a nonce value for each HTTP request. In PHP, you can use the following command:

• Step 2: Add the nonce to your CSP header. In your server configuration or application code, you can set the header as follows:

• Step 3: Include the nonce in your inline <script> tags. For example:

• Step 4: Test your configuration. Use the browser's developer tools to check if the scripts are loading correctly and ensure that scripts without the correct nonce are blocked.

By following these steps, you can effectively implement a CSP with nonce, significantly enhancing your website's protection against XSS attacks.

Debugging issues related to CSP and nonce can be crucial for maintaining the security and functionality of your web application. Here are some common issues and how to troubleshoot them:

• Issue 1: Scripts not executing:
• Ensure that the nonce in your CSP header matches the nonce in the nonce attribute of your inline <script> tags. Mismatched values will lead to the browser blocking the script.
• Issue 2: CSP violations:
• Open the browser's console and look for CSP violation messages. These messages will indicate which scripts are being blocked and the reason for the block. This can help you identify whether incorrect nonces or other CSP directives are causing the issue.
• Issue 3: Nonce not being generated:
• Double-check your server-side code to ensure that the nonce is being generated for every request. If the nonce is static or not being regenerated, it will lead to security vulnerabilities.

By systematically addressing these issues, you can ensure that your CSP with nonce is functioning correctly, providing the intended protection against XSS attacks.