Implementing CSRF Protection in a DOTNET API with a Vue Client

Frontend and Backend Development
1

Facing 400 error with DOTNET API & Vue when using CSRF validation via antiforgery token. Custom endpoint & header config implemented. See revised configuration below:

// In Program.cs or a startup file
public void ConfigureServices(IServiceCollection svc) {
    svc.AddMvc();
    svc.AddAntiforgery(opts => { opts.HeaderName = "X-SEC-TOKEN"; });
}

public class SecurityController : Controller {
    [HttpGet("token-refresh")]
    public IActionResult RefreshToken() {
        var tokens = HttpContext.RequestServices.GetService<IAntiforgery>().GetAndStoreTokens(HttpContext);
        Response.Cookies.Append("SEC-TOKEN", tokens.RequestToken, new CookieOptions { HttpOnly = false, Secure = true });
        return Ok();
    }

    [HttpPost("data-send")]
    [ValidateAntiForgeryToken]
    public IActionResult PostData() { return Ok(); }
}

// In main.js
import { createApp } from 'vue';
import axios from 'axios';

function retrieveToken() {
    const match = document.cookie.match(/SEC-TOKEN=([^;]+)/);
    return match ? match[1] : "";
}

axios.defaults.headers.common['X-SEC-TOKEN'] = retrieveToken();
axios.get('/token-refresh');
axios.post('/data-send').then(resp => console.log(resp.data));

createApp({}).mount('#app');
2

hey, hav u checked if the cookie settings are vibeing with your token refresh? sometimes small misconfigs in the secure flags can cause token mismtach. what did your network tab reveal?

3

hey, try ensuring the token is actually refreshed before posting data, coz i suspect a race condition. check if the cookie domain and path are correctly set too, might be messing the token reading