Angular Connect '17 - Intro to Web Security

Angular Connect '17 - Intro to Web Security

This talk has been presented at Angular Connect '17 and is giving an overview of different web security related things you should be aware of. The source code of the slides can be found here: https://github.com/dkundel/intro-web-security

0722ad084c65f6177d80cf793cfbd013?s=128

Dominik Kundel

November 07, 2017
Tweet

Transcript

  1. XSS, CSRF, CSP, JWT, WTF? IDK Dominik Kundel - @dkundel

    Dominik Kundel | @dkundel | #angularconnect
  2. Introduction to WEB SECURITY Dominik Kundel - @dkundel Dominik Kundel

    | @dkundel | #angularconnect
  3. Hi! I'm Dominik Kundel! Developer Evangelist at github/dkundel @dkundel dkundel@twilio.com

    Dominik Kundel | @dkundel | #angularconnect
  4. // Sending an SMS using the Twilio API // Twilio

    Credentials const accountSid = 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; const authToken = 'your_auth_token'; // require the Twilio module and create a REST client const client = require('twilio')(accountSid, authToken); client.messages .create({ to: '+16518675309', from: '+14158141829', body: 'The Force will be with you. Always.' }) .then(message => console.log(message.sid)); Add messaging, voice, video and authentication in your apps with the language you already use Dominik Kundel | @dkundel | #angularconnect
  5. Dominik Kundel | @dkundel | #angularconnect

  6. #onesiejs Dominik Kundel | @dkundel | #angularconnect

  7. Dominik Kundel | @dkundel | #angularconnect

  8. Dominik Kundel | @dkundel | #angularconnect

  9. SECURITY! SECURITY! SECURITY! Dominik Kundel | @dkundel | #angularconnect

  10. I THOUGHT OF EVERYTHING Only HTTPS powered by Let's Encrypt

    It even uses HSTS (HTTP Strict Transport Security) no mixed content Sanitized HTML No room for SQL injections Dominik Kundel | @dkundel | #angularconnect
  11. NO REAL DATABASE NO REAL DATABASE INJECTIONS Dominik Kundel |

    @dkundel | #angularconnect
  12. Dominik Kundel | @dkundel | #angularconnect

  13. BOB ALLISON Security Expert Dominik Kundel | @dkundel | #angularconnect

  14. https://onesie.life Dominik Kundel | @dkundel | #angularconnect

  15. USE COOKIES // Make cookies HTTP only res.cookie('authToken', jwt, {

    httpOnly: true, signed: true, secure: true }); Dominik Kundel | @dkundel | #angularconnect
  16. USE SAFE IMPLEMENTATIONS const jwt = require('jsonwebtoken'); jwt.verify(token, secret, {

    algorithms: ['HS256'] }, (err, payload) => { if (err) { console.log('Invalid token!'); return; } console.log('Valid token!'); }); Dominik Kundel | @dkundel | #angularconnect
  17. LET'S POST SOMETHING! onesie.life Feed Dominik Kundel | @dkundel |

    #angularconnect
  18. CROSS SITE REQUEST FORGERY hack-onesie.glitch.me/xsrf Dominik Kundel | @dkundel |

    #angularconnect
  19. WHAT HAPPENED? Dominik Kundel | @dkundel | #angularconnect

  20. window.opener.location = 'http://my-evil-website.com'; Dominik Kundel | @dkundel | #angularconnect

  21. USE <!-- Target page has access to window.opener --> <a

    href="http://example.com/" target="_blank">Dangerous Link</a> <!-- Target page does NOT have access to window.opener --> <a href="http://example.com" target="_blank" rel="noopener noreferrer">Saf e Link</a> Dominik Kundel | @dkundel | #angularconnect
  22. USE TOKENS const csrf = require('csurf')({ cookie: true }); app.get('/post',

    csrf, (req, res, next) => { // pass csrf to front-end via _csrf cookie or // req.csrfToken() in template }); app.post('/post', csrf, (req, res, next) => { // only valid if one of these is the same as the cookie: // req.body._csrf // req.query._csrf // req.headers['csrf-token'] // req.headers['xsrf-token'] // req.headers['x-csrf-token'] // req.headers['x-xsrf-token'] }); Dominik Kundel | @dkundel | #angularconnect
  23. Little Bobby Tables Young Brother Dominik Kundel | @dkundel |

    #angularconnect
  24. https://xkcd.com/327/ Dominik Kundel | @dkundel | #angularconnect

  25. Dominik Kundel | @dkundel | #angularconnect

  26. MYSPACE WORM Samy worm / JS.Spacehero worm Dominik Kundel |

    @dkundel | #angularconnect
  27. TRICKS USED BY SAMY <!-- Use JavaScript in CSS and

    move code into HTML attribute --> <div id="mycode" expr="alert('hah!')" style="background:url('javascript:eval(document.all.mycode.expr)')" ></div> // avoid blacklisted words like innerHTML through string concat alert(eval('document.body.inne' + 'rHTML')); eval('xmlhttp.onread' + 'ystatechange = callback'); samy.pl/popular/tech.html Dominik Kundel | @dkundel | #angularconnect
  28. OBSTRUSIVE JAVASCRIPT // Different ways to eval new Function(CODE)() //

    or setTimeout(CODE, 0) // or []["filter"]["constructor"]( CODE )() // or [][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[]) [+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]] +[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+ []+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![ ]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+ !+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[ ]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[]) [+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![] +[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+ (!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!! []+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![ Dominik Kundel | @dkundel | #angularconnect
  29. BLOCKING XSS IS NOT TRIVIAL onesie.life Dominik Kundel | @dkundel

    | #angularconnect
  30. ENCODING CAN BE dangerous! Dominik Kundel | @dkundel | #angularconnect

  31. JSONP JSON with Padding <script> function gotPosts(data) { console.log(data); }

    </script> <script src="https://onesie.life/post?callback=gotPosts"></script> Dominik Kundel | @dkundel | #angularconnect
  32. XSS + POOR JSONP = onesie.life Dominik Kundel | @dkundel

    | #angularconnect
  33. Dominik Kundel | @dkundel | #angularconnect

  34. CSP DEMO onesie.life/secure/home Dominik Kundel | @dkundel | #angularconnect

  35. CSP EXAMPLE HEADER Content-Security-Policy: default-src 'self'; script-src 'nonce-NWo2+pmewRLPWqpsgv6J2w=='; style-src 'nonce-NWo2+pmewRLPWqpsgv6J2w==';

    object-src 'none'; img-src 'self' api.adorable.io; font-src 'self' fonts.gstatic.com; block-all-mixed-content; report-uri /csp-report; Dominik Kundel | @dkundel | #angularconnect
  36. CSP IS NOT YOUR SECURITY STRATEGY! CSP is a Safety

    Net! Dominik Kundel | @dkundel | #angularconnect
  37. OTHER THINGS TO LOOK OUT FOR Avoid clickjacking by disallowing

    framing using Don't show versions of front-end libs or server Check for types of input(Can cause NoSQL injections) Dominik Kundel | @dkundel | #angularconnect
  38. OTHER THINGS TO DO Consider Security Audits Stay up to

    date with versions (Greenkeeper) Use tools to detect security vulnerabilites (Snyk) Dominik Kundel | @dkundel | #angularconnect
  39. Summary Dominik Kundel | @dkundel | #angularconnect

  40. USE SIGNED COOKIES Dominik Kundel | @dkundel | #angularconnect

  41. BE SCEPTICAL OF S Dominik Kundel | @dkundel | #angularconnect

  42. Dominik Kundel | @dkundel | #angularconnect

  43. USE TOKENS Dominik Kundel | @dkundel | #angularconnect

  44. BLOCKING ISN'T TRIVIAL Dominik Kundel | @dkundel | #angularconnect

  45. BE AWARE OF ENCODING Dominik Kundel | @dkundel | #angularconnect

  46. BE CAREFUL WITH Dominik Kundel | @dkundel | #angularconnect

  47. USE AS A SAFETY NET Dominik Kundel | @dkundel |

    #angularconnect
  48. STAY UP TO DATE Dominik Kundel | @dkundel | #angularconnect

  49. bit.ly/sec-angularconnect Dominik Kundel | @dkundel | #angularconnect

  50. bit.ly/onesie-life Dominik Kundel | @dkundel | #angularconnect

  51. Dominik Kundel Thank You! bit.ly/sec-angularconnect github/dkundel @dkundel dkundel@twilio.com Dominik Kundel

    | @dkundel | #angularconnect