Cypress eliminating the "X-CSRFToken" header

Question

Cypress eliminating the "X-CSRFToken" header

There seems to be an issue with the Cypress test runner where it is removing X-CSRFToken from the request header, leading to a 403 Forbidden error. I have compared the headers between a manual run and a Cypress test run, and you can see the difference in the screenshots below:

Screenshot taken during navigation in Chrome browser: https://i.stack.imgur.com/VPk9D.png

Screenshot taken during Cypress test run: https://i.stack.imgur.com/HT27A.png

To verify this issue, I tried replaying the request using curl and including the X-CSRFToken, which resolved the problem. How can I address this issue when running tests with Cypress?

NOTE: This problem arises specifically when performing drag and drop events using the trigger() function.

javascript typescript testing cypress csrf-token

Answer 1

Answer №1

Recently encountered a problem and managed to find a solution:

To maintain session data (Cookies) while running tests, utilize the cy.session() command. Refer to cypress documentation for more details.

Here's an example solution implemented in my application:

Cypress.Commands.add(
  'login',
  (username, password) => {
    
    cy.session('user', () => { // <-- implementing command here
    // Initial login request to DJANGO which sets
    // Cookies (XSRF-TOKEN, session_id)
    cy.request({
        method: 'POST',
        url: apiUrl,
        headers: {
          Accept: 'application/json, text/plain, */*',
        },
        body: {
          password: pw,
          username: user,
        },
      }).then((response) => {
        const user = response.body.user
        user.token = response.body.access_token

        window.localStorage.setItem('auth.currentUser', JSON.stringify(user))
      })
    })
  })

With this setup, cookies are already configured in my test:


 it('Signs in as Premium User, creates a team, and deletes it', () => {
    cy.login('user', 'password')

    // execute test requests that rely on XSRF-TOKEN being set at this point
  })

Considering the relatively new nature of the cy.session() feature, you may need to enable a flag in your cypress.config.ts:

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    experimentalSessionAndOrigin: true,
    // ....
  }

Hopefully, this information proves useful to someone :)

Answer 2

Recently encountered a problem and managed to find a solution:

To maintain session data (Cookies) while running tests, utilize the cy.session() command. Refer to cypress documentation for more details.

Here's an example solution implemented in my application:

Cypress.Commands.add(
  'login',
  (username, password) => {
    
    cy.session('user', () => { // <-- implementing command here
    // Initial login request to DJANGO which sets
    // Cookies (XSRF-TOKEN, session_id)
    cy.request({
        method: 'POST',
        url: apiUrl,
        headers: {
          Accept: 'application/json, text/plain, */*',
        },
        body: {
          password: pw,
          username: user,
        },
      }).then((response) => {
        const user = response.body.user
        user.token = response.body.access_token

        window.localStorage.setItem('auth.currentUser', JSON.stringify(user))
      })
    })
  })

With this setup, cookies are already configured in my test:


 it('Signs in as Premium User, creates a team, and deletes it', () => {
    cy.login('user', 'password')

    // execute test requests that rely on XSRF-TOKEN being set at this point
  })

Considering the relatively new nature of the cy.session() feature, you may need to enable a flag in your cypress.config.ts:

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    experimentalSessionAndOrigin: true,
    // ....
  }

Hopefully, this information proves useful to someone :)

Answer 3

Answer №2

When using Cypress, cookies are automatically cleared between each test. This means that even if you set your cookies correctly during the login process, they will be discarded once the test block (it, specify, describe, or context) finishes executing. Consequently, subsequent network requests will start with a clean slate.

To overcome this behavior, you can utilize Cypress.Cookies.preserveOnce: https://docs.cypress.io/api/cypress-api/cookies.html#Preserve-Once

Here's an example of how I tackled a similar issue:

    beforeEach(() => {
        Cypress.Cookies.preserveOnce('XSRF-TOKEN', 'session_id')
    })

If you want to maintain this cookie state across all your test suites (including separate spec.js files), you can include the following in your cypress/support/index.js file:

Cypress.Cookies.defaults({
    preserve: ['XSRF-TOKEN', 'session_id']
})

Answer 4

When using Cypress, cookies are automatically cleared between each test. This means that even if you set your cookies correctly during the login process, they will be discarded once the test block (it, specify, describe, or context) finishes executing. Consequently, subsequent network requests will start with a clean slate.

To overcome this behavior, you can utilize Cypress.Cookies.preserveOnce: https://docs.cypress.io/api/cypress-api/cookies.html#Preserve-Once

Here's an example of how I tackled a similar issue:

    beforeEach(() => {
        Cypress.Cookies.preserveOnce('XSRF-TOKEN', 'session_id')
    })

If you want to maintain this cookie state across all your test suites (including separate spec.js files), you can include the following in your cypress/support/index.js file:

Cypress.Cookies.defaults({
    preserve: ['XSRF-TOKEN', 'session_id']
})

Cypress eliminating the "X-CSRFToken" header

Answer №1

Answer №2

Similar questions

The issue of React Js's inline style malfunctioning when using a loop condition

Every time I try to retrieve my JavaScript code, I am bombarded with endless prompts that prevent me

Python on the server side generating a downloadable zip file

Utilizing Angular: Importing Scripts in index.html and Implementing Them in Components

Automatically choose radio buttons within an li element in a loop

When using my webrtc technology, I configure my sdp to establish a recvonly direction

Encountered an error while reloading the page: "Unable to read property 'ArtisanID' of undefined."

Tips for dismissing loader in Ionic 4

What is the best method for automating the transfer of data from a database to the user interface of a website using html and javascript?

It appears that Serverworker is causing significant delays in processing ajax requests

Encountering issues while retrieving information from database through AJAX and PHP

Ways to capture targeted requests

Angular: No routes found that match the URL segment

Angular allows users to interact with objects in THREE.js by simply clicking on

Ways to determine if a user is using a PC using JavaScript

Issue with draggable div containing gmap not functioning on mobile browsers

Utilize JavaScript's $.post function to export PHP $_POST data directly into a file

Configure Protractor's configuration file to utilize a personalized reporter

What steps can I take to resolve the "this is undefined" issue in VueJS?

Having trouble retrieving the desired data from the JSON file