上下文
我希望创建一个所见即所得编辑器,允许用户编辑 iframe 中加载的第三方网站。我知道像 Optimizely 这样的公司使用代理来完成此任务( as described here ),但我不太明白这是如何工作的。特别是这部分有点不清楚:
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 中加载的不可编辑的内容?
最佳答案
给定:
- Alice,有浏览器
- Bob,运营一个提供编辑服务的网站
- Carol,运营着一个 Alice 想要编辑的网站
如果:
- Bob 向 Alice 发送一个包含 iframe 的页面。
- iframe 告诉 Alice 的浏览器从 Carol 的网站加载页面
然后,同源策略会阻止 Bob 的客户端代码到达 Carol 的站点。
但是当您使用代理时:
- Bob 向 Alice 发送一个包含 iframe 的页面。
- iframe 告诉 Alice 的浏览器从 Bob 的站点加载页面。
- Bob 的网站通过以下方式响应页面请求:
- 从 Carol 的网站获取页面
- 修改
- 发送修改后的 HTML 作为对 Alice 浏览器请求的响应
现在 iframe 可以是:
- 与 Bob 页面的其余部分同源,因此同源政策不适用或
- 代理所做的修改(在步骤 3.2 中)允许通过 postMessage 进行跨源通信
关于javascript - 代理站点以便能够在 iframe 中进行所见即所得编辑 - 它是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37074417/