JWT, WTF? at JS Poland

We live in a world of rich client side applications, web and mobile, and we need a secure way to authenticate our users. Session IDs have been the traditional solution, but how well do they work for single page applications? And what about authenticating to 3rd party services? You can’t leave your credentials in the client, there’s always someone malicious just waiting to steal them.

Enter the JWT, or JSON Web Token. These fancy little tokens can authenticate our users and our transactions because they know what they’re allowed to do.

We’ll take a look at what JWTs can be used for, why to choose JWTs, how to generate them, and most importantly how to keep them secure. Finally, we’ll find out if putting abbreviations inside other abbreviations really is the secret to web security.

--

Links:

https://jwt.io
RFC 7519: https://tools.ietf.org/html/rfc7519
JWTs VS Sessions: https://float-middle.com/json-web-tokens-jwt-vs-sessions/
Stop using JWT for sessions: http://cryto.net/~joepie91/blog/2016/06/13/stop-using-jwt-for-sessions/
Use JWT the Right Way: https://stormpath.com/blog/jwt-the-right-way

Emoji Chat app: http://github.com/philnash/twilimoji
Twilio Programmable Chat access tokens (JWTs): https://www.twilio.com/docs/api/chat/guides/create-tokens

Transcript

1. JWT, WTF? JS Poland, 19th June 2017
2. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com @philnash
3. ARE YOU READY FOR SOME ABBREVIATIONS?
4. JWT @philnash
5. JSON WEB TOKEN @philnash
6. RFC 7519 @philnash
7. "JOT" @philnash
8. THERE'S MORE
9. JWS JWE JWK JWA @philnash
10. RFCS 7515 7516 7517 7518 @philnash
11. JOSE @philnash
12. RFC 7520 @philnash
13. AAARGH @philnash
14. LET'S START AGAIN
15. JWT, WTF?
16. JWTs • What are they? • What can you use them for? • How do they work? • Pitfalls @philnash
17. WHAT'S A JWT?
18. JWT “JSON Web Token (JWT) is a compact, URL-safe means of representing claims to be transferred between two parties.” @philnash
19. JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJzdWIiOiJwaGlsbmFzaEB0d2lsaW8uY29tIn0. l9vi8Dt8Pds3QTBqNMnQGU0wDDWDv46RFIcqeOIPqDk @philnash
20. JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJzdWIiOiJwaGlsbmFzaEB0d2lsaW8uY29tIn0. l9vi8Dt8Pds3QTBqNMnQGU0wDDWDv46RFIcqeOIPqDk @philnash
21. JWT { "alg": "HS256", "typ": "JWT" } { "sub": "philnash@twilio.com" } @philnash
22. @philnash
23. WHAT CAN YOU USE THEM FOR?
24. STATELESS SESSIONS @philnash
25. MICROSERVICE ARCHITECTURE @philnash
26. OPENID CONNECT @philnash
27. CLIENT SIDE AUTH FOR 3RD PARTY SERVICES @philnash
28. HTTPS:/ /BIT.LY/EMOJI-CHAT @philnash
29. HOW DO THEY WORK?
30. CREATING A JWT @philnash
31. Creating a JWT const header = { "alg": "HS256", "typ": "JWT" } const payload = { "sub": "philnash@twilio.com" } @philnash
32. CLAIMS @philnash
33. Header Claims "typ": "JWT" @philnash
34. Header Claims - Unsecured "alg": "none" @philnash
35. Header Claims - Secured "alg": "HS256" @philnash
36. Payload Claims "iss" - issuer "sub" - subject "aud" - audience "exp" - expires at "nbf" - not before "iat" - issued at "jti" - JWT ID @philnash
37. Payload Claims Anything you want! @philnash
38. Creating a JWT const header = { "alg": "HS256", "typ": "JWT" } const payload = { "sub": "philnash@twilio.com" } @philnash
39. ENCODE THE HEADER AND PAYLOAD @philnash
40. Base64url encodedHeader = new Buffer(JSON.stringify(header)) .toString('base64') .replace(/=/g, "") .replace(/\+/g, "-") .replace(/\//g, "_"); @philnash
41. Base64url encodedPayload = new Buffer(JSON.stringify(payload)) .toString('base64') .replace(/=/g, "") .replace(/\+/g, "-") .replace(/\//g, "_"); @philnash
42. SIGN THE ENCODED HEADER AND PAYLOAD @philnash
43. HMAC SHA256 const crypto = require('crypto'); const hmac = crypto.createHmac('sha256', 'secret'); hmac.update(`${encodedHeader}.${encodedPayload}`); const signature = hmac.digest('base64'); @philnash
44. The finished JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJzdWIiOiJwaGlsbmFzaEB0d2lsaW8uY29tIn0. l9vi8Dt8Pds3QTBqNMnQGU0wDDWDv46RFIcqeOIPqDk @philnash
45. VERIFYING A JWT @philnash
46. Verifying a JWT [ encodedHeader, encodedPayload, signature ] = jwt.split('.'); @philnash
47. Decode the header const decodedHeader = JSON.parse( new Buffer(encodedHeader, 'base64').toString('ascii') ) @philnash
48. Decode the payload const decodedPayload = JSON.parse( new Buffer(encodedPayload, 'base64').toString('ascii') ) @philnash
49. HMAC SHA256 const crypto = require('crypto'); const hmac = crypto.createHmac('sha256', 'secret'); hmac.update(`${encodedHeader}.${encodedPayload}`); const generatedSignature = hmac.digest('base64'); @philnash
50. Compare secureCompare(signature, generatedSignature); @philnash
51. JWT Playground https:/ /jwt.io @philnash
52. Finally, check the claims new Date(decodedPayload['exp']) < new Date(); @philnash
53. PITFALLS
54. DATA IS PUBLIC @philnash
55. SIGNING ALGORITHM @philnash
56. JWT { "alg": "HS256", "typ": "JWT" } { "sub": "philnash@twilio.com" } @philnash
57. JWT { "alg": "none" , "typ": "JWT" } { "sub": "philnash@twilio.com" } @philnash
58. ALWAYS VERIFY WITH AN EXPECTED ALGORITHM @philnash
59. PUBLIC KEYS AND ENCRYPTION @philnash
60. WHAT CAN YOU USE THEM FOR?
61. STATELESS SESSIONS @philnash
62. Stateless sessions - revocation • exp claim - token expiry time • Without state, you can't revoke individual tokens except by expiry • Requires a blacklist of revoked tokens to check against @philnash
63. Stateless sessions - storage • Cookies • ensure you have CSRF protection • localStorage • vulnerable to XSS • requires JS to store and insert as an Authentication header @philnash
64. MICROSERVICE ARCHITECTURE @philnash
65. Microservice architecture • Authentication server signs tokens with private key • Other servers can verify with public key @philnash
66. OPENID CONNECT @philnash
67. CLIENT SIDE AUTH FOR 3RD PARTY SERVICES @philnash
68. JWT, WTF?
69. JWT “JSON Web Token (JWT) is a compact, URL-safe means of representing claims to be transferred between two parties.” @philnash
70. JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJzdWIiOiJwaGlsbmFzaEB0d2lsaW8uY29tIn0. l9vi8Dt8Pds3QTBqNMnQGU0wDDWDv46RFIcqeOIPqDk @philnash
71. @philnash
72. JWT, WTF? • https:/ /jwt.io • RFC 7519 • JWTs VS Sessions • Stop using JWT for sessions • Use JWT the Right Way @philnash
73. THANKS!
74. Thanks! @philnash http:/ /philna.sh philnash@twilio.com @philnash