Proxying A Site To Be Able To Wysiwyg Edit In Iframe - How Does It Work?

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 accompl

Solution 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