Angular 18.2.x: Strict csp not working when we have aot false and script-src 'self' 'nonce-XYZABC';

[sushil-car]

Command

run

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

With aot false and script-src 'self' 'nonce-XYZABC'; we are getting below error in browser console

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-XYZABC". at below line in compilee.mjs file
const fn = _global['eval'](trustedScriptFromString(body));

eval getting blocked by strict CSP.

Is there any fix or to support strict csp with aot false ??

Minimal Reproduction

NA

Exception or Error

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-XYZABC".

Error is at below line in compiler.mjs file eval getting blocked by strict CSP

angular/packages/core/src/util/security/trusted_types.ts

Line 129 in 31da435

const fn = global['eval'](trustedScriptFromString(body)) as Function;

Your Environment

NA

Anything else relevant?

No response

[JoostK]

JIT compilation relies on dynamic code compilation which is inherently unsafe. Trusted types may be "blessed" in the CSP header to allow a certain policy (Angular uses a specific policy name for JIT compilation) but this isn't widely supported across browsers so unlikely to work reliably.

This is otherwise a support request so I'm closing this issue.

[sushil-car]

@JoostK Do you mean to allow unsafe-eval in CSP header thats the fix.
What does it mean Angular uses a specific policy name for JIT compilation, which policy.
Is is mentioned in documentation somewehere that JIT dont suport unsafe-eval?

[JoostK]

https://angular.dev/best-practices/security#enforcing-trusted-types

Is is mentioned in documentation somewehere that JIT dont suport unsafe-eval?

I don't think there is anything specific w.r.t. this, but there is a security mention on the above page:

https://angular.dev/best-practices/security#use-the-aot-template-compiler

It is STRONGLY recommended to remove any dependency on JIT compilation in the browser.

[sushil-car]

@JoostK I am sorry, can you please provide simple answer because I sae many issues on Angular related to CSP and no one is providing proper answer.
Do we have workaround or fix for this eval error when aot is false & have csp as "script-src 'self' 'nonce-XYZABC", we cant enable aot since we want to load bundles dynamically.

Or do you mean we should add something like below in header and then eval will work ?
Content-Security-Policy: trusted-types angular angular#unsafe-jit; require-trusted-types-for 'script';

[JoostK]

Since trusted types have limited availability, that likely won't work and the only alternative that is widely supported is unsafe-eval. More info in WebKit/standards-positions#355.

since we want to load bundles dynamically.

This is exactly why unsafe-eval would be required; dynamic code loading is vulnerable to potentially untrusted code injection by nature. There is a strict-dynamic CSP directive (https://content-security-policy.com/strict-dynamic/) that offers some freedom for script loading, but that is irrelevant for Angular's JIT compiler specifically.

I'd suggest posting question on StackOverflow for further CSP-related questions.