代理网站能够在iframe中进行WYSIWYG编辑 - 它是如何工作的？ [英] Proxying a site to be able to WYSIWYG edit in iframe - How does it work?
问题描述
上下文
我想创建一个WYSIWYG编辑器，允许用户编辑iframe中加载的第三方网站。我知道像Optimizely这样的公司使用代理来实现这一目标（如此处所述）但我不太明白这是如何工作的。特别是，这部分有点不清楚：
I'm looking to create a WYSIWYG editor that allows users to edit a third party site loaded within an iframe. I know the companies such as Optimizely use proxying to accomplish this (as described here) but I don't quite understand how this works. In particular, this part is somewhat unclear:
Optimizely Editor加载 http://www.mypage.com 并使用window.postMessage与页面进行通信。这仅适用于该页面上已有上述代码段的代码段。如果不是这种情况，编辑器将在等待来自iframe页面的消息时超时，并将通过实际将代码段插入页面的代理再次加载。
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中加载的其他不可编辑的内容吗？
What exactly does proxying do that allows a JS snippet to be inserted into the page and for the user to edit otherwise uneditable content loaded in iframe?
推荐答案
鉴于：
- 拥有浏览器的Alice
- Bob，运营一个提供编辑服务
- Carol，运营Alice想要编辑的网站
如果：
- Bob向Alice发送一个带有iframe的页面。
- iframe告诉Alice的浏览器加载来自Carol网站的页面
然后相同的原始政策阻止Bob的客户端代码到达Carol的网站。
Then the same origin policy prevents Bob's client side code from reaching Carol's site.
但是当您使用代理时：
- Bob向Alice发送一个包含iframe的页面。
- iframe告诉Alice的浏览器从Bob的网站加载页面。
- Bob的网站通过以下方式回复页面请求：
- Bob sends Alice a page with an iframe in it.
- The iframe tells Alice's browser to load a page from Bob's site.
- Bob's site responds to the request for the page by:
- 从Carol的网站上获取页面
- 修改它
- 将修改后的HTML作为对Alice浏览器请求的响应发送
现在iframe：
- 是一样的作为Bob的其余页面的来源，因此相同的原始政策不适用或
- 代理所做的修改（在步骤3.2中）允许来源通过postMessage进行沟通
这篇关于代理网站能够在iframe中进行WYSIWYG编辑 - 它是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
