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://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"}
})

Example (Node.js)

@kukicado

// public route
app.get('/api/public', function(req, res) {
  res.json({
    message: '...'
  });
});

// protected route
app.get('/api/admin', checkJwt, function(req, res) {
  res.json({
    message: '...'
  });
});

Example (Node.js)

@kukicado

// token middleware

checkJwt(req, res, next){
  var claims = jwt.verify(token, 'lokisucks');

  if(claims.admin){
    next();
  }

  res.json(
    { message : "Unauthorized" }
  );
}

@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

Resources

Overview of JWT Signing Algorithms

http://bit.ly/jwt-alg

JWT Handbook

http://bit.ly/jwt-book

General JWT Resources

jwt.ioΒ 

@kukicado

JWT Scopes

http://bit.ly/oauth-scopes

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

Β 

A Token Walks Into a SPA (CyberSecurity Atlanta)

By Ado Kukic

A Token Walks Into a SPA (CyberSecurity Atlanta)

  • 600