Backend interview prep

Start

Angular API Security

Learn Angular API Security with JWT Authentication, OAuth 2.0, HTTPS, XSS, CSRF, CORS, HTTP Interceptors, secure storage, enterprise architecture, best practices, and interview questions.

API Security is one of the most critical aspects of enterprise Angular applications.

Even if an application has an excellent user interface, insecure APIs can expose:

  • Customer Information
  • Banking Data
  • Healthcare Records
  • Payment Information
  • Authentication Tokens
  • Business Secrets

Angular applications communicate with backend APIs using HttpClient, but the responsibility for securing communication is shared between the frontend and backend.

API Security is one of the most frequently asked Angular interview topics.

Table of Contents

  • What is API Security?
  • Why API Security Matters
  • API Security Architecture
  • HTTPS
  • Authentication
  • Authorization
  • JWT Authentication
  • OAuth 2.0 & OpenID Connect
  • Secure Token Storage
  • HTTP Interceptors
  • CORS
  • XSS Protection
  • CSRF Protection
  • Input Validation
  • Enterprise Banking Example
  • Performance Best Practices
  • Common Mistakes
  • Top 10 Interview Questions
  • Summary

What is API Security?

API Security is the practice of protecting APIs from unauthorized access, data leaks, malicious attacks, and misuse.

Security goals include:

  • Confidentiality
  • Integrity
  • Availability
  • Authentication
  • Authorization
  • Auditability

API Security Architecture

flowchart TD

User

User --> AngularApp

AngularApp --> HTTPS

HTTPS --> Authentication

Authentication --> Authorization

Authorization --> API

API --> BusinessLogic

BusinessLogic --> Database

Database --> Response

Response --> AngularApp

Why API Security Matters

Without API Security

  • Data theft
  • Identity theft
  • Unauthorized access
  • Financial fraud
  • API abuse
  • Compliance violations

With Proper Security

  • Protected customer data
  • Secure authentication
  • Safe communication
  • Better compliance
  • Enterprise-grade protection

HTTPS

Always communicate using HTTPS.

https://api.company.com

Never use

http://api.company.com

HTTPS provides:

  • Encryption
  • Integrity
  • Server authentication

Benefits

  • Prevents packet sniffing
  • Prevents man-in-the-middle attacks
  • Protects login credentials
  • Protects API requests

HTTPS Architecture

flowchart LR

Angular

Angular --> HTTPS

HTTPS --> SecureAPI

SecureAPI --> Database

Authentication vs Authorization

Authentication Authorization
Who are you? What are you allowed to do?
Login Access Control
Identity Verification Permission Verification
JWT Roles & Permissions

Example

User logs in.

↓

Receives JWT.

↓

Requests Account Details.

↓

Backend checks permissions.

↓

Returns response.

JWT Authentication

JWT (JSON Web Token) is commonly used to authenticate API requests.

Flow

Login

↓

JWT Token

↓

Store Token

↓

Attach Token

↓

API Request

↓

Backend Validation

Authorization Header

Authorization:
Bearer eyJhbGci...

Important: JWT validation always occurs on the backend. The frontend simply sends the token with requests.

JWT Architecture

flowchart TD

User

User --> Login

Login --> AuthenticationServer

AuthenticationServer --> JWT

JWT --> Angular

Angular --> API

API --> ValidateJWT

ValidateJWT --> Response

OAuth 2.0 and OpenID Connect

Many enterprise applications use OAuth 2.0 for authorization and OpenID Connect (OIDC) for user authentication.

Common identity providers include:

  • Microsoft Entra ID (Azure AD)
  • Google Identity
  • Okta
  • Auth0
  • Keycloak

Typical Flow

Angular

↓

Identity Provider

↓

Access Token

↓

API

↓

Response

Benefits

  • Single Sign-On (SSO)
  • Centralized Identity Management
  • Secure Delegated Access

Secure Token Storage

Avoid storing sensitive tokens where they are easily accessible to malicious scripts.

Common approaches

Storage Recommendation
In-memory Excellent for short-lived access tokens
Secure, HttpOnly cookies Preferred when supported by the backend
localStorage Use cautiously and understand XSS risks
sessionStorage Better than long-term persistence but still accessible to JavaScript

For high-security applications, many architectures prefer HttpOnly cookies or in-memory storage combined with secure refresh-token flows.

HTTP Interceptors

