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