Hide Your Keys

APIs and microservices open up an ever-expanding world of possibilities for JavaScript-driven interactivity and dynamic content. However, a question that’s often asked and rarely answered is, if all of your code is in the browser, where do you hide your secret API keys? This talk will cover strategies for this and for user authentication that rely on JSON Web Tokens and tiny APIs rather than a monolithic app server.

Transcript

1. Hide Your Keys Matt Biilmann, 2017
2. Matt Biilmann CEO, Netlify
3. Publishing for the modern web
5. The Evolution of the Web Unix Model Legacy Web (The site needs to be built EVERY time it’s served) Modern Web ~1970-1997 ~1997-Today Now CLIENT WEB SERVER APP SERVER DATABASE CLIENT SERVER CLIENT CDN SERVICES
6. Authenticating - Client <-> Server Unix Model Legacy Web (The site needs to be built EVERY time it’s served) Modern Web ~1970-1997 ~1997-Today Now CLIENT WEB SERVER APP SERVER DATABASE CLIENT SERVER CLIENT CDN SERVICES Stateful Protocol
7. Authenticating - Client <-> Server Unix Model Legacy Web (The site needs to be built EVERY time it’s served) Modern Web ~1970-1997 ~1997-Today Now CLIENT WEB SERVER APP SERVER DATABASE CLIENT SERVER CLIENT CDN SERVICES Client Server user/pw Session
8. Authenticating - Web Monolith Legacy Web (The site needs to be built EVERY time it’s served) Modern Web ~1997-Today Now CLIENT WEB SERVER APP SERVER DATABASE CLIENT CDN SERVICES HTTP - Stateless Protocol
9. Authenticating - Web Monolith Legacy Web (The site needs to be built EVERY time it’s served) Modern Web ~1997-Today Now CLIENT WEB SERVER APP SERVER DATABASE CLIENT CDN SERVICES Browser Server user/pw Request (Cookie) DB User Lookup Create Session Session ID (Set-Cookie) Lookup Session Response (HTML)
10. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES ?
11. API Authentication GET /api/v1/sites HTTP/1.1 Host: api.example.com Authorization: Bearer abcd1234 SPA BROWSER CDN API How do we get an access token?
12. API Authentication SPA BROWSER CDN API OAuth2 Auth flow options: Resource Owner Password Credentials Implicit Grant Authorization Code
13. OAuth2 - Resource Owner Password SPA BROWSER CDN API OAuth2 POST /token HTTP/1.1 Host: server.example.com Content-Type: application/x-www-form-urlencoded grant_type=password&username=johndoe&password=A3ddj3w App MUST have a deep trust relationship with API!
14. OAuth2 - Implicit Grant SPA BROWSER CDN API OAuth2 Trust established via redirect URL No need for any API secret
15. OAuth2 - Implicit Grant SPA BROWSER CDN API Redirect to Auth Endpoint document.location.href = endpoint + `client_id=123&` + `response_type=token&` + `redirect_uri=` + document.location.href Auth Endpoint Redirects Back https://example.com/#access_token=abcd1234
16. OAuth2 - Implicit Grant SPA BROWSER CDN API Gotchas The previous example has a security flaw! Should use a “state” query parameter Not widely supported by OAuth providers
17. OAuth2 - Authorization Code SPA BROWSER CDN API Redirect to Auth Endpoint document.location.href = endpoint + `client_id=123&` + `response_type=code&` + `redirect_uri=` + document.location.href Auth Endpoint Redirects Back https://example.com/?code=SplxlOB
18. OAuth2 - Authorization Code SPA BROWSER CDN API Exchange code for access_token POST /token HTTP/1.1 Host: server.example.com Authorization: Basic czZCaGRSa3F0Mz grant_type=authorization_code&code=SplxlOB Auth Endpoint Returns Access Token
19. OAuth2 - Authorization Code SPA BROWSER CDN API Exchange code for access_token POST /token HTTP/1.1 Host: server.example.com Authorization: Basic czZCaGRSa3F0Mz grant_type=authorization_code&code=SplxlOB Auth Endpoint Returns Access Token We need our “Client Secret” to generate this!
20. OAuth2 - Authorization Code SPA BROWSER CDN API Always needs a server side component when exchanging the authorization code for an access token or refresh token
21. API Authentication SPA BROWSER CDN API Browser Server Request (Token) DB Lookup Session Response (JSON)
22. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES ?
23. Authenticating - SPA API
24. Authenticating - JAMstack API API API API API
25. Authenticating - JAMstack API API API API API
26. Authenticating - JAMstack API API Auth API API API API • Tight Coupling • Single Point of Failure • Slow Performance
27. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES JWT
28. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES https://tools.ietf.org/html/rfc7519
29. Authenticating - JWTs t Modern Web CLIENT CDN SERVICES What is a JWT? •A JWT is just string •It has 3 parts: header.payload.signature •It is signed with a secret and can be verified
30. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES What is a JWT? Header Payload Signature
31. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES
32. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES What is a JWT? •Token identifies user (“sub” claim) •Token can authorize the user (“trust”) •Token can include display data
33. Authenticating - JAMstack API API Auth API API API API
34. API API API API API Auth API JWT JWT JWT JW T JWT JW T
35. JWT Authentication SPA BROWSER CDN API Browser API Request (JWT) Response (JSON) Verify Signature + Claims
36. JWT Authentication SPA BROWSER CDN API The API is not mine and doesn’t support JWTs!
37. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES API Gateways Kong Gotiator AWS API Gateway
38. API Authentication SPA BROWSER CDN API Browser Gateway Request (JWT) API Proxy (token) Response (JSON) Verify Signature + Claims
39. Thank You Stateless Authentication + API Gateways + MicroServices = a decoupled architecture for the web @biilmann · www.netlify.com