How to apply CSRF defense for an Axios requests on a ASP .NET CORE application

Question

How to apply CSRF defense for an Axios requests on a ASP .NET CORE application

Sruthi Vishnubhatla 0

I am working on applying CSRF defense on my application, I have applied the defense on Ajax requests but when it comes to Axios it doesn't seem to be working as expected.

previously i was working on CSRF Defense for Ajax requests globally on my application and i added the following: In program.cs


options.Filters.Add(new AutoValidateAntiforgeryTokenAt

tribute());

added this to the AddControllersWithViews service and this service

builder.Services.AddAntiforgery(options =>
{
    options.HeaderName = "X-XSRF-TOKEN";
    options.Cookie.Name = "XSRF-TOKEN";
    options.Cookie.HttpOnly = false;
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
});

and created a new file and generating csrf token

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery antiforgery
<meta name="csrf-token" content="@antiforgery.GetAndStoreTokens(Context).RequestToken"/>

and added headers to vulnerable ajax calls

<script>
   $(function () {
        // Gets the CSRF token value in the page header
       var token = $("meta\[name='csrf-token']").attr("content");
        // Sets default configuration for all jQuery AJAX requests
       $.ajaxSetup({
            // If the HTTP method is NOT safe the CSRF token os added to the request 
           beforeSend: function (xhr, settings) {
               if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)) {
                   xhr.setRequestHeader("X-XSRF-TOKEN", token);
               }
           }
       });
   });
</script>

and i called these globally in the layout. But when i comes to Axiox calls, I am unable to go through with this code, it keeps giving me a "Bad Request" but with a csrf token and a cookie generated. What might I be missing in the Axios configuration to resolve the 'Bad Request' issue?

Sruthi Vishnubhatla 0

document.addEventListener('DOMContentLoaded', () => {
  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
  if (csrfToken) {
  axios.interceptors.request.use(config => {
  // Redundant but extra safe
  if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(config.method)) {
  config.headers['X-XSRF-TOKEN'] = csrfToken;
  }
  return config;
  }, error => Promise.reject(error));
  } else {
  console.warn("CSRF token not found in meta tag");
  }
});

}); This keeps giving me a 400 bad request

Anonymous

2025-09-16T10:11:54.0233333+00:00

Hi Sruthi Vishnubhatla , if you still have any questions, I’d be happy to help.
Otherwise, feel free to interact with the system so this case can be closed.

1 answer

Your answer

Sruthi Vishnubhatla 0 Reputation points

2025-08-25T04:28:56.5366667+00:00

document.addEventListener('DOMContentLoaded', () => { const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'); if (csrfToken) { axios.interceptors.request.use(config => { // Redundant but extra safe if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(config.method)) { config.headers['X-XSRF-TOKEN'] = csrfToken; } return config; }, error => Promise.reject(error)); } else { console.warn("CSRF token not found in meta tag"); } });

}); This keeps giving me a 400 bad request
Anonymous

2025-09-16T10:11:54.0233333+00:00

Hi Sruthi Vishnubhatla , if you still have any questions, I’d be happy to help.
Otherwise, feel free to interact with the system so this case can be closed.

Answer 1

Anonymous

Hello Sruthi Vishnubhatla,

Looking at your setup, you have the CSRF defense configured correctly for the server side, but there are a couple of things that might be causing the 400 Bad Request with Axios specifically.

First, make sure your Axios interceptor is running before any requests are made. I notice you're using DOMContentLoaded, but if you have any Axios calls that run before this event fires, they won't have the CSRF token.

Also, check that your Axios requests are actually hitting the interceptor. You can add some debugging:

document.addEventListener('DOMContentLoaded', () => {
  const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
  console.log('CSRF Token found:', csrfToken); // Debug line
  if (csrfToken) {
    axios.interceptors.request.use(config => {
      console.log('Interceptor running for:', config.method, config.url); // Debug line
      if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(config.method)) {
        config.headers['X-XSRF-TOKEN'] = csrfToken;
        console.log('CSRF token added to headers'); // Debug line
      }
      return config;
    }, error => Promise.reject(error));
  } else {
    console.warn("CSRF token not found in meta tag");
  }
});

Another thing to verify, make sure your Axios requests are actually using the interceptor. If you're creating new Axios instances or using different configurations, they might not pick up the global interceptor.

Also, double-check that your server-side antiforgery configuration matches exactly what you're sending. The header name should be "X-XSRF-TOKEN" (which you have correct), and make sure the cookie name matches too.

