0

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

Rohan Malik
  • 1
  • 1
  • Did you happen to find a solution to this? I'm running into the same thing, except I'm running Angular 11. I have traced it to the point where if I use lazy loading in my `app-routing.module.ts` by setting loadChildren to a function that loads my module, then my bundle is compiled to include ReflectionCapabilities, which includes three functions which call new Function. The names of the functions are getter(), setter(), and method(). I'm still trying to figure out how to get around this. – Colin Jun 30 '21 at 17:53

1 Answers1

0

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.

plumbn
  • 115
  • 2
  • 9