Pro Yearly is on sale from $80 to $50! »

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

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.

3c27881a0d8695811b0fa23bd794e696?s=128

Mike West

August 30, 2013
Tweet

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

  3. None
  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

  15. None
  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

  23. None
  24. None
  25. None
  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