HTML and CSS Reference
In-Depth Information
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
security threat.
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>
<div id=”divReceived”></div>
<h3>Target Page in IFRAME</h3>
<iframe id=”target” src=”http://localhost:1052/Target.aspx”>
</iframe>
</form>
