"Encountering issues with CSRF token validation in an Angular SpringBoot application when making an Ajax POST request, resulting in an

Question

"Encountering issues with CSRF token validation in an Angular SpringBoot application when making an Ajax POST request, resulting in an

Current Project Details

The ongoing project involves developing a single-page Angular JS application using SpringBoot with a Spring Security implementation. The application, known as 'Study Planner', allows students to input their study leave on a calendar. Progress has been made on enabling students to log in and enter details client-side.

Development Focus

Currently, the main focus is on capturing the added events in our client-side JavaScript and sending them back to the server using an Ajax POST request. The goal is to then store this data in the database tied to the student, enabling it to be retrieved when the student accesses the calendar in the future.

Challenges Faced

The primary challenge encountered revolves around the Ajax POST method, specifically due to the inclusion of a CSRF header in an attempt to bypass Spring Security. When the csrf header is absent, a 403 (unauthorized) error is triggered. However, upon introducing the csrf header, no network traffic is recorded, the server is not contacted, and the "error" function in the Ajax call is activated.

Issue with CSRF Token

https://i.sstatic.net/pDq7z.jpg

Student Logs in to their Calendar
Student adds an event
'newEventData function' alert triggered
'we failed' alert triggered
403 Error in Chrome

403 (Forbidden) "Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-XSRF-TOKEN'."

Resolution Attempts

https://i.sstatic.net/7vB9C.jpg

Despite adapting documentation from Spring to include the csrf token within 'beforesend', the issue remains. The same outcome occurs if the function from the docs is simply appended at the end of the JavaScript file.

Student Logs in to their Calendar
Student adds an event
'newEventData function' alert triggered
'beforesend' alert triggered
'we failed' alert triggered
Error thrown

SyntaxError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': '$(_csrf.headerName}' is not a valid HTTP header field name.

Seeking Assistance

How can more detailed information about the Ajax error be obtained?
What might be causing the absence of network traffic despite the Ajax call resulting in an error?
Any recommendations for configuring Spring Security to mitigate this issue, aside from disabling it completely?

Additional Information

The WebSecurityConfigAdapter has been extended

...Code snippet here...

Extension of 'OncePerRequestFilter' implemented (However, no System Outs are printed during the Ajax POST)

...Code snippet here...

The method being targeted is not being accessed when the csrf security is active within HttpSecurity

...Code snippet here...

Apologies for the lengthy description, but the issue has been challenging, especially given the complex nature of web application security. Any guidance or suggestions on resolving this dilemma would be highly appreciated.

Thank you, Scott.

Update on Error Handling

Following the inclusion of error parameters as suggested by Paqman, additional information has been gathered, yet the resolution strategy remains uncertain.

SyntaxError: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': '${_csrf.headerName}' is not a valid HTTP header field name.

https://i.sstatic.net/keejZ.jpg

When inspecting the chrome console, it seems that these values are being treated as text variables. Is this the incorrect approach? https://i.sstatic.net/4vrKB.jpg

Within index.html, the code snippet within the header section is as follows:

...Code snippet here...

Additional Update

The issue concerning literal string problems was resolved by using 'th:content' instead of 'content', yet errors persisted regarding the undefined nature of the header/token. The actual solution to this problem has been shared, but for others facing similar challenges with accessing metadata in HTML files in an Angular project, changing 'content' to 'th:content' may prove beneficial.

View this related question

...Code snippet here...

javascript angularjs ajax spring-security csrf

Answer 1

Answer №1

After encountering a lot of confusion, we were able to successfully resolve the issue at hand. Contrary to most of the documentation I came across which indicated that the csrf token was stored in the session, our application actually deviates from the default SpringSecurity behavior by storing it in a cookie. This approach was adapted from the SpringBoot Angular Guide.

 public class CsrfHeaderFilter extends OncePerRequestFilter {

/**
 * Overrides SpringSecurity filter
 */
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
        throws ServletException, IOException {
    CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class.getName());
    if (csrf != null) {
        System.out.println("csrf is null");
        Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
        String token = csrf.getToken();
        if (cookie == null || token != null && !token.equals(cookie.getValue())) {
            cookie = new Cookie("XSRF-TOKEN", token);
            cookie.setPath("/");
            response.addCookie(cookie);
        }
    }
    filterChain.doFilter(request, response);
  }

Initially, we were led astray by following the guidance in the Spring Docs here due to this configuration.

Upon realizing this, we found valuable insights in the Django docs which directed us towards extracting the token value from the cookie.