Angular uses HTTP Interceptors to attach authentication headers automatically.

export const authInterceptor:

HttpInterceptorFn = (

req,

next

)=>{

const token=

localStorage.getItem(

'token'

);

const authReq=

req.clone({

setHeaders:{

Authorization:

`Bearer ${token}`

}

});

return next(authReq);

};

Benefits

  • Centralized authentication
  • Cleaner services
  • Reusable code
  • Consistent security

Interceptor Architecture

flowchart LR

Component

Component --> HttpClient

HttpClient --> AuthInterceptor

AuthInterceptor --> RESTAPI

CORS (Cross-Origin Resource Sharing)

CORS controls which origins are allowed to access an API.

Example

Angular

https://app.company.com

↓

API

https://api.company.com

The backend returns headers such as:

Access-Control-Allow-Origin:
https://app.company.com

CORS is enforced by browsers and must be configured on the server. It is not a replacement for authentication or authorization.

CORS Architecture

flowchart TD

Angular

Angular --> Browser

Browser --> CORS

CORS --> API

Cross-Site Scripting (XSS)

XSS occurs when malicious JavaScript is injected into a web page.

Example

<script>

stealCookies()

</script>

Angular helps mitigate XSS by escaping template values by default.

Best Practices

  • Never bypass Angular sanitization without a strong reason.
  • Validate and sanitize user input.
  • Use a strong Content Security Policy (CSP).
  • Avoid using innerHTML with untrusted content.

XSS Protection Architecture

flowchart LR

UserInput

UserInput --> AngularSanitization

AngularSanitization --> SafeHTML

SafeHTML --> Browser

Cross-Site Request Forgery (CSRF)

CSRF tricks a user's browser into sending unintended authenticated requests.

Typical defenses include:

  • Anti-CSRF Tokens
  • SameSite Cookies
  • Origin Validation

Angular provides built-in support for sending XSRF tokens with same-origin requests when the backend uses the expected cookie and header names.

CSRF Architecture

flowchart TD

User

User --> Browser

Browser --> XSRFToken

XSRFToken --> API

API --> Validation

Input Validation

Never trust client-side validation alone.

Validation should occur:

  • In Angular
  • On the API
  • At the database level when appropriate

Validate:

  • Required fields
  • Data types
  • Length
  • Allowed values
  • File types
  • File sizes

Security Layers

flowchart TD

User

User --> ClientValidation

ClientValidation --> HTTPS

HTTPS --> Authentication

Authentication --> Authorization

Authorization --> InputValidation

InputValidation --> Database

Rate Limiting

APIs should limit excessive requests to reduce abuse and denial-of-service risks.

Example protections

  • Requests per minute
  • Requests per IP
  • Requests per API key
  • Requests per authenticated user

HTTP Status

429 Too Many Requests

Enterprise Banking Example

Internet Banking

Security Features

  • HTTPS
  • JWT Authentication
  • OAuth 2.0
  • Multi-Factor Authentication
  • HTTP Interceptors
  • Role-Based Access Control
  • Audit Logging
  • Rate Limiting
  • Fraud Detection

Architecture

flowchart TD
    A["Customer"]
    B["Angular Application"]
    C["Authentication Interceptor"]
    D["API Gateway"]
    E["Authentication Service"]
    F["Banking API"]
    G["Core Banking System"]
    H["Database"]
    I["Response"]

    A --> B
    B --> C
    C --> D
    D --> E
    E --> F
    F --> G
    G --> H
    H --> I

Benefits

  • Secure communication
  • Strong authentication
  • Controlled authorization
  • Regulatory compliance
  • Enterprise-grade security

API Request Security Flow

sequenceDiagram

participant User

participant Angular

participant Interceptor

participant API

participant Database

User->>Angular: Login

Angular->>API: Authenticate

API-->>Angular: JWT

Angular->>Interceptor: API Request

Interceptor->>API: Authorization Header

API->>Database: Authorized Request

Database-->>API: Data

API-->>Angular: Secure Response

Performance Best Practices

Practice Benefit
Always use HTTPS Encrypted communication
Use short-lived access tokens Reduced exposure
Rotate refresh tokens Better security
Validate JWT on the server Prevent unauthorized access
Use HTTP Interceptors Centralized authentication
Apply rate limiting Prevent abuse
Enable CSP Reduce XSS risk
Validate input on the server Better security

Common Mistakes

