阻止在跨源子框架中的 <input> 元素上自动对焦

Question

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

因此，我创建了一个 iframe，并将属性“src”设置为验证链接，例如“https:///auth?client_id=xxx”，这与我们的应用程序域 https:// 不同。并且返回值将类似于“https:///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

原文由 Orionpax 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

我建议：

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

很抱歉在您的游行中下雨！

原文由 jmcgrory 发布，翻译遵循 CC BY-SA 4.0 许可协议