Frontend Security - Frontend Conf Zurich: 2013-08-30

As the web platform grows in capability, we're moving more and more of our complex application logic down from the server to the client. This is a huge opportunity for frontend developers, but at the same time presents a tempting target for folks with malicious intent. It's more critical than ever to ensure that we're doing the right things with regard to security. Server-side best practice is well-understood: escape all output correctly, all the time. Given the number of successful content injection attacks seen in the wild, this obviously isn't as easy as it sounds.

Modern browsers are here to help. Here, we'll talk about some browser-side mechanisms like Content Security Policy that will deepen your defenses, and help mitigate the effects of cross-site scripting and other attacks.

Transcript

1. Frontend Security Mike West https://mikewest.org G+: mkw.st/+ Twitter: @mikewest Video/Transcript: https://mkw.st/r/fec13
2. http://www.html5rocks.com/en/tutorials/security/content-security-policy/ https://mkw.st/r/csp
4. XSS is scary.
5. scheme://host:port
6. <script> beAwesome(); </script> <script> beEvil(); </script>
7. <script> beAwesome(); </script> <!-- <p>Hello, {$name}!</p> --> <p>Hello, <script> beEvil(); </script>!</p>
8. <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}} -->
9. https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet goo.gl/XE0aW
10. [][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[]) [+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]][([][(![]+[])[+[[+[]]]]+([][[]]+[]) [+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[] +!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[] +!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]] +(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+([][[]]+[])[+[[+!+[]]]]+(![]+[])[+ [[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[+!+[]]]]+([][[]]+[])[+[[+[]]]]+([][(![]+[])[+ [[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+ (!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+ ([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+ [])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[] +!+[]]]]+(!![]+[])[+[[+!+[]]]]]((![]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[!+[]+!+ []+!+[]]]]+(!![]+[])[+[[+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+ []+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+ (!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+[+!+[]]+([][(![]+[])[+[[+[]]]]+ ([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+ [[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]])()
11. [][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[]) [+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]][([][(![]+[])[+[[+[]]]]+([][[]]+[]) [+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[] +!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[] +!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]] +(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+([][[]]+[])[+[[+!+[]]]]+(![]+[])[+ [[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[+!+[]]]]+([][[]]+[])[+[[+[]]]]+([][(![]+[])[+ [[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+ (!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+ ([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+ [])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[] +!+[]]]]+(!![]+[])[+[[+!+[]]]]]((![]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[!+[]+!+ []+!+[]]]]+(!![]+[])[+[[+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+ []+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+ (!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+[+!+[]]+([][(![]+[])[+[[+[]]]]+ ([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+ [[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]])() alert(1);
12. "I discount the probability of perfection." -Alex Russell
13. "We are all idiots with deadlines." -Mike West
14. http://traumwerk.stanford.edu/philolog/2009/10/homers_odyssey_in_art_sirens_f.html
16. http://w3.org/TR/CSP11
17. 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
18. 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
19. 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, } }
20. <script> function handleClick() { ... } </script> <button onclick="handleClick()">Click me!</button> <a href="javascript:handleClick()">Click me!</a>
21. <!-- index.html --> <script src="clickHandler.js"></script> <button class="clickr">Click me!</button> <a href="#" class="clickr">Click me!</a> <!-- clickHandler.js --> function handleClick() { ... } function init() { for (var e in document.querySelectorAll('.clickr')) e.addEventListener('click', handleClick); }
22. http://www.html5rocks.com/en/tutorials/security/content-security-policy/ https://mkw.st/r/csp
26. $ curl -I http://mkw.st/ HTTP/1.1 301 Moved Permanently Server: nginx/1.5.0 Date: Tue, 27 Aug 2013 19:36:15 GMT Content-Type: text/html Content-Length: 184 Connection: keep-alive Keep-Alive: timeout=20 Location: https://mkw.st/
27. $ curl -I https://mkw.st/ HTTP/1.1 200 OK Server: nginx/1.5.0 Date: Tue, 27 Aug 2013 19:42:31 GMT ... Strict-Transport-Security: max-age=2592000; includeSubDomains ...
28. Set-Cookie: ...; secure; HttpOnly
29. Public-Key-Pins: max-age=2592000; pin-sha1="4n972H…60yw4uqe/baXc="
30. http://www.html5rocks.com/en/tutorials/security/transport-layer-security/ goo.gl/0aMqHM
31. <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. -->
32. <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. -->
33. <!-- User-generated content? (in The Near Future™) --> <iframe seamless srcdoc="<p>This is a comment!</p>" sandbox></iframe>
34. http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/ goo.gl/WJjv10
35. https://mkw.st/r/fec13 Danke! Mike West https://mikewest.org G+: mkw.st/+ Twitter: @mikewest Video/Transcript: https://mkw.st/r/fec13