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

Newbie: Troubleshooting Vue Errors - "Vue is not recognized"

Is there an issue with Vue-router 2 where it changes the route but fails to update the view

Clicking on a flex card will trigger the opening of a new page where the parsed data will be displayed in a stylish manner using JavaScript

Encountered an issue while processing the firebase get request with the following error message: 'Unauthorized request in Angular'

Executing a series of HTTP requests sequentially using Angular 5

What is the best way to adjust the screen to display the toggle element when it is opened?

Troubleshooting PHP webpage with dysfunctional Python AJAX functionality

Instructions for passing the chosen value to Django

What strategies can be employed to streamline the code provided?

Issue with Slick Grid not updating after Ajax request

The React application is functioning properly; however, during compilation, it continually displays an error stating that the module cannot be found

Tips for preventing unstyled content flash when updating CSS files dynamically

Tips for formatting angular text sections

What is the best way to remove text from a box when a user clicks on it?

Can NODE_PATH be configured in Typescript?

What is the best way to swap out an HTML file with another without altering the link?

Form for creating and updating users with a variety of input options, powered by Angular 2+

The menu is about to receive some custom styling

transferring iterative information via ajax data flow

Running a child process within a React application