IFrame Cross Domain Communication Using IIS ARR and URL Rewrite

Introduction

This article demonstrates how to  communicate  from main a page to an iframe and vice versa when they are loaded with contents from different domains using IIS ARR and URL Rewrite. 
 
A browser allows cross-domain communication between the main page and its iframe only when the main page and iframe  contents are loaded from the same domain with the same protocol and port.

See Figure 1 below. The main page content is loaded from http://www.abc.com and the iframe content is loaded from http://www.abc.com. Both domains are the same with the same protocol (HTTP) and port (80).
 
Iframe.png
 
For security reasons, the browser's same origin policy restricts accessing iframe content from the main page and vice versa when the main page and iframe contents are loaded from different domains.

The browser restricts communication between main page and iframe in the following scenarios:
 

MainPage URL

IFrameURL

http://www.abc.com

http://www.xyz.com

http://www.abc.com

http://www.abc.com:8080

http://www.abc.com

http://subdomain.abc.com

http://www.abc.com

https://www.abc.com


 
Iframe1.png
 
To learn more about the same origin policy, visit http://en.wikipedia.org/wiki/Same_origin_policy
 
The browser same origin policy is ignored in the following cases:
  1. When document.domain of the main page and the iframe are set with the same domain name
  2. When HTTP headers contain Access-Control-Allow-Origin (cross origin resource)
  3. By the postMessage method

All the above cases require access to edit the main page and the iframe page. Consider a scenario, when you want to load iframe content from an external domain of which you don't have any access. You cannot use either any one of the above cases. 


You may ask why I must access embedded iframe content loaded from an external domain. It may be for several reasons, for example you want to search for/read some specific data or collect some data from the user and post it to an external domain page and read the content. Then next question is how do I access embedded iframe content loaded from an external domain. One way is with a reverse proxy.
 
A reverse proxy is a type of proxy that will fetch content from external servers on behalf of your server. It is not the same as a forward proxy. A forward proxy will fetch content from an external server on behalf of client.
 
Forward Proxy
 
The client sends a request to an external domain, let's say http://www.xyz.com and the proxy forwards this request to the xyz.com server and sends the response back  to the client.
 
The client browser shows theURL "xyz.com". It means the proxy is just forwarding a request.
 
Cookies, if any are stored, are stored on the client machine with the xyz.com domain.

Reverse Proxy
 
All the client requests are handled by reverse proxy. For example the reverse proxy server "myserver.com" is configured with some rule, let's say whenever a request comes as "xyz.myserver.com" subdomain, the server must fetch the content from "www.xyz.com" and should send it back to the client. 
 
Still the client thinks he is connecting to xyz.myserver.com but not xyz.com. He had no idea that the actual content response is received from xyz.com. The client browser still shows "xyz.myserver.com."  
 
Cookies, if any are stored, are stored on the client machine with the myserver.com domain.

Application Request Routing(ARR) and URL Rewrite
 
Many reverse proxies are available in the market, Application Request Routing (ARR) is one of the them and is from Microsoft. It can be integrated with IIS. The ARR and URL Rewrite combination acts as a reverse proxy. 
 
Here, I'll not explain how ARR and URL rewrite works. Tons of tutorials are available on the web. Please visit ARR and URL Rewrite for more information.
 
You can configure the ARR reverse proxy to fetch content from external domains based on the incoming requests with URL rewrite rules. 
 
You can do main page and iframe cross domain communication.
 
Step 1:  Install ARR and URL Rewrite
 
Install ARR and URL Rewrite from IIS web platform installer. After installing, check ARR and URL Rewrite icons by clicking on the IIS server root node.
 
IIS.png
 

Step 2: Enable ARR proxy with default settings
 
Ensure Enable Proxy and Reverse rewrite checkboxes are checked, leave the other default settings as they are.
 
ARR.png
 
Step 3: Configure Sites and URL Rewrite rule for external domain 

You can configure main page and iframe domains in one of two ways; they are:
  1. As a URL path

    For example the main page URL can be http://www.myserver.com/main and the iframe URL can be http://www.myserver.com/xyz

    http://www.myserver.com/main mapped to your IIS server folder main.
               
    http://www.myserver.com/xyz  mapped to xyz folder and configured  with URL Rewrite (reverse proxy rule) to fetch content from xyz.com
     
  2. As a sub domain

    For example the main page URL can be http://www.myserver.com and the iframe URL can be http://xyz.myserver.com

    http://www.myserver.com mapped to your IIS server folder.
     
    http://xyz.myserver.com mapped to server folder xyz and  and configured with URL Rewrite (reverse proxy rule) to fetch content from xyz.com.

In this example I'll go for sub domain. For testing on the local machine, add entries www.myserver.com and xyz.myserver.com in your windows hosts file.
 

Configure your main website and iframe external website as in the following:

 
Main website
 
MyServer.png
 
External domain 
 
Xyz.png
 
URL Rewrite 
 
Choose the reverse proxy rule and add sites as in the following:
 
URLRewriteProxy.png
 
2. Inject:
document.domain='myserver.com'
for every response sent by myserver.com using the URL rewrite outbound rule. 
 
Create an URL Rewrite blank outbound rule as in the following:
 
 
DocumentDomain.png

 
Accessing iframe content from the main page and vice versa
 
You can access iframe content from the main page using an iframe element contentWindow and main page content from an iframe using window.parent.
 
Examples
 
From main page:
 
var iframeContent = document.getElementById('iframeelement').contentWindow.document.body.innerHTML  // iframe HTML content, check cross browser
 
From iframe:

var mainPageContent = window.parent.top.document.body.;
 
Summary
 
In this article, I discussed how to override the browser's same origin policy when communicating with an iframe pointing to an external domain.