Free Angular Security Scanner

Angular Security Risks

Angular is a comprehensive enterprise framework with strong built-in security features. However, developers can inadvertently bypass these protections or introduce vulnerabilities through misconfiguration.

1. Bypassing Angular's XSS Protection

Angular automatically sanitizes values bound to the DOM. However, the DomSanitizer service provides bypass methods that disable this protection:

// DANGEROUS — Bypasses Angular's XSS protection
constructor(private sanitizer: DomSanitizer) {}

displayHtml(userInput: string) {
  // If userInput contains <script> tags, they WILL execute
  return this.sanitizer.bypassSecurityTrustHtml(userInput);
}

// SAFE — Use Angular's built-in sanitization
// Simply bind with [innerHTML] — Angular sanitizes automatically
<div [innerHTML]="userContent"></div>

// Or sanitize explicitly with DOMPurify for complex HTML
import DOMPurify from 'dompurify';
cleanHtml = DOMPurify.sanitize(userInput);

2. Exposed Environment Variables

Angular's environment.ts files are compiled into the production JavaScript bundle. Any secrets placed here are visible to anyone who inspects the source:

// environment.prod.ts — DANGEROUS
export const environment = {
  production: true,
  apiKey: 'sk_live_xxx',        // Visible in browser!
  databaseUrl: 'postgres://...' // Visible in browser!
};

// CORRECT — Only store public configuration
export const environment = {
  production: true,
  apiBaseUrl: '/api',           // Proxy through your backend
  stripePublicKey: 'pk_live_xxx' // Public keys only
};

3. Missing CSRF Protection

Angular's HttpClientXsrfModule provides CSRF protection, but it must be explicitly configured:

// app.module.ts
import { HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'XSRF-TOKEN',
      headerName: 'X-XSRF-TOKEN'
    })
  ]
})

4. CSP Configuration for Angular

Angular AOT (Ahead-of-Time) compilation is CSP-compatible. JIT (Just-in-Time) compilation requires 'unsafe-eval' which weakens CSP. Always use AOT in production:

# CSP for Angular AOT (production)
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'

# Note: 'unsafe-inline' for styles is needed for Angular's component styles
# Use nonce-based CSP for stricter security if possible

Angular Security Checklist

1. Never use bypassSecurityTrust* methods with user input
2. Use AOT compilation in production (default in Angular CLI)
3. Enable CSRF protection with HttpClientXsrfModule
4. Implement route guards (CanActivate, CanLoad) for protected routes
5. Never store secrets in environment.ts — use a backend proxy
6. Store auth tokens in HttpOnly cookies, not localStorage
7. Configure security headers on your web server
8. Set up CSP compatible with Angular AOT
9. Use Angular's HttpClient with interceptors for auth headers
10. Validate all route parameters and query strings
11. Run npm audit regularly and fix vulnerabilities
12. Schedule regular security scans

Related guides:

• XSS Prevention Guide
• Security Headers Guide
• CORS Fix Guide
• API Security Best Practices
• React App Security Scanner