javascript - 代理站点以便能够在 iframe 中进行所见即所得编辑 - 它是如何工作的？

Question

上下文

我希望创建一个所见即所得编辑器，允许用户编辑 iframe 中加载的第三方网站。我知道像 Optimizely 这样的公司使用代理来完成此任务( as described here )，但我不太明白这是如何工作的。特别是这部分有点不清楚:

The Optimizely Editor loads http://www.mypage.com inside an iframe and uses window.postMessage to communicate with the page. This only works if that page already has a snippet like the one above on it. If that's not the case, the editor will timeout while waiting for a message from the iframe'd page, and will load it again via a proxy that actually inserts the snippet onto the page.

问题

代理究竟做了什么，允许将 JS 片段插入到页面中，并让用户编辑 iframe 中加载的不可编辑的内容？

Answer 1

给定:

• Alice，有浏览器
• Bob，运营一个提供编辑服务的网站
• Carol，运营着一个 Alice 想要编辑的网站

如果:

1. Bob 向 Alice 发送一个包含 iframe 的页面。
2. iframe 告诉 Alice 的浏览器从 Carol 的网站加载页面

然后，同源策略会阻止 Bob 的客户端代码到达 Carol 的站点。

但是当您使用代理时:

1. Bob 向 Alice 发送一个包含 iframe 的页面。
2. iframe 告诉 Alice 的浏览器从 Bob 的站点加载页面。
3. Bob 的网站通过以下方式响应页面请求:
   1. 从 Carol 的网站获取页面
   2. 修改
   3. 发送修改后的 HTML 作为对 Alice 浏览器请求的响应

现在 iframe 可以是:

• 与 Bob 页面的其余部分同源，因此同源政策不适用或
• 代理所做的修改(在步骤 3.2 中)允许通过 postMessage 进行跨源通信