how to implment csrf protection in angular and .net

Question

Deepika Sawant · Answer

To implement CSRF protection in Angular and .NET (ASP.NET Core), use the anti-forgery token mechanism on the server and configure Angular to send the token with each request. This ensures that only trusted clients can perform authenticated actions. On the .NET (ASP.NET Core) Backend ASP.NET Core provides built-in CSRF protection via the Antiforgery middleware . 1. Enable Antiforgery Services In Startup.cs or Program.cs (depending on your project style): builder.Services.AddControllersWithViews() .AddRazorRuntimeCompilation(); builder.Services.AddAntiforgery(options => { options.HeaderName = "X-XSRF-TOKEN"; // Angular default }); 2. Send the CSRF Token to the Client In your controller or middleware, expose the token via a cookie: public class AntiforgeryController : Controller { private readonly IAntiforgery _antiforgery; public AntiforgeryController(IAntiforgery antiforgery) { _antiforgery = antiforgery; } [HttpGet("/api/antiforgery/token")] public IActionResult GetToken() { var tokens = _antiforgery.GetAndStoreTokens(HttpContext); Response.Cookies.Append("XSRF-TOKEN", tokens.RequestToken!, new CookieOptions { HttpOnly = false }); return Ok(); } } Call this endpoint from Angular on app load or login. 3. Validate the Token Use [ValidateAntiForgeryToken] on your POST/PUT/DELETE actions: [HttpPost] [ValidateAntiForgeryToken] public IActionResult UpdateProfile(UserProfile profile) { // Your logic here } On the Angular Frontend Angular has built-in support for CSRF via its HttpClientXsrfModule . 1. Enable CSRF Support In app.module.ts : import { HttpClientXsrfModule } from '@angular/common/http'; @NgModule({ imports: [ HttpClientXsrfModule.withOptions({ cookieName: 'XSRF-TOKEN', headerName: 'X-XSRF-TOKEN' }) ] }) export class AppModule {} This automatically reads the XSRF-TOKEN cookie and adds it to the X-XSRF-TOKEN header for all outgoing requests. 2. Fetch the Token on App Init Call the backend token endpoint when the app starts: constructor(private http: HttpClient) {} ngOnInit() { this.http.get('/api/antiforgery/token').subscribe(); } Best Practices Use HTTPS to prevent token leakage. Set SameSite=Strict or Lax on cookies to reduce CSRF risk. Avoid storing tokens in localStorage —prefer cookies with HttpOnly=false for Angular to access them. Combine with authentication (e.g., JWT or cookie-based auth) for full protection. Microsoft Docs: CSRF in ASP.NET Core C# Corner: Preventing CSRF in ASP.NET Core + Angular Angular CSRF Guide

how to implment csrf protection in angular and .net

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (1)