代理网站以便能够在 iframe 中进行 WYSIWYG 编辑 - 它是如何工作的？

Question

上下文

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

Optimizely 编辑器在 iframe 中加载 http://www.mypage.com 并使用 window.postMessage 与页面通信。这仅适用于该页面已经具有与上面类似的 sn-p 的情况。如果不是这种情况，编辑器将在等待来自 iframe 页面的消息时超时，并将通过实际将 sn-p 插入页面的代理再次加载它。

问题

代理究竟是做什么的，它允许将 JS sn-p 插入页面并让用户编辑 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 进行跨域通信