Save 37% off PRO during our Black Friday Sale! »

JWT, WTF? at London Web Standards

JWT, WTF? at London Web Standards

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

8ec1383b240b5ba15ffb9743fceb3c0e?s=128

Phil Nash

April 24, 2017
Tweet

Transcript

  1. JWT, WTF?

  2. Phil Nash @philnash http:/ /philna.sh philnash@twilio.com @philnash

  3. EMOJIS! @philnash

  4. ARE YOU READY FOR SOME ABBREVIATIONS?

  5. JWT @philnash

  6. JSON WEB TOKEN @philnash

  7. RFC 7519 @philnash

  8. "JOT" @philnash

  9. THERE'S MORE

  10. JWS JWE JWK JWA @philnash

  11. RFCS 7515 7516 7517 7518 @philnash

  12. JOSE @philnash

  13. RFC 7520 @philnash

  14. AAARGH @philnash

  15. LET'S START AGAIN

  16. WHAT'S A JWT?

  17. JWT “JSON Web Token (JWT) is a compact, URL-safe means

    of representing claims to be transferred between two parties.” @philnash
  18. JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJzdWIiOiJwaGlsbmFzaEB0d2lsaW8uY29tIn0. l9vi8Dt8Pds3QTBqNMnQGU0wDDWDv46RFIcqeOIPqDk @philnash

  19. JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJzdWIiOiJwaGlsbmFzaEB0d2lsaW8uY29tIn0. l9vi8Dt8Pds3QTBqNMnQGU0wDDWDv46RFIcqeOIPqDk @philnash

  20. JWT { "alg": "HS256", "typ": "JWT" } { "sub": "philnash@twilio.com"

    } @philnash
  21. @philnash

  22. HOW DO THEY WORK?

  23. CREATING A JWT @philnash

  24. Creating a JWT const header = { "alg": "HS256", "typ":

    "JWT" } const payload = { "sub": "philnash@twilio.com" } @philnash
  25. ENCODE THE HEADER AND PAYLOAD @philnash

  26. Base64url encodedHeader = new Buffer(JSON.stringify(header)) .toString('base64') .replace(/=/g, "") .replace(/\+/g, "-")

    .replace(/\//g, "_"); @philnash
  27. Base64url encodedPayload = new Buffer(JSON.stringify(payload)) .toString('base64') .replace(/=/g, "") .replace(/\+/g, "-")

    .replace(/\//g, "_"); @philnash
  28. SIGN THE ENCODED HEADER AND PAYLOAD @philnash

  29. HMAC SHA256 const crypto = require('crypto'); const hmac = crypto.createHmac('sha256',

    'secret'); hmac.update(`${encodedHeader}.${encodedPayload}`); const signature = hmac.digest('base64'); @philnash
  30. The finished JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJzdWIiOiJwaGlsbmFzaEB0d2lsaW8uY29tIn0. l9vi8Dt8Pds3QTBqNMnQGU0wDDWDv46RFIcqeOIPqDk @philnash

  31. VERIFYING A JWT @philnash

  32. Verifying a JWT [ encodedHeader, encodedPayload, signature ] = jwt.split('.');

    @philnash
  33. Decode the header const decodedHeader = JSON.parse( new Buffer(encodedHeader, 'base64').toString('ascii')

    ) @philnash
  34. Decode the payload const decodedPayload = JSON.parse( new Buffer(encodedPayload, 'base64').toString('ascii')

    ) @philnash
  35. HMAC SHA256 const crypto = require('crypto'); const hmac = crypto.createHmac('sha256',

    'secret'); hmac.update(`${encodedHeader}.${encodedPayload}`); const generatedSignature = hmac.digest('base64'); @philnash
  36. Compare secureCompare(signature, generatedSignature); @philnash

  37. JWT Playground https:/ /jwt.io @philnash

  38. PITFALLS

  39. DATA IS PUBLIC @philnash

  40. SIGNING ALGORITHM @philnash

  41. JWT { "alg": "HS256", "typ": "JWT" } { "sub": "philnash@twilio.com"

    } @philnash
  42. JWT { "alg": "none" , "typ": "JWT" } { "sub":

    "philnash@twilio.com" } @philnash
  43. ALWAYS VERIFY WITH AN EXPECTED ALGORITHM @philnash

  44. PUBLIC KEYS AND ENCRYPTION @philnash

  45. WHAT CAN YOU USE THEM FOR?

  46. STATELESS SESSIONS @philnash

  47. 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
  48. Stateless sessions - storage • Cookies • ensure you have

    CSRF protection • localStorage • vulnerable to XSS • requires JS to store and insert as an Authentication header @philnash
  49. MICROSERVICE ARCHITECTURE @philnash

  50. Microservice architecture • Authentication server signs tokens with private key

    • Other servers can verify with public key @philnash
  51. OPENID CONNECT @philnash

  52. CLIENT SIDE AUTH FOR 3RD PARTY SERVICES @philnash

  53. JWT, WTF?

  54. JWT, WTF? • https:/ /jwt.io • RFC 7519 • JWTs

    VS Sessions • Stop using JWT for sessions • Use JWT the Right Way @philnash
  55. THANKS!

  56. Thanks! @philnash http:/ /philna.sh philnash@twilio.com @philnash