If you're still getting 400 errors, can you check the browser's network tab to see what headers are actually being sent with the request? That might give me a clue about what's missing.

Hope this helps!

Sruthi Vishnubhatla 0 Reputation points

2025-08-25T10:37:31.6433333+00:00

I can see these in the

CONSOLE

CSRF Token found: CfDJ8HDVNuX4Xx......

Interceptor running for: post /For/SaveFormPreview

CSRF token added to headers.

NETWORK -> Request Header

Request URL

https://localhost:7061/Forms/SaveFormPreview

Request Method

POST

Status Code

400 Bad Request

Remote Address

Referrer Policy

strict-origin-when-cross-origin

x-xsrf-token

CfDJ8HDVNuX4XxhNuOhwaps4O2-T4tRbQFPn3RLJohGPViJekm3u29v1jikZyUAfiDeN2I4Xtg6NH3pZpHNpji_ye2iCWEXJbR3ipF_YaVgWmThvmGKJV4gn3xLjW7V5yo03Q_jpcpYxHgAElCtRcaZONUU
Anonymous

2025-08-25T11:05:31.3233333+00:00
Hello Sruthi Vishnubhatla! Thanks for sharing the console and network details, that helps narrow it down.

From what you posted, the interceptor is adding the header, but ASP.NET Core is still rejecting the request. Here are the specific things to fix/check that commonly cause a 400 with antiforgery in Axios:

Ensure the cookie is actually sent with the POST

Add this once, before any requests:

axios.defaults.withCredentials = true; axios.defaults.xsrfCookieName = 'XSRF-TOKEN'; axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN';

If you’re hitting a different subdomain/port or using CORS, the cookie won’t flow unless the server allows credentials and you enable them on the client.

Register the interceptor before any Axios call runs

Move the interceptor setup out of DOMContentLoaded if any code can fire early:

const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''; axios.defaults.withCredentials = true; axios.defaults.xsrfCookieName = 'XSRF-TOKEN'; axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN'; axios.interceptors.request.use(config => { if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(config.method || '')) { config.headers['X-XSRF-TOKEN'] = csrfToken; } return config; });

If you use axios.create(...), add the interceptor to that instance too.

Verify there’s no redirect before the POST

Your logs show “post /For/SaveFormPreview” but the network request is to /Forms/SaveFormPreview. If there’s a redirect/route mismatch, the antiforgery system can see a different endpoint than you intended and fail. Hit the final URL directly (no redirect) and confirm the header is present on that exact request.

Make sure token and cookie are from the same GET that rendered the page

Only call GetAndStoreTokens(Context) once per page render (e.g., in the main layout). If a later partial/view/API call regenerates the antiforgery cookie, the meta token you captured becomes invalid and you’ll get 400s.

Confirm HTTPS + cookie options

You’ve set Cookie.SecurePolicy = CookieSecurePolicy.Always; — good, but ensure the page and POST are both HTTPS.

Keep HttpOnly = false for the XSRF-TOKEN cookie so the client can read it (as you already have).

Server filter placement

Using options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute()); is correct for MVC actions. If this endpoint is an API controller or receives JSON, that’s fine — the header is supported — but ensure the action isn’t decorated with anything that disables antiforgery unintentionally or causes a preflight/redirect.

Quick isolation step

Temporarily add [IgnoreAntiforgeryToken] to SaveFormPreview. If the 400 disappears, the issue is antiforgery validation (cookie not flowing or token/cookie mismatch). If it persists, the 400 is likely coming from model binding/validation instead.

Add antiforgery logging to see the exact reason

Enable logs for Microsoft.AspNetCore.Antiforgery to get a precise failure message (missing cookie vs invalid token).

If you apply the three client changes (withCredentials + xsrf names + interceptor initialization order) and eliminate any redirect, the 400 usually goes away.

Hope this helps you get rid of the 400 quickly.
Anonymous

2025-08-28T10:31:45.5366667+00:00

Hello Sruthi Vishnubhatla,

Feel free to leave your question if you need any help!
Sruthi Vishnubhatla 0 Reputation points

2025-08-31T01:47:17.41+00:00
Hey Raymond, I don't understand why this is not working. For now i have separated the code Ajax and Axios requests into different files. Ajax works perfectly fine but there is an issue with Axios. this is how i am calling these files in the layout, At the head i am calling _CsrfTokenPartial.cshtml

