Understanding Same origin policy

Question

I am trying to understand same origin policy better. From what I understand same origin policy restricts code from one "origin" not access data from another "origin". What I am trying to understand is the context of this code. I can see that code across two tabs (example1.com and example2.com) cannot access data in each other's DOM. What about a page that loads code from both these sites? Is the restriction/security still hold in that case? This is a very valid use case as every site nowadays has code loaded from twitter, Facebook, google+ at the very least in addition to code from example1.com. So can code from twitter access the cookies set by example1.com? Or does same origin policy hold even in this case?

Of course in this case I am assuming the code is loaded from twitter, Facebook directly and not relayed from the example1.com server. I am also guessing the danger of XSS exists if the example1.com is relaying the code for twitter, Facebook etc. Am I right?

If I am right, how does the browser separate out the dom data for code loaded from each site when they are all loaded into the same page? How does it keep track of which data is allowed to be accessed by which code?

Answer 1

Going off your example of Twitter and Facebook, both of their army of scripts aren't reading the DOM or interacting with other scripts. If either tried to, say, get the value of a variable or something like that, then they'd be violating SOP.

The origin of a script is where it's included. So if you included Google's analytics scripts on your page it can interact with the DOM -- that's exactly why you can load jQuery from Google's CDN and have it work.

Here's a scenario. Let's pretend you own server one, and you want to include a cool "Like my page!" button from server two. In order for server two's button to work, it needs to load code from their servers. So, if you include <script src="servertwo.js"></script> you're including an actual file that can change your DOM because its "origin" is your page. It's "origin" is your page, even though the file is hosted on another server because your page is the one saying, "I want to use this file but it's located elsewhere."

If server two's JS file tried to load an additional script into your page, by inserting something like this: <script src=anyserverexceptforyourown.js"></script> then it'd be violating SOP if that script tried to change the DOM. Even though you loaded the original script, the second script that server two's JS tries to load didn't originate from your page like in the first portion of the example, so its origin would be from server two not your server.

---

On my personal website I have multiple scripts. Some of the scripts look like this:

<script src="http://www.ericlagergren.com/javascript.js"></script>

others look like this:

<script src="https://www.google-analytics.com/analytics.js"></script>

both of these "originate" from my website because I referenced them and asked to include them in my page.

If either of those two scripts tried to load an additional script into my page that third script would be violating SOP because I didn't explicitly ask to load it in my page. Make sense?