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).

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

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:

When document.domain of the main page and the iframe are set with the same domain name
When HTTP headers contain Access-Control-Allow-Origin (cross origin resource)
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.

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.

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:

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
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

External domain

URL Rewrite

Choose the reverse proxy rule and add sites as in the following:

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:

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.