Proxying a site to be able to WYSIWYG edit in ifra

Question

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?

Answer 1

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:

1. Bob sends Alice a page with an iframe in it.
2. 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:

1. Bob sends Alice a page with an iframe in it.
2. The iframe tells Alice's browser to load a page from Bob's site.
3. Bob's site responds to the request for the page by:
   1. Fetching a page from Carol's site
   2. Modifying it
   3. 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