Solution

We incorporated the following JavaScript function to retrieve the token:

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

Subsequently, we assigned the returned value from this function to a variable:

 var csrftoken = getCookie('XSRF-TOKEN');

Finally, we hardcoded (uncertain of potential issues in the future) the HEADER and utilized the earlier declared variable for the token:

function newEventData(ev) {
    $.ajax({
        "url" : "/Student/" + loggedinusername
                     + "/universitydays?id=" + ev.id + "&text="
                     + ev.text + "&start="
                     + Date.parse(ev.start_date) + "&end="
                     + Date.parse(ev.end_date),

        "method" : "POST",
        beforeSend : function(xhr) {
              xhr.setRequestHeader("X-XSRF-TOKEN", csrftoken);
        },
        "success" : function() {

        },
        "error" : function(jqXHR, textStatus, errorThrown) {
              alert("error: " + errorThrown);
        } 
 });

}

We hope this explanation proves beneficial to others facing a similar challenge.

Answer 2

After encountering a lot of confusion, we were able to successfully resolve the issue at hand. Contrary to most of the documentation I came across which indicated that the csrf token was stored in the session, our application actually deviates from the default SpringSecurity behavior by storing it in a cookie. This approach was adapted from the SpringBoot Angular Guide.

 public class CsrfHeaderFilter extends OncePerRequestFilter {

/**
 * Overrides SpringSecurity filter
 */
@Override
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
        throws ServletException, IOException {
    CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class.getName());
    if (csrf != null) {
        System.out.println("csrf is null");
        Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
        String token = csrf.getToken();
        if (cookie == null || token != null && !token.equals(cookie.getValue())) {
            cookie = new Cookie("XSRF-TOKEN", token);
            cookie.setPath("/");
            response.addCookie(cookie);
        }
    }
    filterChain.doFilter(request, response);
  }

Initially, we were led astray by following the guidance in the Spring Docs here due to this configuration.

Upon realizing this, we found valuable insights in the Django docs which directed us towards extracting the token value from the cookie.

Solution

We incorporated the following JavaScript function to retrieve the token:

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

Subsequently, we assigned the returned value from this function to a variable:

 var csrftoken = getCookie('XSRF-TOKEN');

Finally, we hardcoded (uncertain of potential issues in the future) the HEADER and utilized the earlier declared variable for the token:

function newEventData(ev) {
    $.ajax({
        "url" : "/Student/" + loggedinusername
                     + "/universitydays?id=" + ev.id + "&text="
                     + ev.text + "&start="
                     + Date.parse(ev.start_date) + "&end="
                     + Date.parse(ev.end_date),

        "method" : "POST",
        beforeSend : function(xhr) {
              xhr.setRequestHeader("X-XSRF-TOKEN", csrftoken);
        },
        "success" : function() {

        },
        "error" : function(jqXHR, textStatus, errorThrown) {
              alert("error: " + errorThrown);
        } 
 });

}

We hope this explanation proves beneficial to others facing a similar challenge.

"Encountering issues with CSRF token validation in an Angular SpringBoot application when making an Ajax POST request, resulting in an

Answer №1

Similar questions

Tips for using the arrow keys to navigate the cursor/caret within an input field

Execute a particular NodeJS function within the package.json scripts section

Implementing atomic design principles in Vue 3 with TypeScript

What is the possible reason behind the Vue warning message: "The instance is referencing the 'msg' property or method during rendering, even though it is not defined"?

jquery accordion not functioning properly following partial ajax page refresh

I am experiencing a 404 error when attempting to import a local JS file in Angular

How to retrieve the value of an observable from a regular JavaScript array in Knockout JS?

Having trouble integrating RGraph into my HTML page with AJAX

Encountering an error in React Native: Unable to access property 'length' as it is

I'm seeking some assistance in resolving my JavaScript issue

What's the CSS equivalent of Java's window.pack() method?

Challenges arise in compiling JS with webpack due to spread syntax complications within an npm package

Crop and upload images asynchronously using Node.js

Using Sequelize to update all values in a JSON file through an Express router.put operation

An unexpected 'undefined' occasionally tacked onto 1% of the URLs visitors requested on my website starting from June 12, 2012

Breaking down an array in Node.js

Numerous Levels of Dropdown Menus

Bypassing CORS in angularjs without server-side access

When should ng-repeat be utilized: only when the object type is an array?

I possess a JSON array object and need to identify and extract the array objects that contain a specific child node