加载具有与窗口顶相同协议的内嵌iframe以防止同源策略违反

Loading embedded iframe with same protocol as window top to prevent Same Origin Policy Violation

本文关键字：iframe 策略窗口加载协议更新时间：2023-09-26

我们正在开发一个Javascript SDK，用于嵌入式应用程序(作为iframe注入我的网站)，以帮助他们使用一些资源，如加载一些对话框:例如授权对话框或共享框(如Facebook)。

我们的SDK使用easyXDM或多或少像这样工作:

HTML Page
----------------------------------------------------------------------------------------------------------------------------
| http/https: www.mysite.com/embedded-app/
|(部分JS类)
|
|- - - - - | ------------------------------------------------------------------------------------------------------------------
|- - - - - | (IFRAME)
|- - - - - | https:// www.some-embedded-app-domain.com /page.html
|- - - - - |(从使用easyXDM的http/https:www.mysite.com/sdk.js加载并实例化SDK)
|- - - - - |
|- - - - - | - - - - - |---------------------------------------------------------------------------------------------------
|- - - - - | - - - - - | ( IFRAME注入easyXDM)
|- - - - - | - - - - - | http/https: www.mysite.com /embedded_provider.html
|- - - - - |- - - - - |(与窗口通讯。)上面要用那些窗口说话。)
|- - - - - |- - - - - |
|- - - - - |- - - - - |
|- - - - - |- - - - - |
|- - - - - |- - - - - |

我的网站可以使用http/https加载，但嵌入的应用程序必须使用总是 https服务。为了允许easyXDM注入的内部iframe与我的站点通信，主机和协议必须在两个url中匹配，否则会导致同源策略冲突。

问题:我如何告诉代码从SDK，这是从外部应用程序URL加载，外部窗口(我的网站)使用http或https，渲染embedded_provider.html使用相同的协议，从而允许两者之间的JS通信?

我能想到的唯一解决方案是以某种方式通知嵌入的应用程序，我们目前正在从http/https浏览，然后它可以正确地实例化它(使用标志use_https或之类)，但我宁愿不强迫应用程序知道我们正在使用的协议。

你知道其他的选择吗?

谢谢!

我能想到的唯一解决方案(虽然还没有测试过)是将easyXDM放入两个测试iframe中-一个在http://www.mysite.com/url_test上，一个在https://www.mysite.com/url_test上。

然后让你的/url_test网页尝试访问window.top.location.href。如果/url_test可以看到位置，那么它必须在同一域中。然后，successfull/url_test页面将通过easyXDM与父iframe(在some-embedt-app.com上)通信，以在正确的主机上创建您真正想要的iframe。

注意:在不正确的主机上的/url_test页将开始在控制台中转储同源iframe警告。:)

注释#2:如果这种方法有效，你可以迭代地改进它，说:"因为产品领域，我知道这些嵌入的80%将在http上。我将首先在http上创建一个/url_test，然后尝试使用https作为备份。"

使用//http://或https://

浏览器会对它进行排序