XSS Prevention — Angular’s Security Model and Safe HTML Handling

Angular has a built-in XSS defence system: by default, all values bound to the DOM are treated as untrusted and sanitised. String interpolation ({{ value }}) HTML-encodes the output. Property binding ([property]="expr") sanitises based on the property type. The only way to bypass Angular’s sanitisation is via the DomSanitizer bypass methods — which should be used sparingly, only with known-safe content, and never with unprocessed user input.

Angular’s Security Model #

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

// ── Angular's automatic XSS protection ────────────────────────────────────

// ✅ SAFE — Angular HTML-encodes the output
// If userInput = '<script>steal()</script>', the template renders:
// <p>&lt;script&gt;steal()&lt;/script&gt;</p> (harmless text)
// <p>{{ userInput }}</p>

// ✅ SAFE — Angular sanitises [innerHTML] by removing dangerous elements
// Angular strips <script>, event handlers (onclick), javascript: URLs
// <div [innerHTML]="userContent"></div>
// userContent = '<b>Bold</b><script>evil()</script>'
// Rendered: <div><b>Bold</b></div> — script stripped

// ⚠️  BYPASS — use only with content YOU construct (not user input)
@Component({ standalone: true, template: `
  <div [innerHTML]="safeHtml"></div>
` })
export class PostContentComponent {
  private sanitizer = inject(DomSanitizer);

  // Server-generated HTML we trust — marked as safe explicitly
  @Input() set html(value: string) {
    // Only do this for HTML from YOUR server, not from user-provided content
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(value);
  }
  safeHtml!: SafeHtml;
}

// ⛔ NEVER DO THIS — user content bypassed without sanitisation
// this.sanitizer.bypassSecurityTrustHtml(userComment);  // XSS vulnerability

// ── SafeHtmlPipe — for server-generated content ────────────────────────────
@Pipe({ name: 'safeHtml', standalone: true })
export class SafeHtmlPipe implements PipeTransform {
  private sanitizer = inject(DomSanitizer);

  transform(html: string | null): SafeHtml {
    if (!html) return '';
    // Angular will sanitise this — script tags, event handlers removed
    // bypassSecurityTrustHtml NOT used here — let Angular sanitise
    return html;  // Angular sanitises [innerHTML] binding automatically
    // Use bypass only if you need to render <iframe>, <script>, etc. from trusted source
  }
}

// ── URL sanitisation ──────────────────────────────────────────────────────
// Angular strips javascript: URLs from [href] and [src] automatically
// <a [href]="userUrl"> — Angular checks the URL, blocks javascript: protocol
// SafeResourceUrl needed for <iframe src> and <script src> from trusted sources:
// this.sanitizer.bypassSecurityTrustResourceUrl('https://trusted.com/embed')

// ── Content Security Policy — defence in depth ────────────────────────────
// Add to nginx config for the Angular app:
// add_header Content-Security-Policy "
//   default-src 'self';
//   script-src  'self';              ← blocks inline scripts and external scripts
//   style-src   'self' 'unsafe-inline';   ← allows inline styles (Material needs this)
//   img-src     'self' data: https:;
//   connect-src 'self' https://api.blogapp.com;
//   frame-ancestors 'none';          ← prevents clickjacking
// " always;

Common Mistakes #

Mistake 1 — Using bypassSecurityTrustHtml with user-provided content (XSS vulnerability) #

❌ Wrong — sanitizer.bypassSecurityTrustHtml(userComment); malicious user injects JavaScript that runs for all viewers.

✅ Correct — never bypass with user content; use [innerHTML]="userContent" (Angular sanitises automatically) or a server-side HTML sanitiser.

Mistake 2 — Relying solely on Angular sanitisation without CSP (single layer of defence) #

❌ Wrong — Angular sanitises but no CSP; a bypass in a dependency or a library allows script injection.

✅ Correct — add CSP as a defence-in-depth layer; blocks injected scripts even if sanitisation is bypassed.