iframe - 如何测试跨域违规？

Question

我正在开发一个包含在 中的小部件，有iframe几次我碰巧部署了我的项目并在生产中意识到它无法正常工作，因为我违反了跨域策略。在本地我没有问题，因为我的主机页面和 iframe 的内容来自同一个域 (http://localhost:3000/)。

在柏树中重现

现在我想设置一个测试，其中我的主机页面由 http://localhost:3000/ 提供，而我的 iframe 内容来自 http://localhost:1234/，这样我就可以进行类似于生产的设置。

但是，当我为此使用 编写测试时cypress-iframe，我从它自己那里得到了一个跨域策略cypress-iframe：

阻止来源为“http://localhost:3000”的框架访问跨域框架。

node_modules/cypress-iframe/dist/index.js:97:40

   95 |                                 : (_a = fullOpts.url) === null || _a === void 0 ? void 0 : _a.test(contentWindow.location.toString());
   96 |                         }
>  97 |                         : function () { return contentWindow.location.toString() !== 'about:blank'; };
      |                                        ^
   98 |                     _c.label = 1;
   99 |                 case 1:
  100 |                     if (!!hasNavigated()) return [3, 3];

完整的堆栈跟踪

react_devtools_backend.js:2560 SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
    at hasNavigated (http://localhost:3000/__cypress/tests?p=cypress/integration/theme_04/cross-origin-in-iframe.spec.js:249:71)
    at Object.eval (http://localhost:3000/__cypress/tests?p=cypress/integration/theme_04/cross-origin-in-iframe.spec.js:252:27)
    at step (http://localhost:3000/__cypress/tests?p=cypress/integration/theme_04/cross-origin-in-iframe.spec.js:195:23)
    at Object.eval [as next] (http://localhost:3000/__cypress/tests?p=cypress/integration/theme_04/cross-origin-in-iframe.spec.js:176:53)
    at eval (http://localhost:3000/__cypress/tests?p=cypress/integration/theme_04/cross-origin-in-iframe.spec.js:170:71)
    at new Promise (<anonymous>)
    at ./node_modules/cypress-iframe/dist/index.js.__awaiter (http://localhost:3000/__cypress/tests?p=cypress/integration/theme_04/cross-origin-in-iframe.spec.js:166:12)
    at Context.eval (http://localhost:3000/__cypress/tests?p=cypress/integration/theme_04/cross-origin-in-iframe.spec.js:231:108)
From previous event:
    at Context.thenFn (http://localhost:3000/__cypress/runner/cypress_runner.js:136206:23)
    at Context.then (http://localhost:3000/__cypress/runner/cypress_runner.js:136645:21)
    at Context.<anonymous> (http://localhost:3000/__cypress/runner/cypress_runner.js:151764:21)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:151172:15
From previous event:
    at runCommand (http://localhost:3000/__cypress/runner/cypress_runner.js:151151:8)
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:151297:14)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:151325:16
From previous event:
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:151297:34)
From previous event:
    at http://localhost:3000/__cypress/runner/cypress_runner.js:151338:37
From previous event:
    at run (http://localhost:3000/__cypress/runner/cypress_runner.js:151331:21)
    at $Cy.cy.<computed> [as visitWithMock] (http://localhost:3000/__cypress/runner/cypress_runner.js:151804:11)
    at Context.runnable.fn (http://localhost:3000/__cypress/runner/cypress_runner.js:152028:21)
    at callFn (http://localhost:3000/__cypress/runner/cypress_runner.js:107792:21)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:158033:28
From previous event:
    at Object.onRunnableRun (http://localhost:3000/__cypress/runner/cypress_runner.js:158021:17)
    at $Cypress.action (http://localhost:3000/__cypress/runner/cypress_runner.js:148112:28)
    at Test.Runnable.run (http://localhost:3000/__cypress/runner/cypress_runner.js:156163:13)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:108577:12
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:108360:14)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:108370:7
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:108272:14)
    at Hook.<anonymous> (http://localhost:3000/__cypress/runner/cypress_runner.js:108333:7)
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:157949:22)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:157976:11
From previous event:
    at onNext (http://localhost:3000/__cypress/runner/cypress_runner.js:157973:57)
    at done (http://localhost:3000/__cypress/runner/cypress_runner.js:107732:5)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:107797:11
From previous event:
    at callFn (http://localhost:3000/__cypress/runner/cypress_runner.js:107795:14)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:158033:28
From previous event:
    at Object.onRunnableRun (http://localhost:3000/__cypress/runner/cypress_runner.js:158021:17)
    at $Cypress.action (http://localhost:3000/__cypress/runner/cypress_runner.js:148112:28)
    at Hook.Runnable.run (http://localhost:3000/__cypress/runner/cypress_runner.js:156163:13)
    at next (http://localhost:3000/__cypress/runner/cypress_runner.js:108294:10)
    at http://localhost:3000/__cypress/runner/cypress_runner.js:108338:5
    at timeslice (http://localhost:3000/__cypress/runner/cypress_runner.js:102264:27)

问题

解决问题的设置{chromeWebSecurity: false}也是我试图重现的问题（我的代码中的跨域违规）。cypress.jsoncypress-iframe

有没有办法做到这一点 ？

有关的

• cypress-iframe回购问题

标签： iframeautomated-testscross-domaincypressend-to-end