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
   

   View Slide

2. Matt Biilmann
   CEO, Netlify
   

   View Slide

3. Publishing for the modern web
   

   View Slide

4. View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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)
   

   View Slide

10. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES
    ?
    

    View Slide

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?
    

    View Slide

12. API Authentication
    SPA
    BROWSER
    CDN API
    OAuth2
    Auth flow options:
    Resource Owner Password Credentials
    Implicit Grant
    Authorization Code
    

    View Slide

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!
    

    View Slide

14. OAuth2 - Implicit Grant
    SPA
    BROWSER
    CDN API
    OAuth2
    Trust established via redirect URL
    No need for any API secret
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

21. API Authentication
    SPA
    BROWSER
    CDN API
    Browser Server
    Request (Token)
    DB
    Lookup Session
    Response (JSON)
    

    View Slide

22. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES
    ?
    

    View Slide

23. Authenticating - SPA
    API
    

    View Slide

24. Authenticating - JAMstack
    API
    API
    API
    API
    API
    

    View Slide

25. Authenticating - JAMstack
    API
    API
    API
    API
    API
    

    View Slide

26. Authenticating - JAMstack
    API
    API
    Auth API
    API
    API API
    • Tight Coupling
    • Single Point of Failure
    • Slow Performance
    

    View Slide

27. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES
    JWT
    

    View Slide

28. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES
    https://tools.ietf.org/html/rfc7519
    

    View Slide

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
    

    View Slide

30. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES
    What is a JWT? Header
    Payload
    Signature
    

    View Slide

31. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES
    

    View Slide

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
    

    View Slide

33. Authenticating - JAMstack
    API
    API
    Auth API
    API
    API API
    

    View Slide

34. API
    API
    API
    API
    API
    Auth API
    JWT
    JWT
    JWT
    JW
    T
    JWT
    JW
    T
    

    View Slide

35. JWT Authentication
    SPA
    BROWSER
    CDN API
    Browser API
    Request (JWT)
    Response (JSON)
    Verify Signature + Claims
    

    View Slide

36. JWT Authentication
    SPA
    BROWSER
    CDN API
    The API is not mine
    and doesn’t support JWTs!
    

    View Slide

37. Authenticating - Micro Services
    t
    Modern Web
    CLIENT
    CDN
    SERVICES
    API Gateways
    Kong
    Gotiator
    AWS API Gateway
    

    View Slide

38. API Authentication
    SPA
    BROWSER
    CDN API
    Browser Gateway
    Request (JWT)
    API
    Proxy (token)
    Response (JSON)
    Verify Signature +
    Claims
    

    View Slide

39. Thank You
    Stateless Authentication + API Gateways +
    MicroServices = a decoupled architecture for the web
    @biilmann · www.netlify.com
    

    View Slide