Backend interview prep

Start

Angular Security

Learn Angular Security with XSS protection, CSRF prevention, CSP, Trusted Types, authentication, authorization, JWT, route guards, secure HTTP communication, OWASP best practices, and interview questions.

Security is one of the most critical aspects of modern web applications.

An Angular application communicates with APIs, stores user data, processes authentication, and handles sensitive business information. A single security vulnerability can expose confidential data or compromise the entire application.

Angular provides several built-in security mechanisms, but developers must understand how to use them correctly.

This guide covers Angular security best practices, common vulnerabilities, and enterprise recommendations.

Table of Contents

  1. Why Angular Security Matters
  2. Common Web Security Threats
  3. Angular Security Architecture
  4. XSS Protection
  5. CSRF Protection
  6. Authentication & Authorization
  7. JWT Security
  8. Route Guards
  9. HTTP Security
  10. Content Security Policy (CSP)
  11. Trusted Types
  12. Secure Coding Best Practices
  13. Enterprise Banking Example
  14. Common Mistakes
  15. Top 10 Interview Questions
  16. Interview Cheat Sheet
  17. Summary

Why Angular Security Matters

Security protects:

  • User accounts
  • Personal information
  • Banking transactions
  • Payment systems
  • Business data
  • API endpoints

Poor security can lead to:

  • Data breaches
  • Identity theft
  • Session hijacking
  • Account compromise
  • Financial loss

Common Security Threats

Threat Description
XSS Cross-Site Scripting
CSRF Cross-Site Request Forgery
SQL Injection Backend vulnerability
Clickjacking UI redressing attack
Session Hijacking Stealing session information
Broken Authentication Weak login implementation
Insecure Storage Sensitive data exposure
Sensitive Data Exposure Unencrypted confidential data

Angular Security Architecture

flowchart LR

User

User --> AngularApp

AngularApp --> AuthGuard

AuthGuard --> HttpInterceptor

HttpInterceptor --> HTTPS

HTTPS --> BackendAPI

BackendAPI --> Database

Cross-Site Scripting (XSS)

XSS occurs when attackers inject malicious JavaScript into a web page.

Example attack

<script>
alert("Hacked");
</script>

Angular automatically escapes values displayed through template interpolation.

<p>{{ customer.name }}</p>

Angular converts dangerous HTML into safe text.

Dangerous HTML Example

❌ Unsafe

element.innerHTML = userInput;

✅ Safe

<div>{{ userInput }}</div>

Always prefer template binding over direct DOM manipulation.

Angular Sanitization

Angular sanitizes values for:

  • HTML
  • URLs
  • Styles
  • Resource URLs

Example

<div [innerHTML]="content"></div>

Angular sanitizes potentially dangerous HTML before rendering.

Security Contexts

Context Angular Protection
HTML Sanitized
Style Sanitized
URL Sanitized
Resource URL Requires explicit trust

XSS Protection Flow

flowchart LR

UserInput

UserInput --> AngularSanitizer

AngularSanitizer --> SafeHTML

SafeHTML --> Browser

DomSanitizer

Sometimes trusted HTML is required.

constructor(
  private sanitizer: DomSanitizer
) {}

trustedHtml = this.sanitizer.bypassSecurityTrustHtml(
  "<b>Trusted Content</b>"
);

⚠️ Use bypassSecurityTrustHtml() only when the content is completely trusted.

Cross-Site Request Forgery (CSRF)

CSRF tricks authenticated users into sending unwanted requests.

Example

  1. User logs into a banking website.
  2. User visits a malicious website.
  3. Hidden request transfers money.

Protection includes:

  • CSRF tokens
  • SameSite cookies
  • Backend validation

CSRF Architecture

flowchart LR

Browser

Browser --> CSRFToken

CSRFToken --> Backend

Backend --> Validation

Validation --> Success

Authentication vs Authorization

Authentication Authorization
Who are you? What can you access?
Login Permissions
Identity Verification Access Control
JWT/OAuth Roles & Policies

