Secure Coding Practices in Angular

Secure Coding Practices in Angular

1. Prevent Cross-Site Scripting (XSS)

Angular auto-escapes content in {{ }}, but avoid using untrusted data with [innerHTML].

<!-- Safe -->

<p>{{ userInput }}</p>

 

<!-- Risky: must sanitize -->

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

constructor(private sanitizer: DomSanitizer) {}

this.sanitizedHtml = this.sanitizer.bypassSecurityTrustHtml(userInput);

 

2. CSRF Protection (for cookie-based auth)

If the API uses cookies for auth, Angular must:

  • Send requests with withCredentials: true
  • Include the anti-forgery token in headers

this.http.post(url, data, { withCredentials: true });

 

3. Store and Protect Tokens

Avoid storing tokens in localStorage. Prefer HttpOnly cookies, or use in-memory storage with auto-refresh logic.

 

4. Route Guards for Authorization

Use route guards to protect client-side routes based on user roles.

canActivate(): boolean {

  return this.authService.getUserRole() === 'Admin';

}

 

5. Handle Token Expiry with Interceptors

Automatically refresh JWT tokens when expired using HTTP interceptors.

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

  if (this.authService.isTokenExpired()) {

    return this.authService.refreshToken().pipe(

      switchMap(() => next.handle(this.addAuthHeader(req)))

    );

  }

  return next.handle(this.addAuthHeader(req));

}

 

6. Use HTTPS

Serve Angular applications over HTTPS in production environments. Ensure API calls are made over https://.

 

Summary

Angular (Frontend)

  • Escape and sanitize output
  • Use route guards and token interceptors
  • Avoid exposing tokens in localStorage
  • Serve over HTTPS
  • Handle CSRF if cookies are used

Comments

Post a Comment

Popular posts from this blog

Factory Method Design Pattern in .NET — Real-Time Finance Example

The Factory Method design pattern is a classic solution for a common software engineering challenge: how to create objects without tightly coupling the client code to their concrete types. Instead of instantiating classes directly using new, Factory Method defers object creation to subclasses or dedicated factory methods. In this blog post, we'll explore the Factory Method pattern in C# with a real-world banking transaction example and also discuss its benefits, drawbacks, and best practices.   💡 What Is the Factory Method Pattern? The Factory Method pattern provides an interface for creating objects in a superclass but allows subclasses or factory methods to alter the type of objects that will be created . This promotes: Loose coupling Polymorphism Improved testability and scalability   🎯 Purpose The key goal of Factory Method is to encapsulate object creation logic , so your business logic doesn’t depend on concrete classes. This becomes especially valuable...
Read more

Logging in .NET Core: Built-in Logging vs Serilog with Full Implementation Guide

Logging in .NET Core: Built-in Logging vs Serilog with Full Implementation Guide Logging is an essential aspect of application development. In .NET Core and beyond (.NET 5/6/7/8), Microsoft provides a built-in logging framework that is simple to use. However, when applications grow and logging needs become more advanced, third-party solutions like Serilog shine. In this blog, we will explore built-in logging, Serilog, their differences, and how to implement both in your .NET Core application.   1. .NET Core Built-in Logging Overview .NET Core uses Microsoft.Extensions.Logging as a base logging interface. This logging abstraction allows logging to multiple destinations, such as: Console Debug EventSource EventLog (Windows only) Azure Application Insights (via extensions) Files (through third-party integrations) Pros: Simple to use Built-in Fully integrated with Dependency Injection (DI) Cons: Limited formatting op...
Read more

Implementing Single Sign-On (SSO) in .NET Core and Angular

Implementing Single Sign-On (SSO) in .NET Core and Angular Introduction Single Sign-On (SSO) is a powerful authentication mechanism that enhances user experience and security by allowing users to log in once and access multiple applications without re-entering credentials. In this blog, we will walk through the implementation of SSO using OAuth 2.0 and OpenID Connect (OIDC) with IdentityServer4 in .NET Core and Angular. Why Use SSO? Improved User Experience : Users authenticate once and access multiple services without repeated logins. Centralized Authentication : Easier user management and security enforcement. Better Security : Reduces password fatigue and encourages strong authentication policies. Scalability : Works well across multiple applications, making it ideal for enterprise solutions. Step 1: Setting Up IdentityServer4 in .NET Core IdentityServer4 is an open-source framework that enables authentication and authorization using OpenID Connect and OAuth2. 1.1 Cr...
Read more