Skip to content

Commit ea08bf2

Browse files
authored
docs: CSP with SRI corrections (#82365)
Feedback on the csp guide updates
1 parent dd47934 commit ea08bf2

File tree

1 file changed

+9
-7
lines changed

1 file changed

+9
-7
lines changed

docs/01-app/02-guides/content-security-policy.mdx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -447,15 +447,15 @@ module.exports = {
447447
448448
<AppOnly>
449449
450-
## Hash-based CSP with Subresource Integrity (Experimental)
450+
## Subresource Integrity (Experimental)
451451
452452
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.
453453
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.
455455
456456
### How SRI works
457457
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.
459459
460460
### Enabling SRI
461461
@@ -474,15 +474,17 @@ const nextConfig = {
474474
module.exports = nextConfig
475475
```
476476
477-
### Using SRI with CSP
477+
### CSP configuration with SRI
478478
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.
480482
481483
```js filename="next.config.js"
482484
const cspHeader = `
483485
default-src 'self';
484-
script-src 'self'; /* Next.js will automatically add hashes */
485-
style-src 'self'; /* Next.js will automatically add hashes */
486+
script-src 'self';
487+
style-src 'self';
486488
img-src 'self' blob: data:;
487489
font-src 'self';
488490
object-src 'none';

0 commit comments

Comments
 (0)