Angular Security Basics: XSS and Safe Rendering

XSS (Cross-Site Scripting) happens when attackers inject malicious scripts into your page, often through user-generated content.

Angular protects you by default in many cases, but you still need to understand safe patterns.

## Example: dangerous HTML rendering

If you do this:

```html
<div [innerHTML]="htmlFromApi"></div>
```

Angular will sanitize a lot of it, but you still should treat it carefully.

## Best practice

- Avoid rendering raw HTML unless you truly need it.
- Prefer structured content and templates.

## If you must render HTML

Use Angular’s sanitization tools, and only bypass security if you completely trust the source.

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

export class ArticleComponent {
  safeHtml: SafeHtml;

  constructor(sanitizer: DomSanitizer) {
    const htmlFromApi = '<p>Hello</p>';
    this.safeHtml = sanitizer.bypassSecurityTrustHtml(htmlFromApi);
  }
}
```

### Warning
`bypassSecurityTrustHtml` means “I trust this input.” Use it only when content is from a trusted pipeline.

> Next: Authentication patterns, JWT, interceptors, and route guards together.