Search code examples
securityfrontendreverse-proxyopenid-connect

Pros/cons security architecture for SPA / Backend

I'm not an advanced security developer (what else is new)

Context : I have a monolith using authn/authz mecanism based on a custom JWT stored inside the angular app and refresh frequently. A bit housemade. I'm breaking my monolith one module at a time. And now is about how to handle the security.

I have :

  • multiple angular apps
  • multiple Swing apps
  • multiple back (a big monolith and multiple classic webapplications)

I would like to switch to openid connect. I can :

  1. put a reverse proxy (nginx, kong, ...) with an oidc plugin creating a virtual protected domain for the backends.
    • From the SPA viewpoint :
      • Use of code authorization flow with PKCE
      • When the SPA sends an http request to the RP , the RP check the JWT, validate it, send a 401 if invalidate/missing header.
      • the SPA redirects the user to the Idp / login page.
      • Now I'm a bit lost and need to check the Internet :) : I don't know what is the redirect url (the RP or the SPA ? I was assuming only the RP proxy is registered in the Idp)
      • When the RP forward the original request , the header x-userinfo is set and the backends only read this one.
    • For back to back communication, we propagaded the x-userinfo header received.
  2. no reverse proxy and each backend checks Authorization Bearer header and redirect to an Authorization server when invalidate or missing. Each back manages the security concerns (validation, redirection, registration).

As you can see I have a lot of misunderstandings. My questions are :

  1. is reverse proxy a good idea ?
    • is it easier to put a RP with legacy systems (only one header to check ?)
    • we're putting authz logic inside a RP .... hmmm...
    • I don't have all the steps inside my head (how the redirections are handled)
  2. when a Swing app (already logged in) wants to redirect the user to a new feature --> open a browser window to an angular app, is there a way to handle the security or do I need to let the angular app handle this (and perhaps force the user to relog into the Idp to obtain a JWT into its cookie/localStorage ?).

Thank you

Solution

  • 1a. The redirect URI is the SPA's web origin and should be what you see in the browser. Redirects always occur in the browser (the front channel).

    2a. For newer components aim for a zero trust architecture. In OAuth this just means pass a JWT access token to each API. Aim to avoid passing sensitive data used for authorization in headers.

    1b. Reverse proxy is an excellent practice for your APIs - as discussed in this IAM Primer. It may be less useful for static web content though, since you may want to deploy that via a content delivery network.

    2b. Each app should get its own tokens and redirect the user once - usually a single sign on. In 2021 it is recommended to use secure cookies in SPAs and these cab contain tokens.

    Some generic authorization logic can be done in the RP - that is pretty coomon. The real domain specific authorization should be done in APIs though, using scopes and claims.

    SUMMARY

    Aim to follow best practices for newer components. The Curity links above explain these in a way that cab work for any provider. Hopefully it gives you some useful pointers.