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
   

   View Slide

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

   View Slide

3. ARE YOU READY
   FOR SOME
   ABBREVIATIONS?
   

   View Slide

4. JWT
   @philnash
   

   View Slide

5. JSON WEB
   TOKEN
   @philnash
   

   View Slide

6. RFC 7519
   @philnash
   

   View Slide

7. "JOT"
   @philnash
   

   View Slide

8. THERE'S MORE
   

   View Slide

9. JWS JWE
   JWK JWA
   @philnash
   

   View Slide

10. RFCS
    7515 7516
    7517 7518
    @philnash
    

    View Slide

11. JOSE
    @philnash
    

    View Slide

12. RFC 7520
    @philnash
    

    View Slide

13. AAARGH
    @philnash
    

    View Slide

14. LET'S START
    AGAIN
    

    View Slide

15. JWT, WTF?
    

    View Slide

16. JWTs
    • What are they?
    • What can you use them for?
    • How do they work?
    • Pitfalls
    @philnash
    

    View Slide

17. WHAT'S A JWT?
    

    View Slide

18. JWT
    “JSON Web Token (JWT) is a compact, URL-safe
    means of representing claims to be transferred
    between two parties.”
    @philnash
    

    View Slide

19. JWT
    eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
    eyJzdWIiOiJwaGlsbmFzaEB0d2lsaW8uY29tIn0.
    l9vi8Dt8Pds3QTBqNMnQGU0wDDWDv46RFIcqeOIPqDk
    @philnash
    

    View Slide

20. JWT
    eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
    eyJzdWIiOiJwaGlsbmFzaEB0d2lsaW8uY29tIn0.
    l9vi8Dt8Pds3QTBqNMnQGU0wDDWDv46RFIcqeOIPqDk
    @philnash
    

    View Slide

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

    View Slide

22. @philnash
    

    View Slide

23. WHAT CAN YOU
    USE THEM FOR?
    

    View Slide

24. STATELESS
    SESSIONS
    @philnash
    

    View Slide

25. MICROSERVICE
    ARCHITECTURE
    @philnash
    

    View Slide

26. OPENID
    CONNECT
    @philnash
    

    View Slide

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

    View Slide

28. HTTPS:/
    /BIT.LY/EMOJI-CHAT
    @philnash
    

    View Slide

29. HOW DO THEY
    WORK?
    

    View Slide

30. CREATING A
    JWT
    @philnash
    

    View Slide

31. Creating a JWT
    const header = {
    "alg": "HS256",
    "typ": "JWT"
    }
    const payload = {
    "sub": "philnash@twilio.com"
    }
    @philnash
    

    View Slide

32. CLAIMS
    @philnash
    

    View Slide

33. Header Claims
    "typ": "JWT"
    @philnash
    

    View Slide

34. Header Claims - Unsecured
    "alg": "none"
    @philnash
    

    View Slide

35. Header Claims - Secured
    "alg": "HS256"
    @philnash
    

    View Slide

36. Payload Claims
    "iss" - issuer
    "sub" - subject
    "aud" - audience
    "exp" - expires at
    "nbf" - not before
    "iat" - issued at
    "jti" - JWT ID
    @philnash
    

    View Slide

37. Payload Claims
    Anything you want!
    @philnash
    

    View Slide

38. Creating a JWT
    const header = {
    "alg": "HS256",
    "typ": "JWT"
    }
    const payload = {
    "sub": "philnash@twilio.com"
    }
    @philnash
    

    View Slide

39. ENCODE THE
    HEADER AND
    PAYLOAD
    @philnash
    

    View Slide

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

    View Slide

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

    View Slide

42. SIGN THE
    ENCODED
    HEADER AND
    PAYLOAD
    @philnash
    

    View Slide

43. HMAC SHA256
    const crypto = require('crypto');
    const hmac = crypto.createHmac('sha256', 'secret');
    hmac.update(`${encodedHeader}.${encodedPayload}`);
    const signature = hmac.digest('base64');
    @philnash
    

    View Slide

44. The finished JWT
    eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
    eyJzdWIiOiJwaGlsbmFzaEB0d2lsaW8uY29tIn0.
    l9vi8Dt8Pds3QTBqNMnQGU0wDDWDv46RFIcqeOIPqDk
    @philnash
    

    View Slide

45. VERIFYING A
    JWT
    @philnash
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

49. HMAC SHA256
    const crypto = require('crypto');
    const hmac = crypto.createHmac('sha256', 'secret');
    hmac.update(`${encodedHeader}.${encodedPayload}`);
    const generatedSignature = hmac.digest('base64');
    @philnash
    

    View Slide

50. Compare
    secureCompare(signature, generatedSignature);
    @philnash
    

    View Slide

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

    View Slide

52. Finally, check the claims
    new Date(decodedPayload['exp']) < new Date();
    @philnash
    

    View Slide

53. PITFALLS
    

    View Slide

54. DATA IS PUBLIC
    @philnash
    

    View Slide

55. SIGNING
    ALGORITHM
    @philnash
    

    View Slide

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

    View Slide

57. JWT
    {
    "alg": "none" ,
    "typ": "JWT"
    }
    {
    "sub": "philnash@twilio.com"
    }
    @philnash
    

    View Slide

58. ALWAYS VERIFY
    WITH AN
    EXPECTED
    ALGORITHM
    @philnash
    

    View Slide

59. PUBLIC KEYS
    AND
    ENCRYPTION
    @philnash
    

    View Slide

60. WHAT CAN YOU
    USE THEM FOR?
    

    View Slide

61. STATELESS
    SESSIONS
    @philnash
    

    View Slide

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
    

    View Slide

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
    

    View Slide

64. MICROSERVICE
    ARCHITECTURE
    @philnash
    

    View Slide

65. Microservice architecture
    • Authentication server signs tokens with private
    key
    • Other servers can verify with public key
    @philnash
    

    View Slide

66. OPENID
    CONNECT
    @philnash
    

    View Slide

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

    View Slide

68. JWT, WTF?
    

    View Slide

69. JWT
    “JSON Web Token (JWT) is a compact, URL-safe
    means of representing claims to be transferred
    between two parties.”
    @philnash
    

    View Slide

70. JWT
    eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
    eyJzdWIiOiJwaGlsbmFzaEB0d2lsaW8uY29tIn0.
    l9vi8Dt8Pds3QTBqNMnQGU0wDDWDv46RFIcqeOIPqDk
    @philnash
    

    View Slide

71. @philnash
    

    View Slide

72. JWT, WTF?
    • https:/
    /jwt.io
    • RFC 7519
    • JWTs VS Sessions
    • Stop using JWT for sessions
    • Use JWT the Right Way
    @philnash
    

    View Slide

73. THANKS!
    

    View Slide

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

    View Slide