使用Cypress自定义命令登录时遇403 CSRF令牌错误求助

核心原因分析 #

你的场景是OAuth2代理的CSRF校验机制触发的403错误，手动登录正常是因为浏览器会自动同步CSRF令牌的生成与携带逻辑，而Cypress自动化流程中会话或请求的令牌同步环节出现缺失。

具体解决方案 #

1. 优化cy.session的令牌同步逻辑 #

cy.session默认缓存会话状态，但可能未正确捕获CSRF令牌的生成时机。修改登录命令，确保触发登录前先获取并确认CSRF Cookie存在：

Cypress.Commands.add('login', (email, password) => {
  cy.session([email, password], () => {
    // 先访问登录页，确保获取最新CSRF Cookie
    cy.visit('baseURL')
    // 等待CSRF Cookie加载完成
    cy.getCookie('_oauth2_proxy_csrf').should('exist')
    
    cy.get('[data-test="email"]').type(email);
    cy.get('.has-right-element').type(password)
    cy.get('button[type="submit"]').click()
    
    // 处理403错误页的登录按钮，此时Cookie已同步
    cy.get(':nth-child(2) > form > .button').click()
    
    // 验证登录成功，确认会话有效
    cy.url().should('not.include', 'login')
  }, {
    // 配置会话缓存的验证规则，确保Cookie未过期
    validate() {
      cy.getCookie('_oauth2_proxy').should('exist')
    }
  })
})

2. 直接复用已捕获的Cookie（临时方案） #

如果你已经通过loginAndSaveCookies获取了有效Cookie，可以在测试前直接加载，跳过重复登录流程：

// 在测试用例或before钩子中加载Cookie
before(() => {
  cy.fixture('cookies.json').then((cookies) => {
    cookies.forEach((cookie) => {
      cy.setCookie(cookie.name, cookie.value, {
        path: cookie.path,
        secure: cookie.secure,
        httpOnly: cookie.httpOnly,
        domain: cookie.domain,
        sameSite: cookie.sameSite
      })
    })
    // 加载Cookie后直接访问目标页面
    cy.visit('baseURL')
  })
})

3. 测试环境特殊配置 #

如果测试环境允许，可联系运维团队做以下操作：

• 临时关闭OAuth2代理的CSRF校验
• 添加Cypress测试的UA标识到白名单，避免触发403拦截

4. 手动提取CSRF令牌并携带请求 #

如果登录请求是AJAX发送的，可手动从Cookie中提取令牌并添加到请求参数：

Cypress.Commands.add('loginWithCSRF', (email, password) => {
  cy.visit('baseURL')
  // 从Cookie中提取CSRF有效令牌部分
  cy.getCookie('_oauth2_proxy_csrf').then((csrfCookie) => {
    const csrfToken = csrfCookie.value.split('|')[0]
    // 直接发送登录请求，携带CSRF令牌
    cy.request({
      method: 'POST',
      url: '/login', // 替换为实际登录接口路径
      form: true,
      body: {
        email: email,
        password: password,
        _csrf: csrfToken // 替换为接口要求的CSRF参数名
      }
    })
  })
})

关键注意事项 #

• Cookie时效性：_oauth2_proxy_csrf有效期仅约15分钟，测试时需确保Cookie未过期，或每次登录重新获取
• SameSite配置：若站点启用严格SameSite规则，可在cypress.config.js中添加chromeWebSecurity: false（仅用于测试环境）
• 会话验证：cy.session的validate函数可确保复用会话前Cookie仍有效，避免因过期引发403

内容的提问来源于stack exchange，提问作者Leech76