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