Pro Yearly is on sale from $80 to $50! »

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.

A731bc19c3b04919610fcee6d0589914?s=128

Mathias Biilmann

May 13, 2017
Tweet

Transcript

  1. Hide Your Keys Matt Biilmann, 2017

  2. Matt Biilmann CEO, Netlify

  3. Publishing for the modern web

  4. None
  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