时间戳

首页 > 解决方案 > 阻止自动对焦跨域子帧中的元素

javascript - 阻止自动对焦跨域子帧中的元素

问题描述

在我们的网络应用程序/网站中，我需要使用 iframe 或弹出窗口来验证当前令牌是否有效，如果不是则刷新它。

因此，我创建了一个 iframe，并将属性“src”设置为验证链接，例如“https://<domain_name>/auth?client_id=xxx”，这与我们的应用程序域 https://<app_domain> 不同。并且返回值将像“https://<domain_name>/code=yyyy”

document.createElement('iframe');

我为网络应用程序/网站添加了消息句柄，比如

window.addEventListener("message", this.messageHandler);

在 messageHandler 中，我将检查消息是否来自指定网站，然后验证“code”值、blabla 等。

但是在 Chrome 中运行时，我总是收到错误“阻止自动对焦于跨域子帧中的元素”。

让我困惑的是：

  1. 在 Chrome 浏览器中运行时总是失败，但在 Firefox 和 Edge chromium 中可以正常运行。
  2. 我尝试设置 iframe.sandbox = "allow-forms allow-scripts allow-same-origin"，问题依然存在。
  3. 如果验证令牌在 iframe 中失败或超时，我将创建一个弹出窗口以继续验证并刷新令牌。但每次，使用弹窗总能成功。如果真的是跨域问题，为什么使用 iframe 失败但使用弹出窗口成功。
  4. 我没有使用 window.postmessage。因为我不知道如何将 iframe/popup-window 的返回值传递给主页。
  5. 我在启动 Chrome 时使用了 Chrome 的 CORS 扩展或使用参数 --disable-web-security。问题仍然存在。
  6. 当我创建 iframe 或弹出窗口时。很简单，我只是设置了 iframe.src 属性，没有创建元素。

任何帮助都感激不尽。

ps 我参考以下文档： Blocked autofocusing on a form control in a cross-origin subframe
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
https://developer.mozilla .org/en-US/docs/Web/API/Window/postMessage

标签： javascriptiframecross-domain

解决方案

Web 开发中对 iframe 的支持只会随着时间的推移变得更糟，因为它们是一个安全黑洞，随着时间的推移，浏览器会逐渐锁定功能和使用它们。

我假设您这样做是因为您正在验证第三方服务上的用户，通过观察第三方服务网站的响应来验证？

在不知道您使用的服务的情况下，我无法具体评论，但对于任何想要做类似事情的人，我强烈建议不要这样做：

  • 如前所述，由于安全问题，iframe 的功能不断被锁定
  • 攻击者可以更改 iframe 的来源并提交他们自己的 iframe 以使其看起来已正确验证
  • 您用作 iframe src 的页面不太可能用于此用途，当第 3 方开发人员更改其页面的行为方式时，它会回来并咬住您，他们可能会在不知道它会破坏您的应用程序的情况下这样做

我建议：

  • 找到第 3 方服务提供的稳定 API 并使用它
  • 如果不存在则寻找另一个服务

抱歉给你的游行下雨了！

推荐阅读