使用Cypress自动化工具时，加载iframe内第三方UI出现403禁止错误

• 对比请求头差异
  第三方服务可能基于请求头做访问限制，Cypress环境下的请求头和正常浏览时可能存在差异。用cy.intercept捕获请求并打印头信息，再和直接访问时的请求头对比：

  cy.intercept('GET', '**/your-third-party-ui-path', (req) => {
    console.log('Cypress请求头:', req.headers)
  }).as('thirdPartyLoad')
  
  cy.visit('/your-app-page')
  

  找到差异后，在拦截器中手动补充或修改不符的请求头，比如User-Agent、Referer：

  cy.intercept('GET', '**/your-third-party-ui-path', (req) => {
    req.headers['User-Agent'] = '你复制的正常Electron浏览器UA'
    req.headers['Referer'] = '你的应用页面URL'
  }).as('thirdPartyLoad')
  

• 关闭Cypress Web安全限制
  Cypress默认启用Web安全检查，可能影响跨域iframe的加载。在cypress.config.js中添加配置：

  const { defineConfig } = require('cypress')
  
  module.exports = defineConfig({
    e2e: {
      chromeWebSecurity: false,
      // 其他已有配置
    }
  })
  

  注：此配置会关闭跨域安全校验，仅建议在测试环境使用。

• 同步第三方Cookie
  部分第三方UI依赖特定Cookie验证身份，Cypress环境下可能未正确携带这些Cookie。手动设置对应Cookie：

  beforeEach(() => {
    cy.setCookie('third-party-cookie-key', 'cookie-value', {
      domain: '第三方域名',
      path: '/',
      secure: true // 如果第三方服务用HTTPS，需设置为true
    })
  })
  

• 修改Electron的User-Agent
  Cypress内置的Electron有专属User-Agent，第三方服务可能通过UA识别并拦截测试请求。在cypress.config.js中自定义UA：

  const { defineConfig } = require('cypress')
  
  module.exports = defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
        on('before:browser:launch', (browser, launchOptions) => {
          if (browser.name === 'electron') {
            // 替换为你直接访问时的Electron UA
            launchOptions.preferences.webPreferences.userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Electron/27.1.3 Safari/537.36'
          }
          return launchOptions
        })
      }
    }
  })
  

• 确保iframe加载完成后再操作
  若测试操作过早触发，可能导致iframe未完成加载就发起请求，引发403。使用cy.frameLoaded等待iframe加载：

  cy.get('iframe[src="第三方UI的URL"]').frameLoaded()
  // 之后再进行后续操作
  

内容的提问来源于stack exchange，提问作者Not a coder