Example

  • Authentication → User logs in.
  • Authorization → User can access the Admin Dashboard.

JWT Authentication

Typical authentication flow

sequenceDiagram

participant User

participant Angular

participant AuthAPI

User->>Angular: Login

Angular->>AuthAPI: Credentials

AuthAPI-->>Angular: JWT Token

Angular->>AuthAPI: API Request

Note right of Angular: Authorization: Bearer Token

AuthAPI-->>Angular: Protected Data

HTTP Interceptor

Automatically attach JWT tokens.

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ) {

    const token = localStorage.getItem("token");

    const authRequest = request.clone({

      setHeaders: {

        Authorization: `Bearer ${token}`

      }

    });

    return next.handle(authRequest);

  }

}

Route Guards

Route Guards protect application pages.

export const authGuard: CanActivateFn = () => {

  const authService = inject(AuthService);

  return authService.isLoggedIn();

};

Routes

{
  path: 'admin',
  canActivate: [authGuard],
  loadComponent: () =>
    import('./admin.component')
}

Role-Based Authorization

if(user.role === 'ADMIN'){

// Allow access

}

Better approach

return authService.hasRole("ADMIN");

Encapsulate authorization logic inside services.

Secure HTTP Communication

Always use:

  • HTTPS
  • TLS
  • Secure Cookies
  • Authorization headers

Never send credentials over HTTP.

Content Security Policy (CSP)

Content Security Policy reduces XSS attacks.

Example

Content-Security-Policy:

default-src 'self';

script-src 'self';

object-src 'none';

Benefits

  • Blocks unauthorized scripts
  • Reduces injection attacks
  • Improves browser security

Trusted Types

Trusted Types help prevent DOM-based XSS.

Benefits

  • Prevent unsafe DOM APIs
  • Restrict HTML injection
  • Improve browser security

Angular supports Trusted Types in modern browsers.

Password Security

Best practices

  • Strong passwords
  • Multi-Factor Authentication (MFA)
  • Password hashing (backend)
  • Password expiration (if required)
  • Account lockout after repeated failures

Angular should never hash passwords in the browser as a replacement for secure server-side password handling.

Secure Storage

Avoid storing sensitive information such as:

  • Passwords
  • Refresh tokens (unless your architecture explicitly supports secure handling)
  • Personal identification numbers

Prefer:

  • Secure, HttpOnly cookies for sensitive tokens (when supported by your backend)
  • Short-lived access tokens
  • Backend session validation

Security Headers

Recommended headers

  • Content-Security-Policy
  • Strict-Transport-Security
  • X-Frame-Options
  • X-Content-Type-Options
  • Referrer-Policy
  • Permissions-Policy

Most of these are configured on the web server or API gateway rather than in Angular itself.

Enterprise Banking Example

Security Architecture

flowchart TD

User

User --> Login

Login --> AuthAPI

AuthAPI --> JWT

JWT --> Angular

Angular --> AuthGuard

AuthGuard --> Dashboard

Dashboard --> HTTPS

HTTPS --> BankingAPI

Security Features

  • HTTPS
  • JWT Authentication
  • Role-based Authorization
  • CSP
  • Trusted Types
  • Route Guards
  • Http Interceptors
  • Secure Cookies
  • Server-side Validation

OWASP Security Checklist

Practice Recommendation
XSS Protection Angular Sanitization
CSRF CSRF Tokens
HTTPS Always
JWT Short-lived tokens
Authentication MFA
Authorization Role-based
Password Storage Backend hashing
Security Headers Enable
Input Validation Client + Server
Logging Audit security events

Common Mistakes

Using innerHTML

❌ Wrong

element.innerHTML = html;

Prefer Angular template binding or sanitized content.

Trusting User Input

Never assume user input is safe.

Validate on both:

  • Client
  • Server

Storing Sensitive Data in Local Storage

Avoid storing highly sensitive information in browser storage.

