Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hide Your Keys

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.

Mathias Biilmann

May 13, 2017
Tweet

More Decks by Mathias Biilmann

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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)
  6. API Authentication SPA BROWSER CDN API OAuth2 Auth flow options:

    Resource Owner Password Credentials Implicit Grant Authorization Code
  7. 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!
  8. OAuth2 - Implicit Grant SPA BROWSER CDN API OAuth2 Trust

    established via redirect URL No need for any API secret
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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!
  14. 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
  15. Authenticating - JAMstack API API Auth API API API API

    • Tight Coupling • Single Point of Failure • Slow Performance
  16. 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
  17. 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
  18. JWT Authentication SPA BROWSER CDN API Browser API Request (JWT)

    Response (JSON) Verify Signature + Claims
  19. Authenticating - Micro Services t Modern Web CLIENT CDN SERVICES

    API Gateways Kong Gotiator AWS API Gateway
  20. API Authentication SPA BROWSER CDN API Browser Gateway Request (JWT)

    API Proxy (token) Response (JSON) Verify Signature + Claims
  21. Thank You Stateless Authentication + API Gateways + MicroServices =

    a decoupled architecture for the web @biilmann · www.netlify.com