Using HTTP Instead of HTTPS

Never send authentication credentials over HTTP.

Storing Tokens Insecurely

Avoid exposing long-lived sensitive tokens unnecessarily.

Choose storage based on your application's threat model.

Trusting Client Validation

Always validate data on the backend.

Client validation is for user experience—not security.

Disabling CORS Protection

Do not allow:

Access-Control-Allow-Origin:
*

for authenticated APIs unless there is a carefully evaluated business need and appropriate security controls.

Exposing Sensitive Information

Never expose:

  • Passwords
  • Secrets
  • API Keys
  • Internal Stack Traces
  • Database Errors

Best Practices

  • Always use HTTPS.
  • Use JWT or OAuth 2.0 where appropriate.
  • Validate tokens on the backend.
  • Use HTTP Interceptors.
  • Configure CORS correctly.
  • Protect against XSS and CSRF.
  • Validate all inputs on the server.
  • Apply rate limiting.
  • Log security events.
  • Keep Angular and dependencies updated.

Advantages

Feature Benefit
HTTPS Secure communication
JWT Stateless authentication
OAuth 2.0 Enterprise identity
Interceptors Centralized authentication
XSS Protection Safer UI
CSRF Protection Safer state-changing requests
Rate Limiting Prevent abuse
Enterprise Ready Production-grade security

Top 10 Angular API Security Interview Questions

1. What is API Security?

Answer

API Security protects backend APIs from unauthorized access, attacks, and data leaks through authentication, authorization, encryption, and validation.

2. Why is HTTPS important?

Answer

HTTPS encrypts data exchanged between the client and server, protecting it from interception and tampering.

3. What is JWT?

Answer

JWT (JSON Web Token) is a signed token commonly used for stateless authentication between clients and servers.

4. What is the difference between Authentication and Authorization?

Answer

Authentication verifies a user's identity, while authorization determines what that authenticated user is allowed to access.

5. Why use HTTP Interceptors?

Answer

HTTP Interceptors automatically attach authentication headers and centralize request processing.

6. What is CORS?

Answer

Cross-Origin Resource Sharing (CORS) is a browser security mechanism that controls whether one origin can access resources from another origin.

7. How does Angular help prevent XSS?

Answer

Angular automatically escapes template values and sanitizes potentially dangerous HTML contexts. Developers should avoid bypassing these protections unless absolutely necessary.

8. What is CSRF?

Answer

Cross-Site Request Forgery (CSRF) is an attack that tricks a user's browser into sending unintended authenticated requests. Anti-CSRF tokens and SameSite cookies are common defenses.

9. Where should JWT validation occur?

Answer

JWT validation must occur on the backend before protected resources are accessed.

10. What are API Security best practices?

Answer

  • Use HTTPS.
  • Validate JWTs on the server.
  • Use HTTP Interceptors.
  • Configure CORS correctly.
  • Protect against XSS and CSRF.
  • Validate server-side input.
  • Apply rate limiting.
  • Protect sensitive information.

Interview Cheat Sheet

Topic Remember
Secure Protocol HTTPS
Authentication JWT / OAuth 2.0
Authorization Header Bearer Token
Token Validation Backend
HTTP Interceptors Attach tokens
CORS Cross-origin policy
XSS Angular sanitization
CSRF XSRF tokens + SameSite
Rate Limiting HTTP 429
Best Practice Never trust the client

Summary

Angular API Security combines secure communication, authentication, authorization, input validation, and browser security mechanisms to protect enterprise applications. By using HTTPS, JWT, OAuth 2.0, HTTP Interceptors, CORS, XSS protection, CSRF defenses, and proper backend validation, developers can build secure, scalable, and production-ready applications. Security should always be implemented as a layered strategy rather than relying on a single protection mechanism.

Key Takeaways

  • ✔ Always use HTTPS for API communication.
  • ✔ JWT provides stateless authentication.
  • ✔ Validate JWTs on the backend.
  • ✔ Use HTTP Interceptors for authentication headers.
  • ✔ Configure CORS on the server.
  • ✔ Angular helps mitigate XSS through sanitization.
  • ✔ Protect state-changing requests against CSRF.
  • ✔ Never rely solely on client-side validation.
  • ✔ Apply rate limiting and audit logging.
  • ✔ API Security is one of the most important Angular enterprise interview topics.

Next Article

➡️ 70-Environment-Configuration-QA.md