JavaScript App Security: Auth and Identity on the Client

1. JavaScript App Security: Auth and Identity on the Client Jonathan LeBlanc Director of Developer Advocacy @ Box Email: jleblanc@box.com

2. What are the issues on the client? Front-end JavaScript code should be treated as a completely insecure environment when making privileged API requests Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

3. Agenda for Today Browser and Data: Working with browser security and identifying sensitive data. API Communication Hurdles: Services and standards for handling auth and identity. Improving Token Security: How to work with tokens linked to highly secure information. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

4. Part 1: Browser and Data

5. 1 What data should be secured? Application Keys (app identity) Public / private keys, application access keys, or any other app authentication keys. Access Tokens (app access) Generated access tokens, pre-authorized access tokens, or any other string that grants privileged access to resources. Sensitive Information Any sensitive non-anonymized, unencrypted, information that can be attributed back to a user. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

6. What are the issues on the client? 1 What problem do we need to solve? The browser security model restricts API requests to the same domain, subdomain, and port as the originating request. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

7. What are the issues on the client? 1 The technology we’re looking at CORS (Cross Origin Resource Sharing) Allows a web app running at one origin to access resources from another origin by using additional HTTP headers. https:/ /www.w3.org/TR/cors/ Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

8. Example CORS Preflight Request OPTIONS /cors HTTP/1.1 Origin: http://mysite.com Access-Control-Request-Method: POST Access-Control-Request-Headers: Authorization Host: api.service.com Accept-Language: en-US Connection: keep-alive User-Agent: Mozilla/5.0...

9. Example CORS Preflight Response Access-Control-Allow-Origin: http://mysite.com Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Headers: Authorization, Content-Type Content-Type: text/html; charset=utf-8

10. Part 2: API Communication Hurdles

11. 2 Authentication versus Authorization Authentication Services, specifications, or processes that are used to identify a user or an application. Authorization Processes that are used to grant an application permission to make requests on behalf of the user or application. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

12. What are the issues on the client? 2 What problem do we need to solve? When making API requests, most services require that you are authorized to make those requests, either as the application or the user. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

13. 2 The technology we’re looking at CORS OAuth 2 As previously discussed, this will allow us to make HTTP requests to the required API service at another origin. OAuth 2 is the open authorization system that may be used to make authorized requests to the API service. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

14. What are the issues on the client? 2 How the standard OAuth 2 flow works 1. Client app redirects user to log in / authorization OAuth Service / Resource Owner OAuth Service / Resource Owner 2. OAuth Service sends authorization grant Client Application Client Application 3. Client POST request to fetch access token 4. OAuth service validates and sends access token 5. Client makes requests for privileged resources Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

15. What are the issues on the client? 2 How the OAuth 2 implicit grant flow works OAuth Service / Resource Owner OAuth Service / Resource Owner 1. Client app redirects user to log in / authorization Client Application Client Application 2. OAuth Service validates client app and responds with access token in query string 3. Client makes requests for privileged resources Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

16. Example of a returned token is the OAuth 2 implicit grant flow https://www.myapp.com/callback #access_token=T9cE5asGnuyYCCqIZFoWjFHvNbvVqHjl &refresh_token=J7rxTiWdOHbUnsUfGMinKBDLZWP9BgR &expires_in=7200 &state=mystate

17. What are the issues on the client? 2 What problem do we need to solve? The standard 3-legged auth process means that you have to log in to the API service. How can I use my existing identity system to use the service behind the scenes? Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

18. 2 The technology we’re looking at OAuth 2 JWT OAuth 2 is the open authorization system that may be used to make authenticated requests to the API service. JSON Web Tokens provides a mechanism for including an existing identify system to bypass the OAuth 3rdleg. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

19. What are the issues on the client? 2 Which part of the flow does JWT target? OAuth Service / Resource Owner OAuth Service / Resource Owner 1. Client app redirects user to log in / authorization Client Application Client Application 2. OAuth Service validates client app and responds with access token in querystring 3. Client makes requests for privileged resources Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

20. 2 What are the components of a JWT request? XXXXXXXX.YYYYYYYY.ZZZZZZZZ X (Header): Token type and hashing algorithm Y (Payload): User / verification content Z (Signature): Header, payload, and secret Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

21. 2 The components of a JWT header alg: The hashing algorithm to be used (RSA / HMAC). typ: The token type, always JWT. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

22. 2 The components of a JWT payload iss (issuer): The person that issued the token. sub (subject) : The subject of the token. aud (audience) : Audience the token is intended for. exp (expiration time) : Expiration time of the token. nbf (not before) : Starting time token is available. iat (issued at) : When the token was issued. jti (JWT ID) : Unique identifier for the token. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

23. 2 The components of a JWT Signature Encoded Data: Base64 encoded header + payload. Secret: A private key. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

24. Sample JWT Request Segments const header = { alg: HMAC', typ: 'JWT' }; const payload = { sub: '4355676', exp: '1481160294', jti: '841112’ }; HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)

25. 2 Securing JWT / OAuth 2 Communication Web App Identity Provider Serverless Function API Service Doesn’t hold persistent token, simply assumes a token is available Service like Auth0 to manage secure identity / token procurement from the API service Serverless API gateway function with code to procure tokens (e.g. Webtask, AWS Lambda) Service that provides endpoints for data which the web app would like to consume Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

26. Part 3: Improving Token Security

27. What are the issues on the client? 3 What problem do we need to solve? When using an access token within frontend code, you are exposing a potentially long lived keys with extensive data access permissions. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

28. What are the issues on the client? 3 The technology we’re looking at Token Downscoping The ability to programmatically generate a highly restricted child token with the intent of minimizing information exposure in insecure code / environments. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

29. What are the issues on the client? 3 Token downscoping process Fully Scoped Token Downscoped Token Client-side Code Standard OAuth 2 token that is fully scoped with the application and user permissions New child token that is tightly restricted for read / write access and permissions. Downscoped token is deployed to client-side code, mobile, or UI to make HTTP requests. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

30. 3 Least privilege principle for downscoped tokens Tightly scoped for single file: A token should only be scoped for the item needed for processing, such as a file. Short lived: Downscoped tokens should only live for their natural useful time (e.g. 1 hour) and should not be refreshable. Revocable: Downscoped tokens may be revoked before natural expiration through the API. Split read / write functions: To further scope token exposure, separate read / write tokens can be issued. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

31. What are the issues on the client? 3 Downscoped Token Components New Scopes • Preview item Fully Scoped, Long Lived Token • Download item • Read / write all files / folders • Share item • Manage all users New Access Rights • Create webhooks • Read access to file id 1234567 • Manage enterprise settings • Token revokes in 1hr Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

32. Downscoping a Token Example client.exchangeToken(“item_preview, item_share, item_download”) .then((tokenInfo) => { // token available in tokenInfo.accessToken }).catch((err) => { console.error(err); });

33. Topic Recap Browser and Data: How do we communicate from JS and what data should we protect. API Communication Hurdles: Tech to handle authentication / authorization / key management. Improving Token Security: Taking long lived tokens from the API service and scoping down based on least privilege principle. Jonathan LeBlanc • Director of Developer Advocacy @ Box • Twitter: @jcleblanc • Email: jleblanc@box.com

34. Thank You https:/ /speakerdeck.com/jcleblanc Jonathan LeBlanc Director of Developer Advocacy @ Box Email: jleblanc@box.com