Use secure server-backed approaches such as HttpOnly cookies where appropriate.

Relying Only on Route Guards

Route Guards improve the user experience but do not replace backend authorization.

Every protected API must validate the user's permissions.

Ignoring HTTPS

Never deploy production applications over HTTP.

Angular Security Best Practices

Practice Benefit
HTTPS Everywhere Secure communication
Route Guards Navigation protection
HTTP Interceptors Automatic authentication headers
CSP XSS mitigation
Trusted Types DOM security
Angular Sanitization Safe rendering
Input Validation Prevent malicious input
Backend Authorization Secure APIs

Top 10 Angular Security Interview Questions

1. How does Angular protect against XSS?

Answer

Angular automatically escapes template interpolation and sanitizes potentially dangerous values in supported security contexts such as HTML, styles, and URLs.

2. What is XSS?

Answer

Cross-Site Scripting (XSS) is an attack where malicious JavaScript is injected into a web page and executed in another user's browser.

3. What is CSRF?

Answer

Cross-Site Request Forgery (CSRF) tricks authenticated users into submitting unwanted requests. Common defenses include CSRF tokens, SameSite cookies, and backend validation.

4. What is the difference between authentication and authorization?

Answer

Authentication verifies identity, while authorization determines what resources an authenticated user is allowed to access.

5. Why use HTTP Interceptors?

Answer

Interceptors centralize cross-cutting HTTP logic such as adding authorization headers, logging, request tracing, or global error handling.

6. What is Content Security Policy?

Answer

CSP is a browser security mechanism that restricts which resources (such as scripts and styles) can be loaded, helping mitigate XSS attacks.

7. What are Trusted Types?

Answer

Trusted Types are a browser security feature that helps prevent DOM-based XSS by restricting unsafe DOM injection APIs to trusted values.

8. Are Route Guards enough to secure an application?

Answer

No. Route Guards protect navigation in the client, but every backend API must independently enforce authentication and authorization.

9. Why should applications use HTTPS?

Answer

HTTPS encrypts communication between the browser and the server, protecting credentials, tokens, and sensitive data from interception.

10. What are Angular security best practices?

Answer

  • Use HTTPS
  • Validate data on both client and server
  • Enable CSP
  • Use Route Guards for navigation
  • Protect APIs with server-side authorization
  • Keep dependencies updated
  • Avoid unsafe DOM manipulation
  • Follow OWASP recommendations

Interview Cheat Sheet

Requirement Recommended Solution
XSS Protection Angular Sanitization
CSRF Protection CSRF Tokens + SameSite Cookies
Authentication JWT / OAuth / OIDC
Authorization Roles & Policies
Secure APIs HTTPS
Route Protection Route Guards
HTTP Security Interceptors
Browser Protection CSP + Trusted Types
Backend Validation Always Required
Enterprise Security OWASP Best Practices

Summary

Angular includes strong built-in security features such as template sanitization, secure data binding, and integration with browser protections like Content Security Policy and Trusted Types. However, building a secure application requires more than framework features alone. Combining Angular security practices with HTTPS, robust authentication, server-side authorization, secure token handling, and OWASP recommendations results in a secure, enterprise-ready application.

Key Takeaways

  • ✅ Angular automatically protects against many XSS scenarios through sanitization.
  • ✅ Use template binding instead of direct DOM manipulation.
  • ✅ Protect against CSRF using backend-issued tokens and secure cookies.
  • ✅ Authentication identifies users; authorization controls access.
  • ✅ Use HTTP Interceptors for authentication headers and common HTTP logic.
  • ✅ Route Guards improve navigation security but do not secure backend APIs.
  • ✅ Enable CSP and Trusted Types for stronger browser security.
  • ✅ Always use HTTPS in production.
  • ✅ Validate and authorize requests on the server.
  • ✅ Angular security is one of the most common enterprise interview topics.

Next Article

➡️ 104-Angular-Best-Practices-QA.md