Content-Security-Policy unsafe-eval in Next.js 9.4+ dev env

[Darep]

Bug 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:

1. npx create-next-app --example with-strict-csp with-strict-csp-app
2. cd with-strict-csp-app
3. yarn dev
4. open http://localhost:3000
5. 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'");
  }

[darshkpatel]

I'll take this up

[mattiasw]

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.

[timneutkens]

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/

[mattiasw]

I understand, you had to make a choice there. And I guess it isn't that bad, there are already other 'unsafe-*' rules needed in development mode. Also, I just have to say I really like Next.js and together with Vercel it's such a great product and service.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.