Cypress运行银行集成测试出现'Refused to frame' CSP错误如何解决

安全阿岳

2026-9-29

根因说明

你遇到的报错是第三方登录页https://login.truelayer.com/自身返回的Content Security Policy策略限制导致的：该站点的CSP规则中frame-ancestors只允许https://somelink.github.io作为父页面嵌套它，而Cypress默认的测试运行逻辑是将所有被测页面嵌入到自身的iframe中执行，父域名不符合第三方站点的要求就会触发拦截。
你之前修改自身站点CSP配置、关闭chromeWebSecurity的操作无效，因为这个限制是第三方站点的响应头携带的，和你自身站点的配置无关。

可行解决方案

方案1：直接顶层导航跳转第三方站点
不要通过页面内点击链接的方式将第三方站点嵌在Cypress的iframe中加载，拿到跳转地址后直接调用cy.visit()跳转到第三方地址：
```
// 先获取页面上的第三方跳转链接
cy.get('a#truelayer-login').invoke('attr', 'href').then(loginUrl => {
  cy.visit(loginUrl)
})
```
关闭chromeWebSecurity的前提下Cypress 5.6.0支持跨域跳转，走完第三方流程后再跳转回你的业务站点即可，如果需要保留登录态可以提前用cy.preserveCookie()配置保留你站点的相关Cookie。
方案2：拦截修改第三方站点的响应头
使用Cypress 5.6.0提供的cy.route2能力拦截第三方站点的所有请求，删除响应头里的CSP和X-Frame-Options限制，该操作需要在触发第三方跳转的逻辑之前执行：
```
cy.route2('https://login.truelayer.com/**', (req) => {
  req.on('response', (res) => {
    // 移除嵌套限制相关的响应头
    delete res.headers['content-security-policy']
    delete res.headers['x-frame-options']
  })
})
```
方案3：Mock第三方集成流程
如果你不需要测试第三方站点本身的操作，直接Mock第三方流程的回调结果，跳过真实访问第三方站点的步骤，从根源上避免触发CSP限制。