Angular — Security

XSS Protection

Angular automatically sanitizes output:

<!-- Safe - automatically sanitized -->
<div>{{userInput}}</div>

<!-- Dangerous - bypasses sanitizer -->
<div [innerHTML]="trustedHtml"></div>

Sanitization

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

@Component({ ... })
export class MyComponent {
  constructor(private sanitizer: DomSanitizer) {}
  
  getTrustedHtml(html: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

CSRF Protection

// Angular handles CSRF automatically with HttpClient
// It reads the XSRF-TOKEN cookie

HTTP Security

// Use HTTPS
const apiUrl = 'https://api.example.com';

// Add security headers
const headers = new HttpHeaders({
  'X-Content-Type-Options': 'nosniff',
  'X-Frame-Options': 'DENY'
});

Input Validation

form = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email]),
  password: new FormControl('', [
    Validators.required,
    Validators.minLength(8),
    Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/)
  ])
});

Security Checklist

Practice	Description
Sanitize output	Prevent XSS
Use HTTPS	Encrypt data
Validate input	Prevent injection
Store tokens securely	HttpOnly cookies
Implement CORS	Control access

Mini Practice

1. Sanitize user input
2. Add security headers
3. Validate forms
4. Implement CORS

Up Next

Congratulations! You've completed the Angular course.