Skillshub angular-security

Security best practices for Angular (XSS, CSP, Route Guards). Use when implementing XSS protection, Content Security Policy, or auth guards in Angular. (triggers: DomSanitizer, innerHTML, bypassSecurityTrust, CSP, angular security, route guard)

install
source · Clone the upstream repo
git clone https://github.com/ComeOnOliver/skillshub
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/ComeOnOliver/skillshub "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/HoangNguyen0403/agent-skills-standard/angular-security" ~/.claude/skills/comeonoliver-skillshub-angular-security && rm -rf "$T"
manifest: skills/HoangNguyen0403/agent-skills-standard/angular-security/SKILL.md
source content

Security

Priority: P0 (CRITICAL)

Principles

  • XSS Prevention: Angular sanitizes interpolated values by default — {{ userInput }} is safe. Do NOT use
    innerHTML
    unless absolutely necessary (e.g., trusted static CMS content). For user-generated content, display as text with {{ content }} — never as HTML.
  • Bypass Security: Only bypass security for content you control (e.g., trusted CMS headers). Never call bypassSecurityTrustHtml on user-provided data. Use DomSanitizer.sanitize(SecurityContext.HTML, content) instead of bypass functions. Audit every bypassSecurityTrust* call as a potential XSS vector.
  • Route Guards: Protect all sensitive routes with a functional CanActivateFn (e.g., inject(Router).createUrlTree(['/login'])). Apply with canActivate: [authGuard].

Guidelines

  • CSP: Configure CSP headers on the server (not in Angular source). Use nonce-based CSP with script-src 'nonce-{nonce}' and avoid unsafe-inline/unsafe-eval.
  • HTTP: Use Interceptors to attach secure tokens. Use HttpOnly cookies managed by the server — not localStorage or sessionStorage because they are accessible via XSS.
  • Secrets: Never store API keys or secrets in Angular source code or bundle.

Anti-Patterns

  • No bypassSecurityTrust: Trust Angular's sanitization; bypass only for verified static content.
  • No localStorage for tokens: Use HttpOnly cookies via interceptors for auth tokens.
  • No secrets in source: Never embed API keys or secrets in Angular bundle code.

References