Angular / web frontend security

Angular escapes interpolated values by output context by default, so the classic reflected XSS is closed out of the box. The vulnerabilities are where you leave that path, trust the client with something it should not hold, or reach a DOM sink Angular never saw. This is the client-side map. Treat every value that crossed a trust boundary - an API response, a route param, a deep link, a postMessage - as hostile until proven otherwise.

When to use

Load when hardening or reviewing an Angular web feature for security: XSS and bypassSecurityTrust, innerHTML, CSP nonces, CSRF/XSRF, secrets in the bundle, auth-token storage, SSR leaks, open redirects, vulnerable npm packages.

Not for non-security work or the mobile native surface.

XSS and the sanitizer bypass

• Interpolation {{ }} and property bindings auto-escape by context. The holes are the escape hatches: DomSanitizer.bypassSecurityTrustHtml / Script / Style / Url / ResourceUrl each disable Angular's protection for that value. Never call a bypassSecurityTrust* on anything that contains user input - a bypassSecurityTrustResourceUrl on a user-controlled iframe or <object> src is a full XSS, and bypassSecurityTrustHtml on user markup ships a script.

// VULNERABLE - user-controlled query param, sanitizer disabled for it: full XSS
readonly embedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
  this.route.snapshot.queryParams['src']);