0

I'm implement oauth2 in a angular frontend spring backend microservice system, where backend fetches the access-token from authorization server, then redirects to the frontend url to be saved in browser. The access-token if sent from backend through cookie header, will not work as the origins are different and cookies are ignored in browser, they can still be a part of query parameter to a GET frontend URI which I redirect to, but this would be security issue. Is there were some way of sending access-token through a POST call to the frontend? Are there alternatives to solve this issue?

BEWARB
  • 131
  • 1
  • 10
  • Commonly they would be sent via [`headers`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers) in your request. – jme11 Feb 20 '23 at 12:25
  • Are you implementing the BFF pattern or is you "backend" solely a REST API? – ch4mp Feb 20 '23 at 12:56
  • @ch4mp "backend" is REST APIs only – BEWARB Feb 20 '23 at 15:19
  • @jme11 how to retrieve the header in angular? https://stackoverflow.com/questions/26557294/get-header-of-existing-page-in-angularjs – BEWARB Feb 20 '23 at 15:41
  • Headers is an object that you send in your request and usually you add your token as `headers: { Authorization: Bearer YOURTOKENHERE }`. You must send it with every request. You can store the token in localStorage and retrieve it from there for each request you make. – jme11 Feb 20 '23 at 15:57
  • [Example using FetchAPI](https://stackoverflow.com/questions/45535913/setting-authorization-header-in-fetch-api). [Example using Axios](https://stackoverflow.com/questions/40988238/sending-the-bearer-token-with-axios). [Example using XML HTTPRequest](https://stackoverflow.com/questions/33545779/xmlhttprequest-setrequestheader-for-each-request). – jme11 Feb 20 '23 at 16:04

2 Answers2

1

Your way to send the token as a query param is one way to do this. A second way is to send a code as a query and then get (POST) the token from the backend inside the frontend, like this:

Backend got token -> redirect to Frontend

HTTP/1.1 303 See Other
Location: http://frontend.de/?code=xxxxxxxxx

Frontend use this code to get token.

POST /oauthtoken/ HTTP/1.1
Host: backend.de
Content-Type: application/json

{
  "code": "xxxxxxxxx"
}

The RFC 7636 can be helpful by protect the code itself.

RFC6819 RFC7636

Flo
  • 2,232
  • 2
  • 11
  • 18
  • Nice solution, I can use oauth using PKCE in authorization server! I also want to use kubernetes pods for my frontend and backend application and keep them stateless, so I am saving the "code_verifier" on browser cookie and fetch the same afterwards while requesting for "access_token". Will this create any security issue? – BEWARB Feb 20 '23 at 15:56
1

When backend is a REST API, it should be configured as a resource-server (not as client).

Authentication (which includes authorization-code flow for user login or client-credentials flow to identify a trusted programmatic client with a secret, etc.), as well as fetching and refreshing tokens, is clients business, not resource-server one.

As a consequence, do not try to retrieve tokens from resource-server and, instead, either:

  • make your Angular app an OAuth2 client with a lib like angular-auth-oidc-client, I which case the Angular app handles redirects and tokens
  • implement the BFF pattern where a Middleware on your servers (spring cloud gateway for instance) is the only OAuth2 client and handles redirects and tokens. In this config, the Angular app is sucured with just sessions and never sees tokens.
ch4mp
  • 6,622
  • 6
  • 29
  • 49