Angular Security

Learning Objectives

By the end of this lesson, you will understand:

• Why Angular Security is important.
• OWASP Top 10 overview.
• Angular Security Architecture.
• Authentication vs Authorization.
• JWT Authentication.
• OAuth 2.0 & OpenID Connect (OIDC).
• Role-Based Access Control (RBAC).
• Route Guards.
• Functional Route Guards.
• CanActivate, CanDeactivate, CanMatch.
• HTTP Security Headers.
• HTTPS.
• Cross-Site Scripting (XSS).
• Cross-Site Request Forgery (CSRF/XSRF).
• Content Security Policy (CSP).
• CORS.
• DOM Sanitization.
• DomSanitizer.
• Secure Local Storage practices.
• Refresh Token Security.
• Secure API Design.
• Secrets Management.
• Angular Security Best Practices.
• Enterprise Security Architecture.
• Common Vulnerabilities.
• Advanced Interview Questions.

Introduction

Imagine TechLearningPro has:

• 2 Million Users
• Paid Courses
• Payment Gateway
• AI Tutor
• Certificates
• Admin Dashboard

If security is weak:

Attacker
↓
Steals JWT
↓
Reads User Data
↓
Downloads Premium Courses
↓
Deletes Records

A single security flaw can compromise the entire application.

Security must be considered from the very beginning.

What is Application Security?

Application Security protects:

• Users
• Data
• Payments
• APIs
• Sessions
• Business Logic

Architecture

User
↓
Angular App
↓
Secure API
↓
Database

Every layer must be secured.

Authentication vs Authorization

Authentication

Who are you?

Example:

Login
↓
Username
Password
↓
JWT Token

Authorization

What are you allowed to do?

Example:

Student
↓
View Course
×
Delete Course

Admin:

Admin
↓
View
Edit
Delete

Enterprise Security Architecture

Browser
↓
HTTPS
↓
Angular
↓
JWT
↓
API Gateway
↓
Microservices
↓
Database

Every request is validated.

OWASP Top Risks

The most common web security risks include:

• Broken Access Control
• Cryptographic Failures
• Injection
• Insecure Design
• Security Misconfiguration
• Vulnerable Components
• Authentication Failures
• Software Integrity Failures
• Logging & Monitoring Failures
• Server-Side Request Forgery (SSRF)

These are industry-standard security concerns that every enterprise developer should understand.

JWT Authentication

Login Flow

User
↓
Login
↓
Backend
↓
JWT
↓
Angular Stores Token
↓
API Requests
↓
Authorization Header

JWT Structure

Header
↓
Payload
↓
Signature

The signature helps verify that the token has not been tampered with.

OAuth 2.0

Many enterprise applications allow login with:

• Google
• Microsoft
• GitHub
• LinkedIn

Architecture

Angular
↓
OAuth Provider
↓
Access Token
↓
Backend

OpenID Connect (OIDC)

OIDC extends OAuth 2.0 by adding identity information.

Common enterprise login systems use OAuth 2.0 + OIDC together.

Role-Based Access Control (RBAC)

Example

Guest
↓
Read
----------------
Student
↓
Read
Download
----------------
Instructor
↓
Read
Create
Update
----------------
Admin
↓
Everything

Angular should hide UI appropriately, but the backend must also enforce authorization.

Route Guards

Protect navigation.

Example

Student
↓
/admin
↓
Blocked

Angular provides:

• CanActivate
• CanDeactivate
• CanMatch

Modern Angular also supports functional guards.

CanActivate

Controls access before entering a route.

Architecture

User
↓
Guard
↓
Allowed?
↓
Route

CanDeactivate

Prevents accidental navigation.

Example

Form
↓
Unsaved Changes
↓
Leave?
↓
Yes / No

CanMatch

Determines whether a route should match based on conditions such as permissions or feature flags.

Useful for lazy-loaded features.

Functional Guards

Modern Angular encourages functional guards using the inject() API.

Benefits:

• Less boilerplate
• Better tree-shaking
• Cleaner code

HTTPS

Never deploy production Angular applications without HTTPS.

Architecture

Browser
↓
Encrypted
↓
Server

HTTPS protects data in transit.

Cross-Site Scripting (XSS)

Example:

Attacker submits malicious HTML or JavaScript.

Angular automatically escapes template interpolations such as:

{{ userInput }}

This significantly reduces XSS risk.

However, developers can still introduce vulnerabilities by bypassing Angular's protections.

Dangerous Example

Avoid inserting raw HTML from untrusted sources directly into the DOM.