<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Language" content="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"> <meta name="description" content="This is an example dashboard created using build-in elements and components."> @await Html.PartialAsync("_CsrfTokenPartial")   <meta name="msapplication-tap-highlight" content="no">

and inside the body _CsrfTokenPartial.csthml (for ajax requests) and csrf-defense.js (for Ajaax)

<script type="text/javascript" src="~/js/circle-progress.js"></script> <script type="text/javascript" src="~/js/demo.js"></script> <script type="text/javascript" src="~/js/scrollbar.js"></script> <script type="text/javascript" src="~/js/toastr.js"></script> <script type="text/javascript" src="~/js/treeview.js"></script> <script type="text/javascript" src="~/js/form-components/toggle-switch.js"></script> <script type="text/javascript" src="~/js/tables.js"></script> <script type="text/javascript" src="~/js/carousel-slider.js"></script> <script type="text/javascript" src="~/js/charts/chartjs.js"></script> <script type="text/javascript" src="~/js/app.js"></script> <script type="text/javascript" src="~/js/timezone.js"></script> <script type="text/javascript" src="~/js/menulogo.js"></script> <script type="text/javascript" src="~/vendors/block-ui/jquery.blockUI.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js" integrity="sha512-uMtXmF28A2Ab/JJO2t/vYhlaa/3ahUOgj1Zf27M5rOo8/+fcTUVH0/E0ll68njmjrLqOBjXM3V9NiPFL5ywWPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="~/js/jquery.multiselect.js" asp-append-version="true"></script> <script src="~/js/pagesize.js"></script> <script src="~/js/printqrcodelabels/printqrcodelabels.js"></script> <script src="~/js/pageloader.js"></script> <script src="~/js/encryptdecrypt.js"></script> <script type="text/javascript" src="~/js/jquery.datetimepicker.js" asp-append-version="true"></script> @await Html.PartialAsync("_CsrfScriptPartial")  <script src="~/js/csrf-defense.js"></script>

Now when i run the application and perform the action using axios is what the network tab in dev tool showing. In the REQUEST HEADER

Request URL

https://localhost:7070/Form/SaveFormPreview

Request Method

POST

Status Code

400 Bad Request

:authority

localhost:7070

:method

POST

:path

/Form/SaveFormPreview

:scheme

https

accept

application/json, text/plain, /

accept-encoding

gzip, deflate, br, zstd

accept-language

en-US,en;q=0.9

content-length

796

content-type

application/json

cookie

RememberMeState=true; XSRF-TOKEN=CfDJ8HDVNuX4XxhNuOhwaps4O2-puuIc_9nc2SQirHsxrWMNRujwGy5Ju2cl211zzKfggw0KGdxIxA6Gv1BIeoe_Yuwze2vn2cqvfXQFP4lwQrCfCT_zAlacMKC29EdBH6rSrM63O-Ol0ibsAEAGpjWWvOU; RememberMeEmail=malovathusupraja%40gmail.com; RememberMePassword=Logic%40123; .AspNetCore.Cookies=CfDJ8HDVNuX4XxhNuOhwaps4O29zoN95-ucJQB4lVxtGlCTDfmmopslP8Su6K3AqGB4FS3NS23xBVnQVs2Ml2vXklb26gImeeX3Z6oo-oHA2WF1tjsanb4nn8HlB2eAirIEDkD8wBuaXEWSZRYtP3FPRNrNBTNyUBQ9o1_pVOsc5Atql_1x4Owsn4tVvHbu7HYtU69Jtd1rKIaUZdxfr8UfCsFwQK3AJjMOuyfW3Y2e-lQfFY3930DqkBtWEL0AQbRCaTMKTQ3so9qqD5-uGakfUS93TaJxVQf1AXdcUu7WPR7eO03-pU26C-ugO2WzWaJa_fD9PgS-hV1Ln8CFGf5IZAxlKuSDGgq790WFgG-2uCMgkZf3mlzALlk6sGTpFA9w7EuonNEY948krlGCc_Z2ZAuIP8agj_nKSmMnIlmYorxdzEZKSZEVnprb5Rpp1Y_0tI44yolOU1Bj-1wDW0Wf4ql709w0DN4Lg5J_TbCOZE3xy6oRWxKkYPOWw1TW3iw8jtUQmFhmB_N4rncxzx8ijOXWVHYYiNUHAa8N1MFC3FLF9WkeQO94TPOR5GgYh4Dl3OKHvRbMXxAesSlp6JGCvqTiVQ2PA5faxMrVy7xz3rr96UPMLRsTxWUXn2vVnpueDgyBSa6VQRGD0JRb0seM88ZiSvVU8jaUmVEUkZqV8GIDyUZiNOrIQdAMFdcODpjWpGYOnWbEvrX0XIM97yshmHvy6bBj24Pc0t4c908YghFCQyBDKDcA2dohO8VVtXzbdmwC1YOt_iBvxViqYDIshdk2L_QRPLYINgPlwAHr00rrDUe8qIqCVA150sYisdStGNX4rvwtBE6Ej8t1dWdUplTXI54U0H4zDcR7nYyr50BKxXCLpk3-R1zVndAezkM-q31B4eZEMc1tcS524_M9jVN3qWa9OeSm5WQUN157QlML38-t4_ADaxVaC5iupcf_VyfGDO_xh0Y6Un76qWizvtKWhMyWTchH4YfLVxve-ryCQoUR1jnZJu7A3Suv-cZs6tLFlUirIBQEu5K5Vm21t5A4CaDIh1bqAaRSy5n71Dvdxn8VDA930d6NKMDZisFebecaEBob8ReyD4pII181C8fuXQ9IwcjWrlbErMserHcZZ0_mc3Wpt-LfuSfaidu1x3WXirZPdadcTlG13XogThZAXpDORYby-ZDQNfgtF8ZI3

