You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/01-app/02-guides/content-security-policy.mdx
+9-7Lines changed: 9 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -447,15 +447,15 @@ module.exports = {
447
447
448
448
<AppOnly>
449
449
450
-
## Hash-based CSP with Subresource Integrity (Experimental)
450
+
## Subresource Integrity (Experimental)
451
451
452
452
As an alternative to nonces, Next.js offers experimental support for hash-based CSP using Subresource Integrity (SRI). This approach allows you to maintain static generation while still having a strict CSP.
453
453
454
-
> **Warning**: This feature is experimental and only available with webpack bundler in App Router applications.
454
+
> **Good to know**: This feature is experimental and only available with webpack bundler in App Router applications.
455
455
456
456
### How SRI works
457
457
458
-
Instead of using nonces, SRI generates cryptographic hashes of your JavaScript and CSS files at build time. These hashes are then used in your CSP policy to allow specific scripts and styles.
458
+
Instead of using nonces, SRI generates cryptographic hashes of your JavaScript files at build time. These hashes are added as `integrity` attributes to script tags, allowing browsers to verify that files haven't been modified during transit.
459
459
460
460
### Enabling SRI
461
461
@@ -474,15 +474,17 @@ const nextConfig = {
474
474
module.exports= nextConfig
475
475
```
476
476
477
-
### Using SRI with CSP
477
+
### CSP configuration with SRI
478
478
479
-
When SRI is enabled, you can use hash-based CSP policies:
479
+
When SRI is enabled, you can continue using your existing CSP policies. SRI works independently by adding `integrity` attributes to your assets:
480
+
481
+
> **Good to know**: For dynamic rendering scenarios, you can still generate nonces with middleware if needed, combining both SRI integrity attributes and nonce-based CSP approaches.
480
482
481
483
```js filename="next.config.js"
482
484
constcspHeader=`
483
485
default-src 'self';
484
-
script-src 'self'; /* Next.js will automatically add hashes */
485
-
style-src 'self'; /* Next.js will automatically add hashes */
0 commit comments