Angular Security

Security is defense in depth. Angular ships strong defaults (auto-sanitization, AOT, XSRF, SSRF header validation) – your job is to not undermine them and to add the layers Angular can't provide (CSP, Trusted Types, server-side authorization, patched dependencies). The browser is hostile territory: every value is untrusted, and any access decision that matters must be re-confirmed on the server.

Quick checklist

• Patch dependencies frequently – Angular and all npm packages, at least twice a year.
• Never concatenate user input into templates (client or server). Keep AOT; no runtime/JIT template generation.
• Bind through templates ({{ }}, property bindings). Avoid raw DOM (innerHTML, ElementRef.nativeElement, document, jQuery-style libs).
• bypassSecurityTrust* is a last resort – prefer allowlisting; treat every call as an audit point.
• Set up a strict CSP (nonce-based); fall back to autoCsp if you can't.
• Enable Trusted Types.
• Enforce authorization server-side – route guards and hidden UI are UX, not security.
• Configure SSR allowedHosts; never trust X-Forwarded-* blindly.

1. Trust Angular's sanitization – don't undermine it

Angular treats all values as untrusted and auto-escapes/sanitizes anything inserted into the DOM via templates. Interpolation always escapes; [innerHTML] strips dangerous elements (e.g. <script>) before rendering.