origin

https://localhost:7070

priority

u=1, i

referer

https://localhost:7070/Form/Create/1c*7YXLAidc=?

sec-fetch-dest

empty

sec-fetch-mode

cors

sec-fetch-site

same-origin

x-xsrf-token

CfDJ8HDVNuX4XxhNuOhwaps4O2-puuIc_9nc2SQirHsxrWMNRujwGy5Ju2cl211zzKfggw0KGdxIxA6Gv1BIeoe_Yuwze2vn2cqvfXQFP4lwQrCfCT_zAlacMKC29EdBH6rSrM63O-Ol0ibsAEAGpjWWvOU

and in the COOKIES tab

XSRF-TOKENCfDJ8HDVNuX4XxhNuOhwaps4O2-puuIc_9nc2SQirHsxrWMNRujwGy5Ju2cl211zzKfggw0KGdxIxA6Gv1BIeoe_Yuwze2vn2cqvfXQFP4lwQrCfCT_zAlacMKC29EdBH6rSrM63O-Ol0ibsAEAGpjWWvOUlocalhost/Session165✓StrictMediumXSRF-TOKENCfDJ8HDVNuX4XxhNuOhwaps4O2-puuIc_9nc2SQirHsxrWMNRujwGy5Ju2cl211zzKfggw0KGdxIxA6Gv1BIeoe_Yuwze2vn2cqvfXQFP4lwQrCfCT_zAlacMKC29EdBH6rSrM63O-Ol0ibsAEAGpjWWvOUlocalhost/Session165✓StrictMedium
Anonymous

2025-09-03T07:03:05.2566667+00:00
Hi Sruthi Vishnubhatla! I can see you've made good progress by separating the Ajax and Axios code into different files, and it's great that Ajax is now working properly. However, you're still experiencing the 400 Bad Request issue with Axios requests.

Looking at your comment, I can see a few potential issues that might be causing the Axios CSRF defense to fail:

Issue 1: Missing Axios CSRF Configuration I notice you're calling _CsrfScriptPartial and csrf-defense.js, but I don't see where the Axios interceptor is being configured. The Axios library needs its own CSRF token handling since it doesn't automatically pick up the jQuery Ajax configuration.

Issue 2: Script Loading Order Your Axios library is loaded before the CSRF configuration scripts, which means the interceptor might not be set up properly when Axios requests are made.

Issue 3: Missing Axios Interceptor You need to explicitly configure Axios to include the CSRF token in its requests, similar to how you did it before.

Here's what I recommend adding to resolve the Axios CSRF issue:

Option 1: Add Axios CSRF configuration to your layout After your existing scripts, add this:

