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

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