Video: Security and the same-origin policy

Communicating across domains is a common problem for web application developers. Major browser vendors consistently implement a security policy called the same-origin policy. This prevents a script from one site from manipulating properties of a document loaded from another site. These different sites are called origins. This important security policy is effective in preventing session hijacking and phishing attacks, and like most effective security policies, it can be frustrating at times, like when you have a legitimate need to have scripts communicate with each other across different origins.

This course shows how to communicate between web pages, both within a single domain and across one or more domains, using the HTML5 Messaging API. Author Bill Weinman reviews security and the same origin policy, details cross-origin scripting techniques, and explores examples of cross-document messaging. The course describes how to register and send messages to listeners and handle errors.

Security and the same-origin policy

Communicating across domains is a common problem for web application developers.Major browser vendors consistently implement a security policy called thesame-origin policy.This prevents a script from one site from manipulating properties of a documentloaded from another site.These different sites are called origins.This important security policy is effective in preventing session hijacking andphishing attacks, and like most effective security policies, it can befrustrating at times, like when you have a legitimate need to have scriptscommunicate with each other across different origins.

So what exactly is an origin?An origin is made up of three components: the protocol, the host, and the port.If any of these three components are different, the origins are different.For example, if you have one document at this URL and another document at thisURL, are they in the same origin?These two URLs are in the same origin. They have the same protocol, the samehostname and they have the same port number, which in this case is the defaultport number, port number 80, because none is specified.

This URL is also in the same origin.The document itself is in a subdirectory, but that doesn't change the origin.The origin is not dependent on the directories; it's dependent only on theprotocol, the hostname, and the port number.This document, on the other hand, is in a different origin.You'll notice that the hostname is different because it says blog.instead of www. Even though that's the third level of the domain, it's still significant.Any difference in the hostname will make a difference in the origin.

This one is also a different origin because the protocol is different.Here it has https instead of http.And this one is also different. Even though the protocol and the hostname arethe same, this one specifies a port number that's different than port number 80.So let's take a look at an example so that we can see what happens when you tryto access an object across different origins.Here I have two documents that are loaded up at two different URLs that are ontwo different origins.

First of all, let's take a look at the documents.Especially for those of you who are following along at home without theexercise files, I'm just going to page through this really quickly so that youcan see the whole thing.And the same with the other document. That one is crossDomainOneError, andthis one here is crossDomainTwoError, and you'll notice that it's a little bit different.Now there is a lot of support stuff in these two documents, but for the mostpart all they do is one loads up the other in a frame and then it tries toaccess the title from that other document.

So here it is, loaded up in a browser, and they're on two different domains.The outer document is loaded up from the hostone.3sn.net, and these are just a couple of domains that I have that I use. Andthe inside one is loaded up from host two.3sn.net.And you notice that the error message comes up here that says, "Permission deniedto access property 'document'," and the reason for that is right here.Here we are, in document 2, and you'll notice in the init function, it loads upthis variable windowOne from parent, which is the window object from the parentwindow that loaded up the frame.

Remember, this document is inside of a frame.And then it tries to access the document title from that parent document,but it's in a different origin, and so you end up with this error.If instead I load them up from the same origin--and I can do that by coming inright here and just changing this hostname and I'll explain this trickery in a moment here.I'm just going to change it so that it's loading up a document off of the exactsame domain and it's exactly the same document.

And when I reload--I'm going to press Reload here--you'll notice that it works,and it's actually able to get that parent title.Now it's important that you understand how I have this set up, and you're going toneed to do something like this in order to efficiently play with these examplesand learn about the same-origin policy.I'm a big proponent of learning by experimenting and trying things and failingand figuring out why.So in order to do that, what you're going to need is to setup where you have theexample files on a server--not on your local machine on your Desktop, but ona server that you're accessing using domain names--and on that server you have several different domain names pointing at exactlythe same file system.

And so what I've done here is I have a cloud server at Rackspace, and youcan use any of the cloud server providers or whatever server youhave accessible to you.And I've simply used a few domains, and I've set up Apache so that those fewdomains point at exactly the same file system.So I have all these files up there once, but they're actually accessible fromone.3sn.net and two.3sn.net and three.3sn.net.Now in order to do this, you are of course going to need to use your own serverand your own domain names. And you really need to have some kind of a setup likethis in order to follow along with the examples in this course.

So the HTML5 messaging API provides an effective way to work around the same-origin policy, so that you can communicate with your own scripts on different origins.We'll take a look at how this works in detail in the rest of this course.

There are currently no FAQs about HTML5: Messaging and Communications in Depth.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.