Retrieve, establish cookies, and guard against CSRF attacks

Question

Retrieve, establish cookies, and guard against CSRF attacks

Having some difficulty with CSRF in my application while using Isomorphic fetch.

The backend sends a CSRF-TOKEN in the set-cookies property:

https://i.sstatic.net/duODj.png

There is advice against directly accessing these cookies in code, so I attempted utilizing the credentials property in the fetch request:

const headers = new Headers({
            'Content-Type': 'x-www-form-urlencoded'
        });
        return this.fetcher(url, {
            method: 'POST',
            headers,
            credentials: 'include',
            body: JSON.stringify({
                email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e131f17123e131f171252180c">[email protected]</a>',
                password: 'password'
            })
        });

This allows me to send the CSRF cookie back to the server for a different request:

https://i.sstatic.net/OcotU.png

Encountering an Issue:

The backend requires an x-csrf-token header which cannot be set in the POST request.

Solution Required:

How can I transfer the value of set-cookies: CSRF-TOKEN into the next request's x-csrf-token header?

javascript cookies fetch-api

Answer 1

Answer №1

It appears that in the given situation, you need to extract information from the CSRF-TOKEN cookie. If not, it would be labeled as HttpOnly like JSESSIONID. The latter signifies that it cannot be accessed through the web page but merely sent back to the server automatically.

Typically, there is nothing erroneous with retrieving a CSRF token from cookies. You may find this insightful discussion helpful: Why is it common to put CSRF prevention tokens in cookies?

To read your cookie (which is not HttpOnly, of course), you can utilize the following code:

function getCookie(name) {
  if (!document.cookie) {
    return null;
  }

  const xsrfCookies = document.cookie.split(';')
    .map(c => c.trim())
    .filter(c => c.startsWith(name + '='));

  if (xsrfCookies.length === 0) {
    return null;
  }
  return decodeURIComponent(xsrfCookies[0].split('=')[1]);
}

Therefore, when making a fetch call, it should resemble this:

const csrfToken = getCookie('CSRF-TOKEN');
      
const headers = new Headers({
        'Content-Type': 'x-www-form-urlencoded',
        'X-CSRF-TOKEN': csrfToken
    });
    return this.fetcher(url, {
        method: 'POST',
        headers,
        credentials: 'include',
        body: JSON.stringify({
            email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d79687e794d68756c607d6168236e6260">[email protected]</a>',
            password: 'password'
        })
    });

Answer 2

It appears that in the given situation, you need to extract information from the CSRF-TOKEN cookie. If not, it would be labeled as HttpOnly like JSESSIONID. The latter signifies that it cannot be accessed through the web page but merely sent back to the server automatically.

Typically, there is nothing erroneous with retrieving a CSRF token from cookies. You may find this insightful discussion helpful: Why is it common to put CSRF prevention tokens in cookies?

To read your cookie (which is not HttpOnly, of course), you can utilize the following code:

function getCookie(name) {
  if (!document.cookie) {
    return null;
  }

  const xsrfCookies = document.cookie.split(';')
    .map(c => c.trim())
    .filter(c => c.startsWith(name + '='));

  if (xsrfCookies.length === 0) {
    return null;
  }
  return decodeURIComponent(xsrfCookies[0].split('=')[1]);
}

Therefore, when making a fetch call, it should resemble this:

const csrfToken = getCookie('CSRF-TOKEN');
      
const headers = new Headers({
        'Content-Type': 'x-www-form-urlencoded',
        'X-CSRF-TOKEN': csrfToken
    });
    return this.fetcher(url, {
        method: 'POST',
        headers,
        credentials: 'include',
        body: JSON.stringify({
            email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d79687e794d68756c607d6168236e6260">[email protected]</a>',
            password: 'password'
        })
    });

Answer 3

Answer №2

The name of the header can vary depending on your server configuration. For instance, in a Django setup, you would set up CSRF token using fetch as shown below:

  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json; charset=UTF-8',
    'X-CSRFToken': get_token
  },

Answer 4

The name of the header can vary depending on your server configuration. For instance, in a Django setup, you would set up CSRF token using fetch as shown below:

  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json; charset=UTF-8',
    'X-CSRFToken': get_token
  },

Retrieve, establish cookies, and guard against CSRF attacks

Answer №1

Answer №2

Similar questions

retrieve Excel document via POST request

Python3 was installed, but the version couldn't be located

Changing TypeScript Enum from String to Number in Angular

Dealing with a routing issue in node.js/express involving JavaScript and CSS

Ensure that text input is restricted from containing any HTML or script tags when utilizing the Web API within an HTML page

Numerous classifications and tags available for c3-angular-directive-c3 charts

Defining the range of an array of numbers in TypeScript: A complete guide

How to implement a service function to handle $http responses in a controller

Directives for Nested Elements in AngularJS

Close button for colorbox modal window containing an iframe

Incorporating a JavaScript advertisement zone within a PHP function

Error encountered while trying to authenticate user through post request

Increase the value of a property within an array of objects based on certain conditions

Using AngularJS in conjunction with other scripts

Looking to display the "loading....." message on a PHP page?

Extract the image URL from the href attribute using Xpath

I'm feeling a bit lost with this API call. Trying to figure out how to calculate the time difference between the

Tips for displaying personalized data with MUI DatePicker

Encountering issue with 'mongodb-connection-string-url'

Stopping a jQuery AJAX request after receiving another response