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

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'");
  }

[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]

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.