Often, web developers keep hearing about "Same Origin Policy (SOP)" of browsers but live with half-knowledge or with several confusions. This session attempts to clear the misconceptions of SOP.

1. Content Isolation with
Same Origin Policy
Krishna Chaitanya T
Infosys Labs
Microsoft MVP, Internet Explorer

2. You know this is possible…
(why?)

3. Why not this?

4. Why?

5. Why not?

6. The big (small) picture
• WHO can access WHAT from WHERE,
HOW and WHY? Any IFs and BUTs? ;)
Site A Site B
Browsing Browsing
context of context of
Site A Site B

7. The questions…
• Can A get resources from B.com?
• Can A execute resources from B.com?
• Can A post content to B.com?
• Can A interfere with the DOM of B?
• Can A redirect a browsing context of B?

8. More questions…
• Can A read cookies/localStorage of B?
• What about http/https protocols
• How about different port numbers?
• Can chat.A.com communicate with A.com?
• Can blog.com/user1 talk to blog.com/user2?

9. Ok. Now enough of questions.
Let’s clear the confusion!

10. Same Origin Policy (SOP)
• Browser has to isolate different origins
• Origin = scheme://host:port
• https://mysite.com
• http://chat.mysite.com
• http://mysite.com:81/
• Privileges within origin
• Full network access, storage, read/write access to DOM

11. SOP facts…
• Script requests are not subjected to SOP!
• Frames have separate security contexts for
each origin.
• Frame Navigation Policy: Script in Frame A
can navigate Frame B (This is not SOP!)
• Access to HTML5 LocalStorage, Cookies*
is by SOP.

12. SOP facts…
• Browsers do not prevent cross domain
content inclusion!
• Examples:
<iframe src=“…”/>
<img src=“…”/>
<link rel=“stylesheet” href=“…”/>
• Information about user’s interaction can be
collected using events onload, onerror etc.

13. So how is cross origin communication feasible with
Same Origin Policy in place?
HACKS / SOP bypass

14. SOP Hacks
• JSONP – JSON with Padding
• Domain relaxation – document.domain
• Server side proxies
• JavaScript window.name hack
• Iframe hacks-Fragment Identifier
Messaging (FIM), Subspace etc.

15. Understanding JSONP
1. Create a JavaScript function (callback)
function processData(data){
console.log('Hello '+data.firstName+' '+data.lastName);
}
2. Pass valid JSON data & execute it
processData({firstName:'Krishna', lastName:'Chaitanya'});
3. Move the code in step 2 to external JS file
(Idea is to simulate server’s response). So
far it’s good.

16. Understanding JSONP
4. Configure server side code to respond to
the query string
<script src=“http://mysite.com/index.aspx?callback=processData”/>
5. Script loading is exempted from SOP, so
the code so far still works.
6. Wrap JSON data with function name.
processData({firstName:'Krishna', lastName:'Chaitanya'});

17. Domain relaxation
• Cooperating websites sharing common
TLDs can relax their origins
• “a.site.com” & “site.com” - different origins
• Both parties should set document.domain
document.domain=“site.com”
• Now sub domain enjoys same origin
benefits!

18. Surprisingly, there wasn’t a standard for cross origin
communication till recently. Only few clever hacks.
Here comes HTML5!

19. Genuine Cross Origin Access
• Client side - HTML5 PostMessage API
• Secure communication between frames
otherwindow.postMessage(message, targetOrigin);
//Posting message to a cross domain partner.
frames[0].postMessage(“Hello Partner!”,
"http://localhost:81/");
//Retrieving message from the sender
window.onmessage = function (e) {
if (e.origin == 'http://localhost') {
//sanitize and accept data
}
};

20. Genuine Cross Origin Access
• Server side – HTML5 CORS
• XHR enhanced for secure cross origin sharing
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
xhr.open("GET", "http://mysite.com", true);
xhr.send();
} else {
// Fallback behavior
}
• Server just needs to send this new header:
Access-Control-Allow-Origin: http://mysite.com (or) *
More about these in future events 

21. A better picture
Site A Site B
Browsing Browsing
context of context of
Site A Site B
AJAX
PostMessage (HTML5)
Cross Origin Resource Sharing (HTML5)
Server side proxy

22. Litmus Test ;)
If (!sleepy && !confused){
GoTo slide 2;
print(“Answer all questions till slide 8 correctly”);
}
else {
GoTo slide 9;
print(“Repeat”);
}

23. Thank You!
Twitter: @novogeek
Blog: http://novogeek.com