Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JWT, WTF? at JS Poland

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

Phil Nash

June 19, 2017
Tweet

More Decks by Phil Nash

Other Decks in Programming

Transcript

  1. JWT, WTF?
    JS Poland, 19th June 2017

    View Slide

  2. Phil Nash
    @philnash
    http:/
    /philna.sh
    [email protected]
    @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": "[email protected]"
    }
    @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": "[email protected]"
    }
    @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": "[email protected]"
    }
    @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": "[email protected]"
    }
    @philnash

    View Slide

  57. JWT
    {
    "alg": "none" ,
    "typ": "JWT"
    }
    {
    "sub": "[email protected]"
    }
    @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
    [email protected]
    @philnash

    View Slide