代理一个网站可以在iframe中进行WYSIWYG编辑

 

CONTEXT

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

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

题

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

鉴于：

  • 爱丽丝，有一个浏览器
  • 鲍勃，谁运行提供编辑服务的网站
  • 卡罗尔，谁经营一个网站，爱丽丝想编辑

    • 如果：

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

    • 然后，相同的来源策略阻止Bob的客户端代码到达Carol的网站。

    但是，当您使用代理时：

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

    • 现在iframe：

  • 与Bob的页面其余部分位于相同的原点，所以相同的原始策略不适用或
  • 由代理进行的修改（在步骤3.2中）允许通过postMessage进行跨源通信
    • 链接地址: http://www.djcxy.com/p/15923.html

    上一篇: Proxying a site to be able to WYSIWYG edit in iframe

    下一篇: Drupal 7: Wysiwyg