Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Mike West
PRO

August 30, 2013
Tweet

More Decks by Mike West

Other Decks in Programming

Transcript

  1. Frontend Security
    Mike West
    https://mikewest.org
    G+: mkw.st/+
    Twitter: @mikewest
    Video/Transcript:
    https://mkw.st/r/fec13

    View Slide

  2. http://www.html5rocks.com/en/tutorials/security/content-security-policy/
    https://mkw.st/r/csp

    View Slide

  3. View Slide

  4. XSS is scary.

    View Slide

  5. scheme://host:port

    View Slide

  6. <br/>beAwesome();<br/>
    <br/>beEvil();<br/>

    View Slide

  7. <br/>beAwesome();<br/>

    Hello, <br/>beEvil();<br/>!

    View Slide

  8. <br/>p { color: {{USER_COLOR}}; }<br/>

    Hello {{USER_NAME}}, view your
    Account.

    <br/>var id = {{USER_ID}};<br/>

    View Slide

  9. https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
    goo.gl/XE0aW

    View Slide

  10. [][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])
    [+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]][([][(![]+[])[+[[+[]]]]+([][[]]+[])
    [+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]
    +!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]
    +!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]
    +(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+([][[]]+[])[+[[+!+[]]]]+(![]+[])[+
    [[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[+!+[]]]]+([][[]]+[])[+[[+[]]]]+([][(![]+[])[+
    [[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+
    (!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+
    ([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+
    [])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]
    +!+[]]]]+(!![]+[])[+[[+!+[]]]]]((![]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[!+[]+!+
    []+!+[]]]]+(!![]+[])[+[[+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+
    []+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+
    (!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+[+!+[]]+([][(![]+[])[+[[+[]]]]+
    ([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+
    [[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]])()

    View Slide

  11. [][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])
    [+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]][([][(![]+[])[+[[+[]]]]+([][[]]+[])
    [+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]
    +!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]
    +!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]
    +(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+([][[]]+[])[+[[+!+[]]]]+(![]+[])[+
    [[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[+!+[]]]]+([][[]]+[])[+[[+[]]]]+([][(![]+[])[+
    [[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+
    (!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+
    ([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+
    [])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]
    +!+[]]]]+(!![]+[])[+[[+!+[]]]]]((![]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[!+[]+!+
    []+!+[]]]]+(!![]+[])[+[[+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+
    []+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+
    (!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+[+!+[]]+([][(![]+[])[+[[+[]]]]+
    ([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+
    [[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]])()
    alert(1);

    View Slide

  12. "I discount the
    probability of
    perfection."
    -Alex Russell

    View Slide

  13. "We are all idiots
    with deadlines."
    -Mike West

    View Slide

  14. http://traumwerk.stanford.edu/philolog/2009/10/homers_odyssey_in_art_sirens_f.html

    View Slide

  15. View Slide

  16. http://w3.org/TR/CSP11

    View Slide

  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

    View Slide

  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

    View Slide

  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,
    }
    }

    View Slide

  20. <br/>function handleClick() { ... }<br/>
    Click me!
    Click me!

    View Slide



  21. Click me!
    Click me!

    function handleClick() {
    ...
    }
    function init() {
    for (var e in document.querySelectorAll('.clickr'))
    e.addEventListener('click', handleClick);
    }

    View Slide

  22. http://www.html5rocks.com/en/tutorials/security/content-security-policy/
    https://mkw.st/r/csp

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  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/

    View Slide

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

    View Slide

  28. Set-Cookie: ...; secure; HttpOnly

    View Slide

  29. Public-Key-Pins:
    max-age=2592000;
    pin-sha1="4n972H…60yw4uqe/baXc="

    View Slide

  30. http://www.html5rocks.com/en/tutorials/security/transport-layer-security/
    goo.gl/0aMqHM

    View Slide



  31. View Slide

  32. sandbox="allow-forms allow-pointer-lock
    allow-popups allow-same-origin
    allow-scripts allow-top-navigation">


    View Slide


  33. seamless
    srcdoc="This is a comment!"
    sandbox>

    View Slide

  34. http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
    goo.gl/WJjv10

    View Slide

  35. https://mkw.st/r/fec13
    Danke!
    Mike West
    https://mikewest.org
    G+: mkw.st/+
    Twitter: @mikewest
    Video/Transcript: https://mkw.st/r/fec13

    View Slide