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

CONTEXT

我正在寻找创建一个WYSIWYG编辑器，允许用户编辑iframe中加载的第三方网站。 我知道像Optimizely这样的公司使用代理来完成这个（ 如这里所述 ），但我不太明白这是如何工作的。 特别是，这部分有点不清楚：

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

题

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

Answer 1

鉴于：

• 爱丽丝，有浏览器
• 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进行跨源通信