我可以从另一个域的 iframe 父级访问 javascript

Posted 2023-05-09

【中文标题】我可以从另一个域的 iframe 父级访问 javascript

【英文标题】：Can I access javascripts from iframe parent on another domain

【发布时间】：2017-11-06 12:27:27

【问题描述】：

我控制这两个域并且可以设置任何必要的策略。 iframe 中的域使用几乎相同的库，我希望尽可能从父级中窃取它们。

明确地说，我不是在问如何提出跨域请求。我在问如何从 iframe 的父级获取脚本，当父级位于另一个域时。

我得到一个权限错误（在这里尝试 jQuery，但与我的其他库相同）：

if (typeof(jQuery) == "undefined") 
  var iframebody = document.getElementsByTagName("body")[0];
  var jQuery = function (selector)  return parent.jQuery(selector, iframebody); ;
  var $ = jQuery;

$("<h1>Hello World</h1>").appendTo("body");

如果他们在同一个域中，这将有效。

我知道这是跨域的，并且出于安全原因被阻止，但考虑到我控制两个域并且都不对安全敏感，我可以随意设置任何策略。

这个可以吗？

【参考方案1】：

如果您在两个页面中都包含来自同一来源的 js，它只会加载一次，但在两个站点上都可以访问：

//parent/main.html
<script src="jquery.js"></script>
<iframe src="http://other/iframe.html"></iframe>
<script>
  $(document.body).html("wohoo");
</script>

//other/iframe.html
 <script src="http://parent/jquery.js"></script>
<script>
  $(document.body).html("wohoo");
</script>

因此，如果在 iframe 中访问它们，则脚本只加载一次，如果您单独访问它们中的每一个，它仍然可以工作。

【参考方案2】：

您可以使用 postMessage 在框架及其父窗口之间来回传递信息。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

您必须运行代码来修改它所在域中的元素，但您可以在父级中设置一个发布消息处理程序来启动它。

// child window (iframe content)
parent.postMessage("hi there", "https://parent.domain.here");


// parent window
window.addEventListener("message", function(message)
    $("<h1>"+message+"</h1>").appendTo("body");
);