The spatie/laravel-csp package handles dynamic nonces for inline scripts and styles by generating a unique nonce value per HTTP request and automatically injecting it into the Content Security Policy (CSP) headers and relevant HTML elements. Here is a detailed explanation of how it works:
Nonce Generation
- The package uses a NonceGenerator interface to generate a nonce string dynamically for each request.
- By default, you can implement your own nonce generator class that returns a unique random string. For example, you can integrate with Laravel Vite's nonce system by creating a class like `LaravelViteNonceGenerator` which uses `Vite::cspNonce()` to get the nonce generated by Vite during asset compilation.
- You specify your nonce generator class in the `nonce_generator` key of the package's `csp.php` configuration file.
Applying Nonces in Policies
- In your CSP policy class (which typically extends `Spatie\Csp\Policies\Basic`), you use methods like `addNonceForDirective(Directive::SCRIPT)` and `addNonceForDirective(Directive::STYLE)` to indicate that a nonce should be added to the `script-src` and `style-src` directives.
- This ensures the generated nonce is included in the CSP header for these directives, allowing inline scripts and styles that carry the matching nonce attribute to execute.
Middleware and Header Injection
- The package provides middleware (`Spatie\Csp\AddCspHeaders`) that you register in your HTTP kernel or on specific routes.
- This middleware generates the nonce for the request, applies the CSP policy including the nonce directives, and adds the appropriate CSP headers to the HTTP response.
- The nonce value is consistent within the request, so you can use blade directives like `@nonce` or helper functions like `csp_nonce()` in your views to output the nonce attribute on inline `` or `` tags.
Integration with Laravel Vite
- When using Laravel Vite, the package can leverage Vite's built-in nonce generation via `Vite::cspNonce()`.
- You can create a custom nonce generator class that returns the nonce from Vite, ensuring that the nonce used in the CSP header matches the nonce applied to Vite-injected scripts and styles.
- This avoids CSP violations caused by nonce mismatches and allows secure inline scripts/styles in Vite-powered Laravel apps.
Additional Features
- The package also supports rendering CSP policies as meta tags (via `@cspMetaTag` blade directive) when you cannot control HTTP headers.
- It supports report-only mode for testing CSP policies without blocking resources.
- You can customize policies for different environments (development vs production).
Practical Notes
- You must ensure the nonce is output on inline scripts/styles using the blade `@nonce` directive or `csp_nonce()` helper; otherwise, the browser will block them.
- Browsers like Chrome may strip nonce attributes from script tags injected dynamically, so use nonce carefully and test behavior.
- The nonce is a random string generated per request, making inline scripts/styles safer by allowing only those with the correct nonce to execute.
In summary, spatie/laravel-csp dynamically generates a nonce per request through a configurable nonce generator, includes this nonce in the CSP headers for scripts and styles, and provides blade directives and helpers to output the nonce attribute on inline elements. This integration, especially with Laravel Vite, ensures inline scripts and styles are securely allowed by the CSP without using unsafe-inline, enhancing application security while maintaining functionality[1][2][3][4][6].
Citations:
[1] https://github.com/spatie/laravel-csp
[2] https://laravel.io/forum/laravel-mix-and-content-security-policy
[3] https://laravel-news.com/package/spatie-laravel-csp
[4] https://stackoverflow.com/questions/75106343/nonce-is-always-empty-when-using-spatie-laravel-csp-with-laravel-and-vite-js
[5] https://github.com/spatie/laravel-csp/discussions/96
[6] https://stackoverflow.com/questions/77459507/how-to-add-csp-nonce-in-inline-style-and-script-injected-by-vue-in-a-laravel-and
[7] https://www.stackhawk.com/blog/laravel-content-security-policy-guide-what-it-is-and-how-to-enable-it/
[8] https://stackoverflow.com/questions/78864184/enable-nonce-to-laravel-official-packages
[9] https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src