Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WTH IS A JWT
IT’S NOT PRONOUNCED ‘JOT’
WTH IS A JWT
IT’S NOT PRONOUNCED ‘JOT’
@joel__lord #AllThingsOpen
WTH IS A JWT
ABOUT ME
@joel__lord
joellord
@joel__lord #AllThingsOpen
WTH IS A JWT
SPA BEST PRACTICES
@joel__lord #AllThingsOpen
WTH IS A JWT
SPA BEST PRACTICES
▸ …
@joel__lord
joellord
All Things Open, Raleigh, NC
October 23th, 2018
THANK YOU
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
https://myserver.com
@joel__lord #AllThingsOpen
https://myserver.com
@joel__lord #AllThingsOpen
https://myserver.com User
@joel__lord #AllThingsOpen
https://myserver.com User
@joel__lord #AllThingsOpen
https://myserver.com User
@joel__lord #AllThingsOpen
https://myserver.com User
@joel__lord #AllThingsOpen
https://myserver.com User
🔗
@joel__lord #AllThingsOpen
https://myserver.com User
🔗
⛔
@joel__lord #AllThingsOpen
https://myserver.com User
@joel__lord #AllThingsOpen
https://myserver.com User
@joel__lord #AllThingsOpen
https://myserver.com User
@joel__lord #AllThingsOpen
https://myserver.com User
@joel__lord #AllThingsOpen
https://api.myserver.com
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
❓
JSON WEB
TOKENS
INTRODUCING
@joel__lord #AllThingsOpen
WTH IS A JWT
JSON WEB TOKENS
▸ JWT's (RFC 7519) are an open
industry standard  method for
repre...
@joel__lord #AllThingsOpen
WTH IS A JWT
JSON WEB TOKENS
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6Ikp
XVCJ9.eyJzdWIiOjEsInNjb3BlIjoiY
...
@joel__lord #AllThingsOpen
WTH IS A JWT
A SIMPLE ANALOGY
▸ How is a Drivers License like a JSON Web Token?
▸ eyJhbGciOiJIU...
@joel__lord #AllThingsOpen
WTH IS A JWT
A SIMPLE ANALOGY
▸ How is a Drivers License like a JSON Web Token?
▸ eyJhbGciOiJIU...
@joel__lord #AllThingsOpen
WTH IS A JWT
HEADER
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQ...
@joel__lord #AllThingsOpen
WTH IS A JWT
HEADER
▸ Drivers Licence
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb...
@joel__lord #AllThingsOpen
WTH IS A JWT
HEADER
▸ Drivers Licence
▸ Province of Quebec
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVC...
@joel__lord #AllThingsOpen
WTH IS A JWT
HEADER
▸ eyJhbGciOiJIUzI1NiIsInR5c
CI6IkpXVCJ9
▸ Drivers Licence
▸ Province of Que...
@joel__lord #AllThingsOpen
WTH IS A JWT
HEADER
▸ atob(“eyJhbGciOiJIUzI1NiI
sInR5cCI6IkpXVCJ9”);
▸ Drivers Licence
▸ Provin...
@joel__lord #AllThingsOpen
WTH IS A JWT
HEADER
{
"alg": "HS256",
"typ": "JWT"
}
▸ Drivers Licence
▸ Province of Quebec
▸ e...
@joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYW...
@joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
▸ Picture
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoi...
@joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
▸ Picture
▸ Name
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb...
@joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
▸ Picture
▸ Name
▸ Date of Birth
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ey...
@joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
▸ Picture
▸ Name
▸ Date of Birth
▸ Restrictions
▸ eyJhbGciOiJIUzI1NiIsInR5...
@joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
eyJzdWIiOjEsInNjb3BlIjoiYXBpOnJlYWQiL
CJ1c2VybmFtZSI6ImpvZWxsb3JkIiwiaXNzI...
@joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
atob(“eyJzdWIiOjEsInNjb3BlIjoiYXBpOnJlY
WQiLCJ1c2VybmFtZSI6ImpvZWxsb3JkIiw...
@joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
{
"sub": 1,
"scope": "api:read",
"username": "joellord",
"iss": "my-small-...
@joel__lord #AllThingsOpen
WTH IS A JWT
SIGNATURE
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJl...
@joel__lord #AllThingsOpen
WTH IS A JWT
SIGNATURE
▸ Holograms
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3Bl...
@joel__lord #AllThingsOpen
WTH IS A JWT
SIGNATURE
▸ Holograms
▸ Signature
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
Ii...
@joel__lord #AllThingsOpen
WTH IS A JWT
SIGNATURE
gEY3pRSdrnK5VtJI6E9vgada
OQuLNWILBvvGasR4CRk
▸ Holograms
▸ Signature
▸ e...
@joel__lord #AllThingsOpen
WTH IS A JWT
SIGNATURE
HMACSHA256(
`${header}.${payload}`,
“mysupersecret”
);
▸ Holograms
▸ Sig...
@joel__lord #AllThingsOpen
WTH IS A JWT
SIGNATURE
HMACSHA256(
`${header}.${payload}`,
“mysupersecret”
);
▸ Holograms
▸ Sig...
@joel__lord #AllThingsOpen
WTH IS A JWT
SIGNATURE
HMACSHA256(
`${header}.${payload}`,
“mysupersecret”
);
▸ Holograms
▸ Sig...
@joel__lord #AllThingsOpen
WTH IS A JWT
A TOKEN WALKS INTO A BAR
@joel__lord #AllThingsOpen
WTH IS A JWT
A TOKEN WALKS INTO A BAR
📝
@joel__lord #AllThingsOpen
WTH IS A JWT
A TOKEN WALKS INTO A BAR
📝
@joel__lord #AllThingsOpen
WTH IS A JWT
A TOKEN WALKS INTO A BAR
📝
@joel__lord #AllThingsOpen
WTH IS A JWT
A TOKEN WALKS INTO A BAR
📝
@joel__lord #AllThingsOpen
WTH IS A JWT
A TOKEN WALKS INTO A BAR
📝
👍
@joel__lord #AllThingsOpen
WTH IS A JWT
A TOKEN WALKS INTO A BAR
@joel__lord #AllThingsOpen
WTH IS A JWT
A TOKEN WALKS INTO A BAR
💰
@joel__lord #AllThingsOpen
WTH IS A JWT
A TOKEN WALKS INTO A BAR
💰
@joel__lord #AllThingsOpen
WTH IS A JWT
A TOKEN WALKS INTO A BAR
💰
@joel__lord #AllThingsOpen
WTH IS A JWT
A TOKEN WALKS INTO A BAR
💰
✋
DEMO
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
/api/cats
🔗
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
/api/book
🔗
✋
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
/api/cats
🔗
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
https://api.myserver.com
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com
@joel__lord #AllThingsOpen
https://api.myserver.com https://myapplication.com https://login.myserver.com
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
/authorize
@joel__lord #AllThingsOpen
/authorize
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
/api/cats
@joel__lord #AllThingsOpen
/api/cats
@joel__lord #AllThingsOpen
/api/cats
@joel__lord #AllThingsOpen
WTH IS A JWT
SENDING THE TOKEN TO THE API
▸ Using Axios
@joel__lord #AllThingsOpen
WTH IS A JWT
SENDING THE TOKEN TO THE API
▸ Using Fetch
@joel__lord #AllThingsOpen
WTH IS A JWT
SENDING THE TOKEN TO THE API
@joel__lord #AllThingsOpen
❓
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
/authorize
@joel__lord #AllThingsOpen
/authorize
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
🔄
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
▸ You can never completely secure your front-end using
JWTs
▸ ...
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
WTH IS A JWT
“SECURING” YOUR SPA
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
@joel__lord #AllThingsOpen
)
@joel__lord #AllThingsOpen
WTH IS A JWT
RESOURCES
▸ General JWT resource
▸ jwt.io
@joel__lord #AllThingsOpen
WTH IS A JWT
RESOURCES
▸ General JWT resource
▸ jwt.io
▸ Overview of JWT Signing Algorithms
▸ b...
@joel__lord #AllThingsOpen
WTH IS A JWT
RESOURCES
▸ General JWT resource
▸ jwt.io
▸ Overview of JWT Signing Algorithms
▸ b...
@joel__lord #AllThingsOpen
WTH IS A JWT
SUMMARY
▸ Single Page Application security is mainly concerned
with authorization. 
@joel__lord #AllThingsOpen
WTH IS A JWT
SUMMARY
▸ Single Page Application security is mainly concerned
with authorization....
@joel__lord #AllThingsOpen
WTH IS A JWT
SUMMARY
▸ Single Page Application security is mainly concerned
with authorization....
@joel__lord
joellord
All Things Open, Raleigh, NC
October 23rd, 2018
THANK YOU
TEXT
TEXT
WTH is a JWT
WTH is a JWT
WTH is a JWT
Upcoming SlideShare
Loading in …5
×

WTH is a JWT

732 views

Published on

Chances are sooner or later your shiny new single page application will need authentication. Add some security and resource access control to that list as well. But how can we integrate all of this into a single page application that is entirely public? How can we ensure that our users only have access to the resources they are authorized to by hacking way in via the console? In this talk, the attendees will learn about l JSON Web Tokens (JWT) and see how they can be used to properly secure single page applications.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

WTH is a JWT

  1. 1. WTH IS A JWT IT’S NOT PRONOUNCED ‘JOT’
  2. 2. WTH IS A JWT IT’S NOT PRONOUNCED ‘JOT’
  3. 3. @joel__lord #AllThingsOpen WTH IS A JWT ABOUT ME @joel__lord joellord
  4. 4. @joel__lord #AllThingsOpen WTH IS A JWT SPA BEST PRACTICES
  5. 5. @joel__lord #AllThingsOpen WTH IS A JWT SPA BEST PRACTICES ▸ …
  6. 6. @joel__lord joellord All Things Open, Raleigh, NC October 23th, 2018 THANK YOU
  7. 7. @joel__lord #AllThingsOpen
  8. 8. @joel__lord #AllThingsOpen https://myserver.com
  9. 9. @joel__lord #AllThingsOpen https://myserver.com
  10. 10. @joel__lord #AllThingsOpen https://myserver.com User
  11. 11. @joel__lord #AllThingsOpen https://myserver.com User
  12. 12. @joel__lord #AllThingsOpen https://myserver.com User
  13. 13. @joel__lord #AllThingsOpen https://myserver.com User
  14. 14. @joel__lord #AllThingsOpen https://myserver.com User 🔗
  15. 15. @joel__lord #AllThingsOpen https://myserver.com User 🔗 ⛔
  16. 16. @joel__lord #AllThingsOpen https://myserver.com User
  17. 17. @joel__lord #AllThingsOpen https://myserver.com User
  18. 18. @joel__lord #AllThingsOpen https://myserver.com User
  19. 19. @joel__lord #AllThingsOpen https://myserver.com User
  20. 20. @joel__lord #AllThingsOpen https://api.myserver.com
  21. 21. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com
  22. 22. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com
  23. 23. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com
  24. 24. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com
  25. 25. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com
  26. 26. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com
  27. 27. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com ❓
  28. 28. JSON WEB TOKENS INTRODUCING
  29. 29. @joel__lord #AllThingsOpen WTH IS A JWT JSON WEB TOKENS ▸ JWT's (RFC 7519) are an open industry standard  method for representing claims securely between two parties.
  30. 30. @joel__lord #AllThingsOpen WTH IS A JWT JSON WEB TOKENS ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6Ikp XVCJ9.eyJzdWIiOjEsInNjb3BlIjoiY XBpOnJlYWQiLCJ1c2VybmFtZSI6I mpvZWxsb3JkIiwiaXNzIjoibXktc21 hbGwtYXV0aC1zZXJ2ZXIiLCJhdW QiOiJteS1yYW5kb20tY2xpY2tiYW l0LWFwaSIsImlhdCI6MTUzNzg5M TQyOCwiZXhwIjoxNTM3ODkyMDI 4fQ.gEY3pRSdrnK5VtJI6E9vgada OQuLNWILBvvGasR4CRk
  31. 31. @joel__lord #AllThingsOpen WTH IS A JWT A SIMPLE ANALOGY ▸ How is a Drivers License like a JSON Web Token? ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6Ikp XVCJ9.eyJzdWIiOjEsInNjb3BlIjoiY XBpOnJlYWQiLCJ1c2VybmFtZSI6I mpvZWxsb3JkIiwiaXNzIjoibXktc21 hbGwtYXV0aC1zZXJ2ZXIiLCJhdW QiOiJteS1yYW5kb20tY2xpY2tiYW l0LWFwaSIsImlhdCI6MTUzNzg5M TQyOCwiZXhwIjoxNTM3ODkyMDI 4fQ.gEY3pRSdrnK5VtJI6E9vgada OQuLNWILBvvGasR4CRk
  32. 32. @joel__lord #AllThingsOpen WTH IS A JWT A SIMPLE ANALOGY ▸ How is a Drivers License like a JSON Web Token? ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6Ikp XVCJ9.eyJzdWIiOjEsInNjb3BlIjoiY XBpOnJlYWQiLCJ1c2VybmFtZSI6I mpvZWxsb3JkIiwiaXNzIjoibXktc21 hbGwtYXV0aC1zZXJ2ZXIiLCJhdW QiOiJteS1yYW5kb20tY2xpY2tiYW l0LWFwaSIsImlhdCI6MTUzNzg5M TQyOCwiZXhwIjoxNTM3ODkyMDI 4fQ.gEY3pRSdrnK5VtJI6E9vgada OQuLNWILBvvGasR4CRk
  33. 33. @joel__lord #AllThingsOpen WTH IS A JWT HEADER ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  34. 34. @joel__lord #AllThingsOpen WTH IS A JWT HEADER ▸ Drivers Licence ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  35. 35. @joel__lord #AllThingsOpen WTH IS A JWT HEADER ▸ Drivers Licence ▸ Province of Quebec ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  36. 36. @joel__lord #AllThingsOpen WTH IS A JWT HEADER ▸ eyJhbGciOiJIUzI1NiIsInR5c CI6IkpXVCJ9 ▸ Drivers Licence ▸ Province of Quebec ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  37. 37. @joel__lord #AllThingsOpen WTH IS A JWT HEADER ▸ atob(“eyJhbGciOiJIUzI1NiI sInR5cCI6IkpXVCJ9”); ▸ Drivers Licence ▸ Province of Quebec ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  38. 38. @joel__lord #AllThingsOpen WTH IS A JWT HEADER { "alg": "HS256", "typ": "JWT" } ▸ Drivers Licence ▸ Province of Quebec ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  39. 39. @joel__lord #AllThingsOpen WTH IS A JWT PAYLOAD ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  40. 40. @joel__lord #AllThingsOpen WTH IS A JWT PAYLOAD ▸ Picture ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  41. 41. @joel__lord #AllThingsOpen WTH IS A JWT PAYLOAD ▸ Picture ▸ Name ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  42. 42. @joel__lord #AllThingsOpen WTH IS A JWT PAYLOAD ▸ Picture ▸ Name ▸ Date of Birth ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  43. 43. @joel__lord #AllThingsOpen WTH IS A JWT PAYLOAD ▸ Picture ▸ Name ▸ Date of Birth ▸ Restrictions ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  44. 44. @joel__lord #AllThingsOpen WTH IS A JWT PAYLOAD eyJzdWIiOjEsInNjb3BlIjoiYXBpOnJlYWQiL CJ1c2VybmFtZSI6ImpvZWxsb3JkIiwiaXNzI joibXktc21hbGwtYXV0aC1zZXJ2ZXIiLCJhd WQiOiJteS1yYW5kb20tY2xpY2tiYWl0LWF waSIsImlhdCI6MTUzNzg5MTQyOCwiZXhw IjoxNTM3ODkyMDI4fQ ▸ Picture ▸ Name ▸ Date of Birth ▸ Restrictions ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  45. 45. @joel__lord #AllThingsOpen WTH IS A JWT PAYLOAD atob(“eyJzdWIiOjEsInNjb3BlIjoiYXBpOnJlY WQiLCJ1c2VybmFtZSI6ImpvZWxsb3JkIiwi aXNzIjoibXktc21hbGwtYXV0aC1zZXJ2ZXIi LCJhdWQiOiJteS1yYW5kb20tY2xpY2tiYW l0LWFwaSIsImlhdCI6MTUzNzg5MTQyOCw iZXhwIjoxNTM3ODkyMDI4fQ”); ▸ Picture ▸ Name ▸ Date of Birth ▸ Restrictions ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  46. 46. @joel__lord #AllThingsOpen WTH IS A JWT PAYLOAD { "sub": 1, "scope": "api:read", "username": "joellord", "iss": "my-small-auth-server", "aud": "my-random-clickbait-api", "iat": 1537891428, "exp": 1537892028 } ▸ Picture ▸ Name ▸ Date of Birth ▸ Restrictions ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  47. 47. @joel__lord #AllThingsOpen WTH IS A JWT SIGNATURE ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  48. 48. @joel__lord #AllThingsOpen WTH IS A JWT SIGNATURE ▸ Holograms ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  49. 49. @joel__lord #AllThingsOpen WTH IS A JWT SIGNATURE ▸ Holograms ▸ Signature ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  50. 50. @joel__lord #AllThingsOpen WTH IS A JWT SIGNATURE gEY3pRSdrnK5VtJI6E9vgada OQuLNWILBvvGasR4CRk ▸ Holograms ▸ Signature ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  51. 51. @joel__lord #AllThingsOpen WTH IS A JWT SIGNATURE HMACSHA256( `${header}.${payload}`, “mysupersecret” ); ▸ Holograms ▸ Signature ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  52. 52. @joel__lord #AllThingsOpen WTH IS A JWT SIGNATURE HMACSHA256( `${header}.${payload}`, “mysupersecret” ); ▸ Holograms ▸ Signature ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  53. 53. @joel__lord #AllThingsOpen WTH IS A JWT SIGNATURE HMACSHA256( `${header}.${payload}`, “mysupersecret” ); ▸ Holograms ▸ Signature ▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
  54. 54. @joel__lord #AllThingsOpen WTH IS A JWT A TOKEN WALKS INTO A BAR
  55. 55. @joel__lord #AllThingsOpen WTH IS A JWT A TOKEN WALKS INTO A BAR 📝
  56. 56. @joel__lord #AllThingsOpen WTH IS A JWT A TOKEN WALKS INTO A BAR 📝
  57. 57. @joel__lord #AllThingsOpen WTH IS A JWT A TOKEN WALKS INTO A BAR 📝
  58. 58. @joel__lord #AllThingsOpen WTH IS A JWT A TOKEN WALKS INTO A BAR 📝
  59. 59. @joel__lord #AllThingsOpen WTH IS A JWT A TOKEN WALKS INTO A BAR 📝 👍
  60. 60. @joel__lord #AllThingsOpen WTH IS A JWT A TOKEN WALKS INTO A BAR
  61. 61. @joel__lord #AllThingsOpen WTH IS A JWT A TOKEN WALKS INTO A BAR 💰
  62. 62. @joel__lord #AllThingsOpen WTH IS A JWT A TOKEN WALKS INTO A BAR 💰
  63. 63. @joel__lord #AllThingsOpen WTH IS A JWT A TOKEN WALKS INTO A BAR 💰
  64. 64. @joel__lord #AllThingsOpen WTH IS A JWT A TOKEN WALKS INTO A BAR 💰 ✋
  65. 65. DEMO
  66. 66. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com
  67. 67. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com /api/cats 🔗
  68. 68. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com /api/book 🔗 ✋
  69. 69. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com /api/cats 🔗
  70. 70. @joel__lord #AllThingsOpen
  71. 71. @joel__lord #AllThingsOpen https://api.myserver.com
  72. 72. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com
  73. 73. @joel__lord #AllThingsOpen https://api.myserver.com https://myapplication.com https://login.myserver.com
  74. 74. @joel__lord #AllThingsOpen
  75. 75. @joel__lord #AllThingsOpen /authorize
  76. 76. @joel__lord #AllThingsOpen /authorize
  77. 77. @joel__lord #AllThingsOpen
  78. 78. @joel__lord #AllThingsOpen /api/cats
  79. 79. @joel__lord #AllThingsOpen /api/cats
  80. 80. @joel__lord #AllThingsOpen /api/cats
  81. 81. @joel__lord #AllThingsOpen WTH IS A JWT SENDING THE TOKEN TO THE API ▸ Using Axios
  82. 82. @joel__lord #AllThingsOpen WTH IS A JWT SENDING THE TOKEN TO THE API ▸ Using Fetch
  83. 83. @joel__lord #AllThingsOpen WTH IS A JWT SENDING THE TOKEN TO THE API
  84. 84. @joel__lord #AllThingsOpen ❓
  85. 85. @joel__lord #AllThingsOpen
  86. 86. @joel__lord #AllThingsOpen /authorize
  87. 87. @joel__lord #AllThingsOpen /authorize
  88. 88. @joel__lord #AllThingsOpen
  89. 89. @joel__lord #AllThingsOpen 🔄
  90. 90. @joel__lord #AllThingsOpen
  91. 91. @joel__lord #AllThingsOpen
  92. 92. @joel__lord #AllThingsOpen
  93. 93. @joel__lord #AllThingsOpen
  94. 94. @joel__lord #AllThingsOpen
  95. 95. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA ▸ You can never completely secure your front-end using JWTs ▸ You can “hide” some routes
  96. 96. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  97. 97. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  98. 98. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  99. 99. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  100. 100. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  101. 101. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  102. 102. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  103. 103. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  104. 104. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  105. 105. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  106. 106. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  107. 107. @joel__lord #AllThingsOpen WTH IS A JWT “SECURING” YOUR SPA
  108. 108. @joel__lord #AllThingsOpen
  109. 109. @joel__lord #AllThingsOpen
  110. 110. @joel__lord #AllThingsOpen
  111. 111. @joel__lord #AllThingsOpen
  112. 112. @joel__lord #AllThingsOpen
  113. 113. @joel__lord #AllThingsOpen
  114. 114. @joel__lord #AllThingsOpen
  115. 115. @joel__lord #AllThingsOpen
  116. 116. @joel__lord #AllThingsOpen )
  117. 117. @joel__lord #AllThingsOpen WTH IS A JWT RESOURCES ▸ General JWT resource ▸ jwt.io
  118. 118. @joel__lord #AllThingsOpen WTH IS A JWT RESOURCES ▸ General JWT resource ▸ jwt.io ▸ Overview of JWT Signing Algorithms ▸ bit.ly/jwt-alg
  119. 119. @joel__lord #AllThingsOpen WTH IS A JWT RESOURCES ▸ General JWT resource ▸ jwt.io ▸ Overview of JWT Signing Algorithms ▸ bit.ly/jwt-alg ▸ JWT Handbook ▸ bit.ly/jwt-book
  120. 120. @joel__lord #AllThingsOpen WTH IS A JWT SUMMARY ▸ Single Page Application security is mainly concerned with authorization. 
  121. 121. @joel__lord #AllThingsOpen WTH IS A JWT SUMMARY ▸ Single Page Application security is mainly concerned with authorization.  ▸ JSON Web Tokens are excellent for securing SPA applications.
  122. 122. @joel__lord #AllThingsOpen WTH IS A JWT SUMMARY ▸ Single Page Application security is mainly concerned with authorization.  ▸ JSON Web Tokens are excellent for securing SPA applications. ▸ Many excellent JWT Libraries exist for all languages and frameworks.
  123. 123. @joel__lord joellord All Things Open, Raleigh, NC October 23rd, 2018 THANK YOU
  124. 124. TEXT
  125. 125. TEXT

×