Content-Security-Policy unsafe-eval in Next.js 9.4+ dev env
See original GitHub issueBug report
Describe the bug
Content-Security-Policy support is broken requires the use of unsafe-eval in Next.js 9.4+ in dev env/mode. Presumably works without it in production. I think this is due to react-refresh using eval().
To Reproduce
You can use the with-strict-csp example to test this:
npx create-next-app --example with-strict-csp with-strict-csp-app
cd with-strict-csp-app
yarn dev
open http://localhost:3000
- Notice that nothing appears. Open browser console and see CSP errors
Expected behavior
Website opens normally and React Fast Refresh works normally in dev env.
Screenshots
Screenshots of CSP errors in Chrome’s console:
Additional context
This issue was fixed back in Next.js 8 🎉 We’ve been using Next since v5 and ran into this issue with Next.js 7 upgrade, which got fixed in v8 and now it’s back again 😄
We are using a small bit of code to patch this in dev env:
// In dev we allow 'unsafe-eval', so HMR doesn't trigger the CSP
if (process.env.NODE_ENV !== 'production') {
policies['script-src'].push("'unsafe-eval'");
}
Issue Analytics
- State:
- Created 3 years ago
- Reactions:4
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Advanced Features: Security Headers - Next.js
This header helps prevent cross-site scripting (XSS), clickjacking and other code injection attacks. Content Security Policy (CSP) can specify allowed origins ...
Read more >Problem with Content-Security-Policy, Next JS and AMP
Refused to create a worker from 'blob:' because it violates the following Content Security Policy directive: "default-src * data: 'unsafe-eval' ...
Read more >SAS web server Content Security Policy blocks access to ...
Solved: After an update of a SAS GRID server to SAS Version 9 TS1M7, we are facing the problem that the Content Security...
Read more >Understanding and implementing a proper Content Security ...
This post aims to discuss the best ways to implement a secure and scalable Content Security Policy on a website, along with some...
Read more >Environment Details | Mendix Documentation
Click the Change button next to the name of the environment. ... See Content Security Policy, below, for more information.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The reason eval is used in development is because of eval source maps, which are the fastest to generate and fastest to rebuild during development. They’re also the most accurate: https://webpack.js.org/configuration/devtool/
Is this the long-term solution, to update the example and not to fix the offending code? It would be really nice to be able to use a CSP during development that is as close as possible to the one running in production.