Allow unsafe-eval during development (#55998)

Fixes issue where a freshly cloned example will not work in development
mode due to `unsafe-eval` being blocked by the CSP.

Currently, the example will not work in development. Running the example
with `run dev` will produce EvalError errors in console which prevent
the app from functioning. This error also prevents any `<Script>`
components with `afterInteractive` from being loaded. These issues do
not occur in production where `eval` is not used.

This PR:
- Fixes the issue by allowing `unsafe-eval` if the environment is not
`production`.
- Improves the `script-src` value by [allowing backwards compatibility
with
browsers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic)
that do not support `strict-dynamic` (`https: http: 'unsafe-inline'`
will be ignored by browsers that support `strict-dynamic`).

Some further details are available here:
#55638. This PR is not a fix for
the issue however.

- Fixes #61316

Co-authored-by: Sam Ko <sam@vercel.com>

Author: sleepdotexe

examples/with-strict-csp/middleware.js

@@ -4,7 +4,9 @@ export function middleware(request) {
   const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
   const cspHeader = `
     default-src 'self';
-    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
+    script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https: http: 'unsafe-inline' ${
+    process.env.NODE_ENV === "production" ? "" : `'unsafe-eval'`
+  };
     style-src 'self' 'nonce-${nonce}';
     img-src 'self' blob: data:;
     font-src 'self';