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
   

   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