Want to dive even deeper?

Take the course Spring Security by Eugen Paraschiv and become an expert!
Spring Security
by Eugen Paraschiv

Check it out!
You're watching a preview of this video, click the button on the left to puchase the full version from SpringOne.

Browser-side security: Mitigate the risk of XSS

The most secure application does nothing at all, which isn't particularly interesting in today's world of web interfaces with functionality we couldn't have dreamed of 2 years ago. We want to create these brilliant experiences, but doing so while ensuring that sensitive user data remains totally secure is a difficult proposition.

Here, we'll explore a few of the fortified bastions that modern browsers make available to us: Content Security Policy (and other interesting HTTP headers), sandboxed iframes, the Web Cryptography API, and MessagePorts give our applications the tools we need to lock down our applications and securely communicate cross-origin.


Published on
  • 3.060
  • 4
  • 2
  • 15
  • 0
  • No privilege, no risk A client-side security cornucopia Mike West https://mikewest.org G+: mkw.st/+ Twitter: @mikewest Slides: https://mkw.st/r/devoxx13 #DV13-security @mikewest
  • http://traumwerk.stanford.edu/philolog/2009/10/homers_odyssey_in_art_sirens_f.html
  • http://traumwerk.stanford.edu/philolog/2009/10/homers_odyssey_in_art_sirens_f.html
  • Step 0: Encrypt all traffic. "Enigma" - skittledog, http://flic.kr/p/9VjJz5
  • Set-Cookie: ...; secure; HttpOnly
  • Strict-Transport-Security: max-age=2592000; includeSubDomains
  • Public-Key-Pins: max-age=2592000; pin-sha256="4n972H…yw4uqe/baXc="
  • Limit Unanticipated Framing. "Framed in the Valley" - cobalt123, http://www.flickr.com/photos/cobalt/5354090310/
  • Click me! I am happy!
  • X-Frame-Options: DENY or X-Frame-Options: SAMEORIGIN
  • "X-Frame-Options: All about Clickjacking?" https://cure53.de/xfo-clickjacking.pdf
  • Prevent MIME-Type Sniffing. "Sniff" - tiny banquet committee, http://www.flickr.com/photos/tinybanquet/880076486
  • X-Content-Type-Options: nosniff
  • Mitigate content injection. "Finance - Financial Injection - Finance" - doug8888, http://www.flickr.com/photos/doug88888/4561376850/
  • scheme://host:port
  • <script> beAwesome(); </script> <script> beEvil(); </script>
  • <script> beAwesome(); </script> <!-- <p>Hello, {$name}!</p> --> <p>Hello, <script> beEvil(); </script></p>
  • <style> p { color: {{USER_COLOR}}; } </style> <p> Hello {{USER_NAME}}, view your <a href="{{USER_URL}}">Account</a>. </p> <script> var id = {{USER_ID}}; </script> <!-- DEBUG: {{INFO}} -->
  • "I discount the probability of perfection." -Alex Russell
  • "We are all idiots with deadlines." -Mike West
  • X-XSS-Protection: 1; mode=block or X-XSS-Protection: 0 but not X-XSS-Protection: 1
  • X-XSS-Protection: 1; mode=block; report=https://example.com/url
  • http://www.html5rocks.com/en/tutorials/security/content-security-policy/ https://mkw.st/r/csp
  • Content-Security-Policy: default-src 'none'; style-src https://mikewestdotorg.hasacdn.net; frame-src https://www.youtube.com https://www.speakerdeck.com; script-src https://mikewestdotorg.hasacdn.net https://ssl.google-analytics.com; img-src 'self' https://mikewestdotorg.hasacdn.net https://ssl.google-analytics.com; font-src https://mikewestdotorg.hasacdn.net
  • Content-Security-Policy: default-src ...; script-src ...; object-src ...; style-src ...; img-src ...; media-src ...; frame-src ...; font-src ...; connect-src ...; sandbox ...; report-uri https://example.com/reporter.cgi
  • Content-Security-Policy-Report-Only: default-src https:; report-uri https://example.com/csp-violations { "csp-report": { "document-uri": "http://example.org/page.html", "referrer": "http://evil.example.com/haxor.html", "blocked-uri": "http://evil.example.com/img.png", "violated-directive": "default-src 'self'", "original-policy": "...", "source-file": "http://example.com/script.js", "line-number": 10, "column-number": 11, } }
  • <script> function handleClick() { ... } </script> <button onclick="handleClick()">Click me!</button> <a href="javascript:handleClick()">Click me!</a>
  • <!-- index.html --> <script src="clickHandler.js"></script> <button class="clckr">Click me!</button> <a href="#" class="clckr">Click me!</a> <!-- clickHandler.js --> function handleClick() { ... } function init() { for (var e in document.querySelectorAll('.clckr')) e.addEventListener('click', handleClick); }
  • Content-Security-Policy: script-src 'nonce-afbvjn+afpo-j1qer'; <button class="clckr">Click me!</button> <a href="#" class="clckr">Click me!</a> <script nonce="afbvjn+afpo-j1qer"> function handleClick() { ... } function init() { var e; for (e in document.querySelectorAll('.clckr')) e.addEventListener('click', handleClick); } </script>
  • Content-Security-Policy: script-src 'sha256-afbvjn+...afpo-j1qer'; <button class="clckr">Click me!</button> <a href="#" class="clckr">Click me!</a> <script> function handleClick() { ... } function init() { var e; for (e in document.querySelectorAll('.clckr')) e.addEventListener('click', handleClick); } </script>
  • Limit IFrame Capabilities "Sandbox Shadow" - Scott Robinson, http://www.flickr.com/photos/clearlyambiguous/27454797
  • http://www.html5rocks.com/en/tutorials/security/content-security-policy/ https://mkw.st/r/csp
  • Limit IFrame Capabilities "Sandbox Shadow" - Scott Robinson, http://www.flickr.com/photos/clearlyambiguous/27454797
  • <iframe src="page.html" sandbox></iframe> <!-* Unique origin * No plugins. * No script. * No form submissions. * No top-level navigation. * No popups. * No autoplay. * No pointer lock. * No seamless iframes. -->
  • <iframe src="page.html" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation"> </iframe> <!-* No plugins. * No seamless iframes. -->
  • http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/ goo.gl/WJjv10
  • Secure Cross-Origin Communication "Vandalised Red Telephone Box" - Jon Pinder, http://www.flickr.com/photos/rofanator/5364666818
  • <script> var frame = document.querySelector('iframe'); frame.contentWindow.postMessage(message, 'example.com'); window.addEventListener('message', function (e) { if (e.origin === 'example.com') // Do something amazing in response! }); </script>
  • <script> var frame = document.querySelector('iframe'); frame.contentWindow.postMessage(message, '*'); window.addEventListener('message', function (e) { if (e.origin === "null" && e.source === frame.contentWindow) // Do something amazing in response! }); </script>
  • <script> window.addEventListener('message', function (e) { if (e.origin !== window.location.origin) return; // Do something amazing in response! e.source.postMessage(result, e.origin); }); </script>
  • <script> var channel = new MessageChannel(); // channel.port1 <-> channel.port2 frame.contentWindow.postMessage( 'init', '*', [ channel.port2 ]); channel.port1.postMessage(message); channel.port1.addEventListener('message', ...); </script>
  • Moar Encryption "Enigma" - skittledog, http://flic.kr/p/9VjJz5
  • http://nick.bleeken.eu/presentations/devoxx-2013/
  • https://mkw.st/r/devoxx13 Thanks! Mike West https://mikewest.org G+: mkw.st/+ Twitter: @mikewest Slides: https://mkw.st/r/devoxx13