SlideShare a Scribd company logo

Browser Internals-Same Origin Policy

•Download as PPTX, PDF•
•
Krishna T
Krishna T

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 of 23
Content Isolation with Same Origin Policy Krishna Chaitanya T Infosys Labs Microsoft MVP, Internet Explorer
You know this is possible… (why?)
Why not this?
Why?
Why not?
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
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?
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?
Ok. Now enough of questions. Let’s clear the confusion!
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
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.
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.
So how is cross origin communication feasible with Same Origin Policy in place? HACKS / SOP bypass
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.
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.
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'});
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!
Surprisingly, there wasn’t a standard for cross origin communication till recently. Only few clever hacks. Here comes HTML5!
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 } };
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 
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
Litmus Test ;) If (!sleepy && !confused){ GoTo slide 2; print(“Answer all questions till slide 8 correctly”); } else { GoTo slide 9; print(“Repeat”); }
Thank You! Twitter: @novogeek Blog: http://novogeek.com

More Related Content

Browser Internals-Same Origin Policy

  • 1. Content Isolation with Same Origin Policy Krishna Chaitanya T Infosys Labs Microsoft MVP, Internet Explorer
  • 2. You know this is possible… (why?)
  • 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