Angular Security

Angular defends against XSS by sanitizing template bindings.

Security Essentials

• XSS protection: Angular sanitizes template bindings to block script injection.
• Sanitization: Dangerous values are stripped or transformed before writing to the DOM.
• Bind properties: Use property bindings over string concatenation for URLs/HTML.
• Avoid bypass: Only use DomSanitizer in audited, rare cases.

// Angular sanitizes [innerHTML], [href], [src]
@Component({ template: `<div [innerHTML]="html"></div>` })
class C { html = '<b>Hello</b> <script>alert(1)</script>'; }

Sanitization Basics

// Property binding runs the sanitizer
<img [src]="photoUrl" alt="...">
<a [href]="profileUrl">Profile</a>

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h3>Sanitized HTML</h3>
    <div [innerHTML]="html"></div>
  `
})
class App {
  html = `Hello <script>alert('xss')</script>`;
}

bootstrapApplication(App);

<app-root></app-root>

Example explained

• [innerHTML]: Angular sanitizes bound HTML, removing dangerous content (e.g., scripts).
• Property bindings: Use [innerHTML]/[href]/[src] so the sanitizer runs.
• Interpolation: {{ ... }} escapes HTML by default; use bindings for safe HTML insertion.

REMOVE ADS

Safe DOM APIs

• Use property bindings for URLs and HTML to ensure the sanitizer runs.
• Audit any use of DomSanitizer.bypassSecurityTrust*; document scope and rationale.
• Limit bypass to vetted, static content paths encapsulated in small utilities.

import { DomSanitizer } from '@angular/platform-browser';

// Use: [href]="safeUrl" with validated values
// Avoid bypass unless strictly necessary and audited:
// const safe = sanitizer.bypassSecurityTrustUrl(untrusted);