App not running up on removing unsafe-eval for restricted CSP

Question

Description

My Application has restricted CSP which does not allow unsafe-eval for scripts. On adding a Content-Security-Policy header without unsafe-eval my application fails to load up.

Minimal Reproduction

I am passing this restrictive CSP header through nginx proxy configuration file.

add_header Content-Security-Policy "default-src 'self';  script-src 'self' 'nonce-$request_id'

I have removed the unsafe-eval here which is causing this issue while loading up the application

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'

You can add this CSP directly in index.html file for reproducing this error

<meta http-equiv="Content-Security-Policy" content= "default-src 'self' 'nonce-$request_id' ; script-src 'self' 'nonce-$request_id' ; style-src 'self' 'unsafe-inline'; frame-ancestors 'self';">

I am using angular version 9 with aot enabled in my project.

Exception or Error

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'nonce-17279687d574ebf5358210888e9e9395'".

at new Function (<anonymous>)
at b.N (vendor.c63b596435f6d085789d.js:1)
at b.c (vendor.c63b596435f6d085789d.js:1)
at Object.D [as resolveRef] (vendor.c63b596435f6d085789d.js:1)
at Object.t.exports [as code] (vendor.c63b596435f6d085789d.js:1)
at Object.t.exports [as validate] (vendor.c63b596435f6d085789d.js:1)
at Object.t.exports [as code] (vendor.c63b596435f6d085789d.js:1)
at t.exports (vendor.c63b596435f6d085789d.js:1)
at N (vendor.c63b596435f6d085789d.js:1)
at b.t (vendor.c63b596435f6d085789d.js:1

Your Environment

Angular Version: Angular CLI: 9.1.13 Node: 16.2.0 OS: win32 x64

Angular: 9.1.13

Answer 1

This may not apply to the original question, but I'm posting this here for anyone who may need it.

I ran into a similar situation today where not allowing unsafe-eval killed the entire application in dev. In my case the problem was with JIT compilation. Switching to AOT fixed it.

Here's a link to a related issue in the Angular github repo.