A Token Walks Into a Bar ...
SPA
Ado Kukic
Developer Evangelist
Auth0
@kukicado
SPA
Security Best Practices
@kukicado
...
@kukicado
https://avengers.com
User
@kukicado
https://api.avengers.com
https://app.avengers.com
Avengers
OK Google, Call Tony Stark
@kukicado
JSON Web Tokens
JWT's (RFC 7519) are an open industry standard method for representing claims securely between two parties.
@kukicado
JSON Web Tokens
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI
@kukicado
@kukicado
How is a Drivers License like a JSON Web Token?
@kukicado
Header
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI
Drivers License
New York State
{
"alg":"HS256",
"typ":"JWT"
}
@kukicado
Payload
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI
Picture
Name
Address
Demographics
Restrictions
{
"sub": "1234567890",
"given_name": "Thor",
"family_name" : "Odinson",
"admin": true
}
@kukicado
Signature
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI
UV Light
Hologram
HMACSHA256( header + "." + payload, "lokisucks" )
@kukicado
📝
/v1/sos
{ "status": 401 }
@kukicado
/v1/auth
{
"status": 200,
"jwt" :"eyJhbGciOiJIU.."
}
@kukicado
/v1/sos
-H "Authorization: Bearer eyJhbGciOiJ..."
{ "status": 200, "message" : "ok", "avenger" : "Hulk", ... }
@kukicado
Example (Axios)
@kukicado
axios.post(
this.apiUrl + '/sos',
{
description: "Help, Thanos!"
},
{
headers: {
Authorization: "Bearer " + this.jwt
}
}
).then(function(data){
console.log(data); // {message: "ok", avenger: "Hulk"}
})@kukicado
api.avengers.com
app.avengers.com
login.avengers.com
@kukicado
api.avengers.com
app.avengers.com
login.avengers.com
🔄
@kukicado
api.avengers.com
app.avengers.com
login.avengers.com
JWT and Vue.js
Why Vue.js?
Library
Framework
Demo Time
Resources
Overview of JWT Signing Algorithms
http://bit.ly/jwt-alg
JWT Handbook
http://bit.ly/jwt-book
General JWT Resources
jwt.io
@kukicado
Summary
JSON Web Tokens are excellent for securing SPA applications.
Many excellent JWT Libraries exist for all languages and frameworks.
Single Page Application security is mainly concerned with authorization.
A security guard couldn't stop Thor, but your server can refuse requests without valid JWT's.
@kukicado
Thank You
@kukicado