Free Angular Security Scanner

Detect XSS bypass risks, insecure HTTP calls, exposed API keys, and Angular-specific vulnerabilities in 60 seconds. No signup required.

Scan Your Angular App Now

Our AI-powered scanner detects Angular-specific vulnerabilities including sanitizer bypasses, CORS issues, and missing security headers.

Initializing...

Ready to scan.

XSS Bypass Detection

Identifies use of bypassSecurityTrustHtml, bypassSecurityTrustScript, and other DomSanitizer bypass methods that disable Angular's built-in XSS protection.

Authentication & CSRF

Checks for missing CSRF token handling in HttpClient, unprotected routes without AuthGuard, and insecure token storage in localStorage.

Security Headers

Validates CSP compatibility with Angular (requires 'unsafe-eval' for JIT, not for AOT), HSTS, X-Frame-Options, and other essential headers.

Environment Exposure

Detects API keys, database URLs, and secrets embedded in environment.ts that get bundled into production JavaScript files visible to anyone.

CORS & API Security

Validates CORS configuration on backend APIs consumed by the Angular app. Checks for wildcard origins, credential issues, and preflight handling.

Dependency Audit

Checks for known vulnerabilities in npm dependencies. Angular apps have deep dependency trees — a single vulnerable package can compromise the entire application.

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

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

Related guides:

Frequently Asked Questions

What security risks are specific to Angular?

Bypassing built-in XSS protection via DomSanitizer, template injection, exposed API keys in environment.ts, missing CSRF handling, insecure token storage in localStorage, and CSP incompatibility with JIT compilation.

Is Angular secure by default?

Angular has strong built-in security: automatic output encoding, CSRF support, strict contextual escaping, and CSP compatibility with AOT. But developers can bypass these protections, and Angular doesn't add security headers or authenticate API calls by default.

How do I secure my Angular application?

Never use bypassSecurityTrust* with user input, enable CSRF protection, use route guards, don't store secrets in environment.ts, configure security headers, implement CSP, and run npm audit regularly.

Related Security Guides

🛡