Polyfills trigger CSP errors when using reporting headers

[mderrick]

Link to the code that reproduces this issue

https://github.com/mderrick/nextjs-polyfill-csp-errors

To Reproduce

1. Run npm run build
2. Run npm start
3. View in console that eval has not caused an error
4. View in developer tools, "Application" tab -> "Reporting API" that the CSP error has been reported.

Current vs. Expected behavior

Observe that the hash (in a client component) that is importing crypto is rendered fine because Next bundles in a polyfill.

Everything looks fine but now that crypto-browserify is included in the bundle there is also an eval which is against the CSP policy set in the middleware.

// The eval that is run:
Script.prototype.runInThisContext = function() {
    return eval(this.code)
}

The eval is called within a try catch, so everything looks fine in the console - however, the browser still knows that eval was called and because of the CSP reporting headers in the middleware, the browser reports the CSP errors.

I would expect that we needn't run the eval on production at all given that it will always error - that way it never gets reported.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 20.19.1
  npm: 10.8.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.4.0-canary.61 // Latest available version is detected (15.4.0-canary.61).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Headers, Error Handling

Which stage(s) are affected? (Select all that apply)

next start (local)

Additional context

No response