HTML and CSS Reference
The <customHeaders> section of web.config allows you to add custom headers. In this case, the Access-
Control-Allow-Origin header is added and its value is set to * , indicating that all domains are allowed.
To implement CORS communication, HTML5 enhances the XMLHttpRequest object (these
improvements are collectively referred as Level 2 ) so that cross-domain HTTP requests can be made.
Now that you have a basic understanding of cross-document messaging and CORS, let's peek into the
code-level details of these techniques.
n Note A common way to fetch data from another origin without using any specific technology such as cross-
document messaging or CORS is JSONP: JSON with Padding. JSONP works on the basis that even though browsers
don't allow you to make cross-domain requests, they do allow you to use <script> tags that point to a remote
resource. In this technique, the script URL also specifies the name of a callback function in the query string. Instead
of returning JSON data, the remote resource returns a function call to this callback function with the JSON data as a
parameter. This technique suffers from the drawback that you must trust the remote server, which can pose a
Using the postMessage API
In order to use the postMessage API, you need a handle to the window of the target document. The target
document receives the data sent by the main web page. Optionally, the target document can return a value
to the main web page to indicate the result of the operation being performed. To obtain this handle, you
can use either of two common techniques:
• Use the <iframe> element in the main web page, and load the target web page in the
<iframe> . You can then use the contentWindow property of the <iframe> DOM
element to get a reference of the target window.
• Use the window.open() method in the main web page. This method returns the
reference to the target window object.
Using postMessage with <iframe>
Using the postMessage API with <iframe> involves embedding the target web page in the main page using
the <iframe> element and then sending data to the target page using the postMessage() method. Listing
11-2 shows the main web form with an <iframe> element.
Listing 11-2. Using the <iframe> Element to Embed a Target Web Form
<form id=”form1” runat=”server”>
<div>Send Data :</div>
<input id=”txtData” type=”text” /><input id=”btnSend” type=”button” value=”Send” />
<div>Data Received from Target Web Form :</div>
<h3>Target Page in IFRAME</h3>
<iframe id=”target” src=”http://localhost:1052/Target.aspx”>