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.
30. @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.
31. @joel__lord #AllThingsOpen
WTH IS A JWT
JSON WEB TOKENS
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6Ikp
XVCJ9.eyJzdWIiOjEsInNjb3BlIjoiY
XBpOnJlYWQiLCJ1c2VybmFtZSI6I
mpvZWxsb3JkIiwiaXNzIjoibXktc21
hbGwtYXV0aC1zZXJ2ZXIiLCJhdW
QiOiJteS1yYW5kb20tY2xpY2tiYW
l0LWFwaSIsImlhdCI6MTUzNzg5M
TQyOCwiZXhwIjoxNTM3ODkyMDI
4fQ.gEY3pRSdrnK5VtJI6E9vgada
OQuLNWILBvvGasR4CRk
32.
33. @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
34. @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
35. @joel__lord #AllThingsOpen
WTH IS A JWT
HEADER
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
36. @joel__lord #AllThingsOpen
WTH IS A JWT
HEADER
▸ Drivers Licence
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
37. @joel__lord #AllThingsOpen
WTH IS A JWT
HEADER
▸ Drivers Licence
▸ Province of Quebec
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
38. @joel__lord #AllThingsOpen
WTH IS A JWT
HEADER
▸ eyJhbGciOiJIUzI1NiIsInR5c
CI6IkpXVCJ9
▸ Drivers Licence
▸ Province of Quebec
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
39. @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
40. @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
41. @joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
42. @joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
▸ Picture
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
43. @joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
▸ Picture
▸ Name
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
44. @joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
▸ Picture
▸ Name
▸ Date of Birth
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
45. @joel__lord #AllThingsOpen
WTH IS A JWT
PAYLOAD
▸ Picture
▸ Name
▸ Date of Birth
▸ Restrictions
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
46. @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
47. @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
48. @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
49. @joel__lord #AllThingsOpen
WTH IS A JWT
SIGNATURE
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
50. @joel__lord #AllThingsOpen
WTH IS A JWT
SIGNATURE
▸ Holograms
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
51. @joel__lord #AllThingsOpen
WTH IS A JWT
SIGNATURE
▸ Holograms
▸ Signature
▸ eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW
IiOjEsInNjb3BlIjoiYXBpOnJlYWQiLCJ1c2VybmFt
ZSI6ImpvZWxsb3JkIiwiaXNzIjoibXktc21hbGwtY
XV0aC1zZXJ2ZXIiLCJhdWQiOiJteS1yYW5kb20t
Y2xpY2tiYWl0LWFwaSIsImlhdCI6MTUzNzg5MT
QyOCwiZXhwIjoxNTM3ODkyMDI4fQ.gEY3pRSd
rnK5VtJI6E9vgadaOQuLNWILBvvGasR4CRk
97. @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
123. @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.
124. @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.