Proxying a site to be able to WYSIWYG edit in iframe

 

CONTEXT

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:

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.

QUESTION

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?

Given:

  • Alice, who has a browser
  • Bob, who runs a site which provides the editing service
  • Carol, who runs a site that Alice wants to edit

    • If:

  • Bob sends Alice a page with an iframe in it.
  • The iframe tells Alice's browser to load a page from Carol's site

    • Then the same origin policy prevents Bob's client side code from reaching Carol's site.

    When you use a proxy however:

  • 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:
  • Fetching a page from Carol's site
  • Modifying it
  • Sending the modified HTML as the response to the request from Alice's browser

    • Now the iframe either:

  • Is on the same origin as the rest of Bob's page so the same origin policy doesn't apply or
  • The modifications made by the proxy (in step 3.2) allow cross-origin communication via postMessage
    • 链接地址: http://www.djcxy.com/p/15924.html

    上一篇: JavaScript中的HTTP GET请求？

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