Always validate and sanitize user-generated content.

DOM Sanitization

Angular sanitizes:

• HTML
• URLs
• Styles
• Resource URLs (with stricter rules)

This protects users from many common attacks.

DomSanitizer

Angular provides DomSanitizer for advanced scenarios.

Use it only when you fully trust the content.

Avoid bypassing security unless absolutely necessary.

Cross-Site Request Forgery (CSRF/XSRF)

Attack:

User Logged In
↓
Malicious Website
↓
Hidden Request
↓
Bank Transfer

Angular provides built-in support for XSRF protection when used with compatible server-side implementations.

Content Security Policy (CSP)

CSP restricts:

• Inline scripts
• Unknown JavaScript
• Untrusted resources

Architecture

Browser
↓
CSP Policy
↓
Allowed Resources Only

CSP reduces XSS risk.

CORS

CORS controls which origins may access your backend.

Example

Angular
↓
https://api.techlearningpro.com
↓
Allowed

Unknown origins are rejected according to server configuration.

Secure Storage

Avoid storing sensitive information carelessly.

Good practices:

• Prefer secure, HttpOnly cookies for sensitive session tokens when appropriate.
• Minimize sensitive data stored in browser storage.
• Never store passwords.

Refresh Token Security

Recommended flow:

Short-lived Access Token
↓
Expires
↓
Refresh Token
↓
New Access Token

Refresh tokens should be protected carefully by the backend.

HTTP Security Headers

Important headers include:

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

These are configured primarily on the server.

Secrets Management

Never hardcode:

• API Keys
• Passwords
• Database Credentials

Angular applications run in the browser, so anything bundled into the client can potentially be inspected.

Environment Files

Environment files are useful for configuration but must not contain secrets.

Example:

API Base URL
Feature Flags
Application Name

Not:

Database Password
Private API Secret

Secure API Design

Every request should verify:

• Authentication
• Authorization
• Input Validation

Never rely only on frontend checks.

Enterprise Security Architecture Overview

Browser
↓
HTTPS
↓
Angular
↓
Route Guards
↓
JWT
↓
HTTP Interceptor
↓
API Gateway
↓
Authentication Service
↓
Business Service
↓
Database

TechLearningPro Security

Student Login
↓
JWT
↓
Auth Interceptor
↓
HTTPS
↓
Backend
↓
Role Validation
↓
Course Access

Security Best Practices

Always:

• Use HTTPS.
• Validate on the backend.
• Keep dependencies updated.
• Sanitize untrusted content.
• Apply the principle of least privilege.
• Use strong authentication.
• Protect sensitive endpoints.

Avoid:

• Hardcoded secrets.
• Trusting frontend validation alone.
• Exposing sensitive information in logs.
• Granting excessive permissions.

Common Mistakes

Trusting Frontend Validation

Always validate again on the server.

Storing Passwords

Never store user passwords in Angular.

Ignoring Authorization

Hidden buttons are not security.

The backend must enforce permissions.

Disabling Angular Sanitization

Only bypass sanitization when absolutely necessary and when content is fully trusted.

Exposing Secrets

Remember:

Angular code is downloaded by the browser.

Treat everything in the frontend as publicly visible.

Advanced interview questions

Summary

Enterprise Angular security is built from multiple layers working together.

User
   │
   ▼
Angular Application
   │
   ▼
Route Guards
   │
   ▼
HTTP Interceptors
   │
   ▼
HTTPS
   │
   ▼
API Gateway
   │
   ▼
Authentication
   │
   ▼
Authorization
   │
   ▼
Business Logic
   │
   ▼
Database

For TechLearningPro, security should include:

• Secure login with JWT or OAuth/OIDC.
• Role-based access control.
• Route Guards.
• HTTPS everywhere.
• Secure HTTP Interceptors.
• Backend authorization checks.
• XSS and CSRF protection.
• CSP headers.
• Secure dependency management.

The core principle: The frontend can improve security, but it cannot enforce it alone. Every critical business rule, permission, and validation must ultimately be verified by the backend.

Next Lesson

Angular SSR & Hydration — You'll learn:

• Server-Side Rendering (SSR)
• Hydration
• Client-Side Rendering (CSR)
• Static Site Generation (SSG)
• Incremental Static Regeneration (ISR)
• SEO optimization
• Performance optimization
• Streaming SSR
• Partial Hydration concepts
• Server vs Browser execution
• TransferState
• Server Routes
• Caching strategies
• Deployment architectures
• Enterprise SSR best practices
• Advanced interview questions