在< input>上阻止自动对焦跨域子帧中的元素 [英] Blocked autofocusing on a <input> element in a cross-origin subframe
问题描述
在我们的Web应用程序/网站中，我需要使用iframe或弹出窗口来验证当前令牌是否有效，如果没有，则刷新它.
In our web app/site, I need to use an iframe or a popup window to validate if the current token is valid and refresh it if no.
因此，我创建了一个iframe，并将属性"src"设置为验证链接，例如"https://< domain_name>/auth?client_id = xxx"这与我们的应用程序域https://< app_domain>不同.并且返回值将类似于"https://< domain_name>/code = yyyy"
So, I create an iframe, and set the property 'src' to the validation link such as "https://<domain_name>/auth?client_id=xxx" which is different to our app domain https://<app_domain>. and the return value will like "https://<domain_name>/code=yyyy"
document.createElement('iframe');
我添加了Web应用程序/网站的消息句柄，例如
and I added the message handle for the web app/site, like
window.addEventListener("message", this.messageHandler);
在messageHandler中，我将检查消息是否来自指定的网站，然后验证代码".值，blabla等.
in the messageHandler, I will check if the message is from a specified website, and then validate the "code" value, blabla, etc.
但是在Chrome中运行时，总是出现错误 跨域子帧中的元素上的自动阻止对焦."
But when running in Chrome, I always got the error "Blocked autofocusing on a element in a cross-origin subframe."
让我感到困惑的是
- 在Chrome浏览器中运行时，它总是失败，但是在Firefox和Edge Chrome中可以正常工作.
- 我尝试设置iframe.sandbox ="allow-forms allow-scripts allow-same-origin"，该问题仍然存在.
- 如果验证令牌在iframe或超时中失败，我将创建一个弹出窗口以继续验证并刷新令牌.但是每次使用弹出窗口总是可以成功的.如果确实是跨域问题，为什么使用iframe失败但使用弹出窗口成功.
- 我没有使用window.postmessage.因为我不知道如何将iframe/popup-window的返回值传递给主页.
- 启动Chrome时，我使用了Chrome的CORS扩展名或使用--disable-web-security参数.问题仍然存在.
- 创建iframe或弹出窗口时.非常简单，我只需设置iframe.src属性，就不会创建任何元素.
任何帮助将不胜感激.
p.s.
我指的是以下文档:
在交叉链接，原始子帧
https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
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
推荐答案
在Web开发中对iframe的支持只会随着时间的推移而变差，因为它们是一个安全的黑洞，浏览器会随着时间的推移逐渐锁定和使用它们.
Support for iframes in web development will only get worse over time as they are a security black hole, browsers are gradually over time locking out features and use of them.
我假设您这样做是因为您正在验证第三方服务上的用户，并通过观看第三方服务网站的响应来进行验证?
I am assuming you are doing this because you are validating a user on a third party service, validating by watching the response of a third party service website?
在不知道您所使用的服务的情况下，我无法特别评论，但是对于希望执行类似操作的任何人，我强烈建议您不要这样做:
Without knowing the service you are using I cannot comment specifically but for anyone looking to do something similar I would highly suggest not doing this:
- 如前所述，由于安全问题，iframe不断锁定功能
- 攻击者可以更改iframe的来源并提交自己的iframe，以使其看起来已经正确验证
- 您用作iframe src的页面不太可能用于此用途，当第三方开发人员更改其页面行为时，该页面会回来并咬住您，他们可能会在不知道页面中断的情况下这样做您的应用程序
我推荐:
- 找到第三方服务提供的稳定API并使用它
- 查找不存在的其他服务
很抱歉在游行队伍中下雨！
Apologies to rain on your parade!
这篇关于在< input>上阻止自动对焦跨域子帧中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