<script> document.addEventListener('DOMContentLoaded', () => { const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'); console.log('CSRF Token for Axios:', csrfToken); if (csrfToken) { axios.interceptors.request.use(config => { if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(config.method)) { config.headers['X-XSRF-TOKEN'] = csrfToken; console.log('Axios CSRF token added:', config.headers['X-XSRF-TOKEN']); } return config; }, error => Promise.reject(error)); } else { console.warn("CSRF token not found for Axios"); } }); </script>

Option 2: Create a separate Axios CSRF file Create a new file called axios-csrf.js and include it after your Axios library:

// axios-csrf.js document.addEventListener('DOMContentLoaded', () => { const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'); if (csrfToken) { axios.interceptors.request.use(config => { if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(config.method)) { config.headers['X-XSRF-TOKEN'] = csrfToken; } return config; }, error => Promise.reject(error)); } });

Then include it in your layout:

<script src="~/js/axios-csrf.js"></script>

Notes:

Make sure the Axios CSRF configuration runs after Axios is loaded

Verify the CSRF token is being retrieved from the meta tag

Ensure the interceptor is set up before any Axios requests are made

Check the browser console for any error messages

The fact that both the cookie and header are being sent correctly suggests the token is available, so the issue is likely in the Axios interceptor configuration or timing.

Try implementing one of these solutions and let me know if you're still getting the 400 errors. Also, check the browser console for any JavaScript errors that might be preventing the interceptor from working properly.
Anonymous

2025-09-08T10:45:13.9166667+00:00

Hello Sruthi Vishnubhatla ,

Has your problem been solved yet?
Sruthi Vishnubhatla 0 Reputation points

2025-09-09T03:44:43.3433333+00:00

No, there might be some configuration that is blocking this. I am unable to figure that out
Anonymous

2025-09-09T06:12:14.3+00:00
Hi Sruthi Vishnubhatla ,

I've been thinking about your CSRF issue and I think I might have spotted the problem. Looking at your debugging output, I can see that:

Your interceptor is running correctly

The CSRF token is being found and added to headers

You're getting a 400 Bad Request despite having the token

The issue might be that your Axios interceptor is using the token from the meta tag, but ASP.NET Core is expecting the header token to match the cookie token exactly.

Instead of using the meta tag token, let's get the token directly from the cookie:

document.addEventListener('DOMContentLoaded', () => { const getCookie = (name) => { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); if (parts.length === 2) return parts.pop().split(';').shift(); }; const csrfToken = getCookie('XSRF-TOKEN'); console.log('Cookie token:', csrfToken); if (csrfToken) { axios.interceptors.request.use(config => { if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(config.method)) { config.headers['X-XSRF-TOKEN'] = csrfToken; console.log('Using cookie token for:', config.url); } return config; }, error => Promise.reject(error)); } });

Also, double-check your server-side setup:

Make sure your controller action has the [ValidateAntiForgeryToken] attribute:

[HttpPost] [ValidateAntiForgeryToken] public async Task<IActionResult> SaveFormPreview(YourModel model) { // Your action logic }

Quick test:

Try this simple test to see if it's working:

axios.post('/Forms/SaveFormPreview', { test: 'data' }) .then(response => console.log('Success!')) .catch(error => console.error('Error:', error.response));

The fact that your Ajax works means your server configuration is correct, so this is definitely an Axios-specific issue. The cookie approach should solve it since that's what ASP.NET Core is actually validating against.

Let me know what happens when you try this!
Anonymous

2025-09-12T10:47:44.8366667+00:00

Hello Sruthi Vishnubhatla ,

Has your problem been solved yet?
Sruthi Vishnubhatla 0 Reputation points

2025-10-06T11:35:02.7366667+00:00

It still shows a bad request sir.
Anonymous

2025-10-07T09:05:42.19+00:00
Hi Sruthi Vishnubhatla ,

Lets try to check where it breaks

Add a temporary test endpoint purely for debugging (no business logic, no redirection, minimal filters) like this:

[HttpPost] [ValidateAntiForgeryToken] [Route("Api/TestCsrfProbe")] public IActionResult TestCsrfProbe() { return Ok(new { Received = true }); }

Then from the client, issue:

axios.post('/Api/TestCsrfProbe', {}, { withCredentials: true, headers: { 'X-XSRF-TOKEN': <your extracted token> } }) .then(r => console.log('Probe success', r)) .catch(e => console.error('Probe failed', e.response || e));

Run that in the same script context (after your interceptor setup). The idea:

If the probe succeeds, then you know the Csrf pairing is working in isolation, the issue lies in the SaveFormPreview route (its filters, pipeline, or redirection)

If the probe also gives 400, then even the simplest path is failing, strongly pointing to token vs. cookie mismatch, context issues, or something wrong in your antiforgery config or request pipeline.

Share via

How to apply CSRF defense for an Axios requests on a ASP .NET CORE application

1 answer

Your answer