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

Question

在我们的网络应用程序/网站中，我需要使用 iframe 或弹出窗口来验证当前 token 是否有效，如果不是则刷新它。
因此，我创建了一个 iframe，并将属性“src”设置为验证链接，例如“https:///auth?client_id=xxx”，这与我们的应用程序域 https:// 不同。并且返回值将像“https:///code=yyyy”

document.createElement('iframe');

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

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

在 messageHandler 中，我将检查消息是否来自指定网站，然后验证“code”值、blabla 等。
但是在 Chrome 中运行时，我总是遇到错误
“阻止对跨域子帧中的元素进行自动对焦。”
让我困惑的是:

在 Chrome 浏览器中运行时总是失败，但在 Firefox 和 Edge chromium 中可以正常运行。

我尝试设置 iframe.sandbox = "allow-forms allow-scripts allow-same-origin"，问题依然存在。

如果验证 token 在 iframe 中失败或超时，我将创建一个弹出窗口以继续验证并刷新 token 。但每次，使用弹窗总能成功。如果真的是跨域问题，为什么使用 iframe 失败但使用弹出窗口成功。

我没有使用 window.postmessage。因为我不知道如何将 iframe/popup-window 的返回值传递给主页。

我在启动 Chrome 时使用了 Chrome 的 CORS 扩展或使用参数 --disable-web-security。问题仍然存在。

当我创建 iframe 或弹出窗口时。很简单，我只是设置了 iframe.src 属性，没有创建元素。

任何帮助都感激不尽。
p.s.
我引用以下文档:
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

Web 开发中对 iframe 的支持只会随着时间的推移变得更糟，因为它们是一个安全黑洞，随着时间的推移，浏览器会逐渐锁定功能和使用它们。
我假设您这样做是因为您正在验证第三方服务上的用户，通过观察第三方服务网站的响应来验证？
在不知道您正在使用的服务的情况下，我无法具体评论，但对于任何想要做类似事情的人 我强烈建议不要这样做 :

如前所述，由于安全问题，iframe 的功能不断被锁定

攻击者可以更改 iframe 的来源并提交他们自己的 iframe 以使其看起来已正确验证

您用作 iframe src 的页面不太可能用于此用途，当第 3 方开发人员更改其页面的行为方式时，它会回来并咬住您，他们可能会在不知道会破坏您的应用程序的情况下这样做

我建议:

找到第 3 方服务提供的稳定 API 并使用该 API

如果不存在，则查找另一个服务

抱歉给你的游行下雨了!