Content Isolation withSame Origin Policy     Krishna Chaitanya T         Infosys LabsMicrosoft 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 ...
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 ...
More questions…• Can A read cookies/localStorage of B?• What about http/https protocols• How about different port numbers?...
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  • h...
SOP facts…• Script requests are not subjected to SOP!• Frames have separate security contexts for  each origin.• Frame Nav...
SOP facts…• Browsers do not prevent cross domain  content inclusion!• Examples:    <iframe src=“…”/>    <img src=“…”/>    ...
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 hac...
Understanding JSONP1. Create a JavaScript function (callback)   function processData(data){              console.log(Hello...
Understanding JSONP4. Configure server side code to respond to   the query string   <script src=“http://mysite.com/index.a...
Domain relaxation• Cooperating websites sharing common  TLDs can relax their origins• “a.site.com” & “site.com” - differen...
Surprisingly, there wasn’t a standard for cross origin communication till recently. Only few clever hacks.         Here co...
Genuine Cross Origin Access• Client side - HTML5 PostMessage API  • Secure communication between frames      otherwindow.p...
Genuine Cross Origin Access• Server side – HTML5 CORS  • XHR enhanced for secure cross origin sharing     var xhr = new XM...
A better picture Site A                      Site B Browsing                   Browsing context of                 context...
Litmus Test ;) If (!sleepy && !confused){          GoTo slide 2;          print(“Answer all questions till slide 8 correct...
Thank You!Twitter: @novogeekBlog: http://novogeek.com
Upcoming SlideShare
Loading in...5
×

Browser Internals-Same Origin Policy

4,603

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,603
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
60
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Browser Internals-Same Origin Policy

  1. 1. Content Isolation withSame Origin Policy Krishna Chaitanya T Infosys LabsMicrosoft MVP, Internet Explorer
  2. 2. You know this is possible… (why?)
  3. 3. Why not this?
  4. 4. Why?
  5. 5. Why not?
  6. 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. 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. 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. 9. Ok. Now enough of questions. Let’s clear the confusion!
  10. 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. 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. 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. 13. So how is cross origin communication feasible with Same Origin Policy in place? HACKS / SOP bypass
  14. 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. 15. Understanding JSONP1. 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. 16. Understanding JSONP4. 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. 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. 18. Surprisingly, there wasn’t a standard for cross origin communication till recently. Only few clever hacks. Here comes HTML5!
  19. 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. 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. 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. 22. Litmus Test ;) If (!sleepy && !confused){ GoTo slide 2; print(“Answer all questions till slide 8 correctly”); } else { GoTo slide 9; print(“Repeat”); }
  23. 23. Thank You!Twitter: @novogeekBlog: http://novogeek.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×