在跨域子帧中阻止对 <input> 元素的自动对焦

Question

在我们的 Web 应用程序/站点中，我需要使用 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 中，我将检查消息是否来自指定的网站，然后验证“代码”值、blabla 等。

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

让我困惑的是：

1. 在 Chrome 浏览器中运行时总是失败，但在 Firefox 和 Edge 铬中可以正常运行。
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. when I created the iframe or popup window. it is very simple, I just set the iframe.src property, there is no element being created.

any help will be much appreciated.

p.s. I refer to the following doc: 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

Answer 1

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

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

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

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

我建议：

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

很抱歉让您的游行受到大雨的影响！