从 iframe 向父级调度事件，但阻止其他跨域请求答案

【问题标题】：Dispatch events from iframe to parent, but block other cross-origin requests从 iframe 向父级调度事件，但阻止其他跨域请求
【发布时间】：2019-11-12 15:17:36
【问题描述】：

我的应用执行以下操作：

使用节点请求加载第 3 方网站
在 html 中注入一个脚本，该脚本会为单击事件添加一个侦听器，以获取文本并将其放入自定义调度事件中 - 例如。 window.parent.document.dispatchEvent(clickedText)
将其放入用户页面上的 iframe 中。父窗口有一个监听这些事件的监听器，然后对这些文本进行处理。

这通常可以正常工作。但是......有些网站永远不会显示，因为他们试图加载永远不会到达的资源。在极少数情况下，网站似乎有一些脚本可以控制父页面，并将其重定向到其他地方。

我尝试向 iframe 添加沙盒属性，这解决了这两个问题。但它也会阻塞调度事件。

是否有解决方案可以解决这些问题，但仍允许 iframe 向父窗口发送事件？我不太了解 iframe 和跨域策略的东西，但我想知道 iframe 是否可以与节点应用程序对话，然后父窗口可以从节点请求。不知道这是否可能...

【问题讨论】：

我正在努力寻找一个合法的理由来解释你为什么这样做。如果第三方网站采取措施反对您这样做，您应该接受他们宁愿您不参与此活动
我们正在做的事情将直接使拥有这些网站的组织受益——这没什么不妥。最大的问题是，当您加载其他人的 HTML 时，通常会在加载 cookie 和期望来自网站域的请求的外部资源时卡住。所以这不是我试图颠覆的反机器人设计——只是一个非预期的用例
那么让这些网站包含你的 JS 代码会容易得多，而不是在中间安装一个人对它们进行代理攻击
让 10k 组织在他们的网站上包含代码绝对不容易！我正在尝试构建的更像是为用户显示并允许轻松提取数据的自定义浏览器 - 而不是“攻击”。它还直接旨在使慈善组织受益，因此，如果您确实有任何技术解决方案，我认为您不必担心道德问题。

标签： javascript node.js iframe

【解决方案1】：

好的...回答我自己的问题，以防它对其他人有用。 postMessage() 提供了另一种发送不受沙箱属性阻止的消息的方法。

所以在具有沙盒属性的iframe中，有这样的东西来发送数据

parent.postMessage("send me to parent","http://parentURL/");

然后在父母中，有这个要接收：

var eventMethod = window.addEventListener
        ? "addEventListener"
        : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent"
    ? "onmessage"
    : "message";
eventer(messageEvent, function (e) {
     console.log(e.data);
});

【讨论】：

一直在努力以另一种方式发送消息，因为具有沙盒属性的 iframe 的来源为“null”，当您尝试向其发送 postMessage 时会出错。因此，如果您也在那里苦苦挣扎，我找到的解决方案是： var frame = document.getElementById('iframe') frame.contentWindow.postMessage('message',"*");