代理一个网站能够在iframe中进行所见即所得编辑-它是如何工作的

Proxying a site to be able to WYSIWYG edit in iframe - How does it work?

本文关键字：编辑 所见即所得 何工作 工作 网站 一个 代理 iframe      更新时间：2023-09-26

上下文

我希望创建一个所见即所得编辑器，允许用户编辑iframe中加载的第三方网站。我知道像Optimizely这样的公司使用代理来实现这一点（如本文所述），但我不太明白这是如何工作的。特别是，这部分有点不清楚：

Optimizely Editor加载http://www.mypage.com在iframe中，并使用window.postMessage与页面通信。只有当该页面上已经有类似上面的片段时，这才有效。如果不是这样，编辑器将在等待来自iframe'd页面的消息时超时，并将通过实际将片段插入页面的代理再次加载。

问题

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

给定：

  • 爱丽丝，她有浏览器
  • Bob，他经营着一个提供编辑服务的网站
  • Carol，她经营着一个Alice想要编辑的网站

如果：

  1. 鲍勃给爱丽丝发了一个页面，里面有一个iframe
  2. iframe告诉Alice的浏览器从Carol的网站加载页面

然后，同源策略阻止Bob的客户端代码访问Carol的网站。

然而，当您使用代理时：

  1. 鲍勃给爱丽丝发了一个页面，里面有一个iframe
  2. iframe告诉Alice的浏览器从Bob的站点加载页面
  3. Bob的网站通过以下方式响应页面请求：
    1. 从Carol的网站获取页面
    2. 修改它
    3. 从Alice的浏览器发送修改后的HTML作为对请求的响应

现在iframe：

  • 与Bob页面的其他部分位于同一原点，因此同一原点策略不适用或
  • 代理所做的修改（在步骤3.2中）允许通过postMessage进行跨源通信
相关文章：