CSP & Trusted Types

## Templates must become code somewhere An Angular template such as `<p>{{ user().name }}</p>` is not something the browser understands. Angular's **template compiler** turns it into JavaScript: functions that create the DOM nodes, and functions that update bindings when state changes. The question is **when** and **where** that compilation runs. | Mode | When templates compile | What runs in the browser | | :--- | :--- | :--- | | **AOT** (ahead-of-time) | during the build | pre-generated template functions in the bundle | | **JIT** (just-in-time) | in the browser at startup | the compiler itself, which generates code from strings | The security guide calls AOT the default compiler for Angular CLI applications and says to use it in all production deployments. ## Why JIT needs 'unsafe-eval' A JIT compiler produces **source text** for each template and must turn that text into a callable function. In Angular 22.2 the compiler does it through the global `eval` (or `new Function` where Trusted Types are unavailable). Both are string-to-code APIs, and a Content Security Policy controls them with the `'unsafe-eval'` keyword in `script-src`: 1. The policy is `script-src 'self' 'nonce-…'` with no `'unsafe-eval'`. 2. The JIT compiler tries to evaluate the generated template code. 3. The browser refuses, reports a violation, and the component never renders. Adding `'unsafe-eval'` would make JIT work, but it also re-enables `eval` for any script an attacker manages to influence, which is why strict policies leave it out. ## Why AOT does not need it With AOT the generated functions are part of the bundle, loaded as ordinary script files that `script-src 'self'` or a nonce already allows. At runtime Angular **executes** template functions; it never **creates** them from strings. The guide's minimal policy for a new Angular app therefore contains no `'unsafe-eval'` at all: ```txt default-src 'self'; style-src 'self' 'nonce-randomNonceGoesHere'; script-src 'self' 'nonce-randomNonceGoesHere'; ``` ## Trusted Types and JIT If the policy also enforces **Trusted Types**, the JIT compiler wraps its generated code through a dedicated policy named `angular#unsafe-jit`, and the guide says you must allow that policy whenever the app interacts with the JIT compiler or runs in JIT mode through `platformBrowserDynamic`. The `unsafe` in the name signals that it lets strings become code. ## The second reason: template injection Angular treats **templates as trusted code**: values bound into a template are sanitized, but the template text itself is not. If an app assembled a template string from user input and compiled it at runtime, the attacker would be writing Angular code, with no sanitizer in the way. AOT removes the runtime compiler, so this class of bug, which the guide calls **template injection**, is not reachable in a production build. For UI that must be data-driven, the guide points to building it from data with normal bindings, as its dynamic forms guide does, rather than generating templates. ## Where JIT still shows up - **`platformBrowserDynamic`** from `@angular/platform-browser-dynamic`, the old JIT bootstrap. All of that package's entries are deprecated since Angular 20; `bootstrapApplication` from `@angular/platform-browser` is the current path. - Code that calls the runtime `Compiler` or compiles components on the fly. - Test setups that compile components in the test run; these do not ship to users, so they do not affect the production CSP. ## How to tell which mode an app is in An Angular CLI build compiles AOT unless the project has opted out, so the usual suspects are code paths that bring the compiler back: a legacy bootstrap through `platformBrowserDynamic` that runs in JIT mode, code that compiles components from template strings at runtime, or a dependency that ships uncompiled components. In the browser, the tell is a CSP violation about evaluating a string as JavaScript right at startup, before anything renders. Turning the policy on in development is the cheapest way to find out. ## What to say in the interview - AOT compiles templates at build time; JIT compiles them in the browser. - JIT turns generated source text into functions with `eval`/`new Function`, which needs `'unsafe-eval'` and, under Trusted Types, `angular#unsafe-jit`. - AOT needs neither and also rules out template injection, so production builds should always be AOT.