JavaScript Security: Mastering Cross Domain Communications in complex JS applications
1 like928 views
The document discusses JavaScript security regarding cross-domain communication and emphasizes the need for secure data exchange between frontend applications and backend APIs. It explains the concepts of CORS (Cross-Origin Resource Sharing) and postMessage, comparing their use and security implications, while highlighting the importance of implementing Content Security Policy (CSP). The document also mentions potential security risks and best practices for ensuring secure interactions in web applications.
JavaScript Security: Mastering Cross Domain Communications in complex JS applications
- 1. Berlin, 2018-01-01 JavaScript Security Mastering Cross Domain Communications in complex JS applications Grill.js Wrocław, 2018-08-18, 7pm <thomas.witt@infopark.com> @thomas_witt linkedin.com/in/thomaswitt Thomas Witt Co-Founder
- 3. @thomas_witt
- 4. We're hiring! Boston · Berlin · Wrocław
- 7. The Problem
- 8. JS Applications need to exchange data with Backend APIs running on domains other than your own SECURELY
- 9. Challange Only load code from trusted origins, don't execute malicious JS code, don't let people steal your data.
- 10. Same Origin Policy For security reasons, browsers restrict cross- origin HTTP requests initiated from within scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request HTTP resources from the same origin the application was loaded from. – https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS “
- 11. How to … Exchange data from JS applications with backend APIs
- 12. Two ways how to talk to other services CORS postMessage
- 13. #1: CORS Cross-Origin Resource Sharing
- 14. Same Origin Policy A web application using those APIs can only request HTTP resources from the same origin the application was loaded from, unless the response from the other origin includes the right CORS headers. – https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS “
- 15. The easy one: Simple Requests
- 16. Simple GET request via CORS var req = new XMLHttpRequest(); var url = 'http://bar.other/resources/public-data/'; function callOtherDomain() { if(req) { req.open('GET', url, true); req.onreadystatechange = handler; req.send(); } }
- 17. Simple GET request via CORS var req = new XMLHttpRequest(); var url = 'http://bar.other/resources/public-data/'; function callOtherDomain() { if(req) { req.open('GET', url, true); req.onreadystatechange = handler; req.send(); } } GET /resources/public-data/ HTTP/1.1 Origin: http://foo.example HTTP/1.1 200 OK Access-Control-Allow-Origin: * Client (foo.example) Server (bar.other)
- 18. The uglyness: Preflight Requests aka not-so-simple-requests
- 19. Preflighted POST request via CORS var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/post-here/'; var body = '<?xml version="1.0"?><person><name>Thomas Witt</name></person>'; function callOtherDomain(){ if(invocation) { invocation.open('POST', url, true); invocation.setRequestHeader('Content-Type', 'application/xml'); invocation.onreadystatechange = handler; invocation.send(body); } }
- 20. Preflighted POST request via CORS - Overview Client (foo.example) Server (bar.other) OPTIONS /resources/post-here/ HTTP/1.1 Origin: http://foo.example Access-Control-Request-Method: POST Access-Control-Request-Headers: Content-Type HTTP/1.1 200 OK Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Methods: POST, GET Access-Control-Allow-Headers: Content-Type Access-Control-Max-Age: 86400 var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/post-here/'; var body = '<?xml version="1.0"?><person><name>Thomas Witt</name></person>'; function callOtherDomain(){ if(invocation) { invocation.open('POST', url, true); invocation.setRequestHeader('Content-Type', 'application/xml'); invocation.onreadystatechange = handler; invocation.send(body); } } POST /resources/post-here/ HTTP/1.1 Content-Type: text/xml; charset=UTF-8 Origin: http://foo.example HTTP/1.1 200 OK Access-Control-Allow-Origin: http://foo.example PreflightPhaseMainRequestPhase
- 21. For every new resource accessed, a preflight request will be issued.
- 24. CORS vs CSP CORS CORS allows a server (bar.other) to give permission to a site (foo.example) to read (potentially private) data from a server (bar.other), using the visitor's browser and credentials. CSP CSP allows a site (foo.example) to prevent itself from loading (potentially malicious) content from unexpected sources (e.g. against XSS). GET /resources/public-data/ HTTP/1.1 Origin: http://foo.example HTTP/1.1 200 OK Access-Control-Allow-Origin: * Content-Security-Policy: base-uri 'none'; default- src 'self' 'unsafe-inline' data: https: wss:; object- src 'none'; script-src 'self' https://beta- api.scrivito.com; upgrade-insecure-requests;
- 25. 0,133% of all 1M Alexa sites implement a CSP June 2015, "CSP adoption: current status and future prospects", Ming Ying / Shu Qin Li
- 26. Example Response: www.scrivito.com (shortened) HTTP/1.1 200 OK Connection: keep-alive Content-Encoding: gzip Content-Security-Policy: base-uri 'none'; default-src 'self' 'unsafe-inline' data: https: wss:; object-src 'none'; script-src 'self' https://assets.scrivito.com https://beta-api.scrivito.com https:// maps.googleapis.com https://www.google-analytics.com; upgrade-insecure-requests; Content-Type: text/html; charset=UTF-8 Date: Wed, 18 Aug 2018 19:00:00 GMT
- 28. CSP Directives https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src <script> <img> <link rel="stylesheet"> <style> <audio> <video> <iframe> @font-face WebSocket, XMLHttpRequest, EventSource <embed> <object>
- 29. script-src Values https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src self unsafe-inline unsafe-eval * none my.url.com <script src="/public/mylib.js" /> <script> alert('Hello JavaScript!'); </script> setTimeout(); eval(); All of it None of it Space-separated (*.js.com | api.js.com | https: | https://api.js.com | data:)
- 33. Our typical CSP Content-Security-Policy: base-uri 'none'; default-src 'self' https: wss:; script-src 'self' https://api.scrivito.com https://assets.scrivito.com https://www.google-analytics.com https://maps.googleapis.com https://whatever.service.you.need.com; object-src 'none'; upgrade-insecure-requests;
- 35. Every JavaScript application should have a CSP.
- 36. It will most likely break your site At the first try
- 37. script-src is most important
- 39. Test it!
- 40. CSP v1 Browser Support https://caniuse.com/#search=csp
- 41. CSP - further reading developer.mozilla.org/docs/Web/HTTP/CSP content-security-policy.com csp-evaluator.withgoogle.com cspvalidator.org caniuse.com/#feat=contentsecuritypolicy
- 43. Cross-domain communication via window.postMessage <iframe name="receiver" src="https://bar.other/my.js"> <script> let win = window.frames.receiver; win.postMessage("message", "https://bar.other"); </script> window.addEventListener("message", function(event) { if (event.origin != 'https://foo.example') { // Unknown domain? Ignore! return; } alert( "Rcvd: " + event.data ); }); Sender (foo.example) Receiver (bar.other)
- 44. That's it
- 45. window.postMessage vs CORS/CSP Advantages CORS is not very simple, postMessage is No pre-flight requests No need to modify HTTP headers Not convinced? Google uses it as well in it's Google API JS SDK <iframe name="receiver" src="https://bar.other/my.js"> <script> let win = window.frames.receiver; win.postMessage("message", "https://bar.other"); </script> window.addEventListener("message", function(event) { if (event.origin != 'https://foo.example') { // Unknown domain? Ignore! return; } alert( "Rcvd: " + event.data ); });
- 46. window.postMessage Security Security caveats No side can figure out whether malicious code has been inserted via XSS! Check-List Does the browser support postMessage? Is the message origin correct and known? Is the message data sanitized and validated? Are origins matched using strict equality (no indexOf(".foo.com") > 0)? Are messages sent without using wildcards in the origin? <iframe name="receiver" src="https://bar.other/my.js"> <script> let win = window.frames.receiver; win.postMessage("message", "https://bar.other"); </script> window.addEventListener("message", function(event) { if (event.origin != 'https://foo.example') { // Unknown domain? Ignore! return; } alert( "Rcvd: " + event.data ); });
- 48. Xdomain A pure JavaScript CORS alternative. No server configuration required - just add a proxy.html on the domain you wish to communicate with. – https://github.com/jpillora/xdomain “
- 49. window.postMessage - further reading developer.mozilla.org/docs/Web/API/Window/postMessage seclab.stanford.edu/websec/frames/post-message.pdf labs.detectify.com/2016/12/08/the-pitfalls-of-postmessage/ caniuse.com/#feat=x-doc-messaging
- 50. Summary
- 51. Always have a CSP!
- 52. Use postMessage instead of CORS when implementing Cross Domain Communication.
- 53. There's one more thing…
- 54. Bonus Tip #2: HSTS (You use TLS, right?)
- 55. Example Response: www.scrivito.com HTTP/1.1 200 OK Age: 83186 Cache-Control: public, max-age=0, must-revalidate Connection: keep-alive Content-Encoding: gzip Content-Length: 1313 Content-Security-Policy: base-uri 'none'; default-src 'self' 'unsafe-inline' data: https: wss:; object-src 'none'; script-src 'self' https://assets.scrivito.com https://beta-api.scrivito.com https:// maps.googleapis.com https://www.google-analytics.com; upgrade-insecure-requests; Content-Type: text/html; charset=UTF-8 Date: Wed, 15 Aug 2018 12:59:51 GMT Etag: "7cbc5a14104f9d58b476b606e830533b-ssl-df" Server: Netlify Strict-Transport-Security: max-age=31536000 Vary: Accept-Encoding
- 57. Your questions?
- 58. Can I haz question, please?