HTML and CSS Reference
The main problem in achieving the second type of communication is that all browsers prohibit what
is known as cross-domain communication due to security concerns. If cross-domain communication is
allowed, it's possible that a malicious web page may exploit this feature to cause security threats to your
Communication is said to be cross-domain if the origin of the two parties taking part in the
communication isn't the same. An origin consists of a scheme, a host, and a port. For example, consider
the origin http://www.domain1.com . In this URL, the scheme is http , the host is www.domain1.com , an d no
explicit port is specified. If two URLs don't have the same origin, they can't communicate with each other.
because their hosts are different. On the same lines, https://www.domain1.com an d http://www.domain1.
com are considered different origins because their schemes are different ( http and https ). However,
http://www.domain1.com/Page1.aspx an d http://www.domain1.com/Page2.aspx be long to the same origin.
Just because cross-domain communication poses security threats doesn't mean it's unsuitable in
every situation. Suppose you're building a network of web sites. Each web site is independent and provides
different content to the user. However, a member of the web-site network may want to share some features
(member chat, for example) with other web sites in the network. This is a genuine case of cross-domain
communication. Luckily, HTML5 understands the problems faced by developers today in achieving cross-
domain communication and provides two approaches for doing this:
• Cross-document messaging
• Cross-Origin Resource Sharing (CORS)
Let's look at these in more detail.
Cross-domain messaging refers to communication between two or more web pages belonging to different
origins, where one web page either embeds or opens another web page. Consider a case where a web page
of WebSite1 declares an <iframe> and embeds a web page of WebSite2 in that <iframe> . A similar situation
arises when a web page of WebSite1 opens a web page of WebSite2 using the window.open() method. In
both of these examples, the two web pages belong to different origins. If they wish to communicate with
one another, there was no easy and standard way prior to HTML5.
HTML5 facilitates cross-document messaging with the help of the postMessage API. This is a standard
approach that enables secure cross-origin communication across <iframe> elements, tabs, and windows.
To enable cross-document messaging using the postMessage API, you don't need to do any configuration
at the server end. The postMessage API is secure and doesn't pose a security threat because you need to
explicitly receive the messages in your web application. The web site receiving the request from a page
from another origin must explicitly make available specific pages for accepting the cross-document
requests. So, even if someone sends malicious script or data to you, there won't be any damage unless you
explicitly permit and receive that data. You'll understand this better when you develop a sample
application that uses the postMessage API.
n Note The postMessage API discussed in this chapter bears a striking resemblance to web workers as far as
syntax is concerned. That's because they use the same HTML5 messaging system. Web workers, however, serve an
entirely different purpose than the postMessage API.