CODEWITHSUNDEEP
oauth-2.0azure-active-directory
vrcks
vrcks

Reputation: 477

Where is the OAuth access token stored in the browser in case of Authorization Code Grant flow

I entered my credentials and logged into a web application protected by OAuth Authorization Code flow. Then I performed below steps:

  1. Open browser developer tools (F12) and start capturing network traffic
  2. Try to get data from an API. This request will require access token to be sent. But I am able to view the access token on the network tab for that particular request in the request headers as seen in screenshot below:

enter image description here

My understanding was as below:

  1. The access token would be stored on the web server where my web application is running. That will never be stored in the browser.
  2. Since I am able to see it in the network tab, where exactly is the access token stored in the browser? We use Azure AD as the IDP and Owin packages to integrate OAuth auth code flow.
  3. The API request is over HTTPS and I am able to view the full request details in network tab. Is this expected?

Upvotes: 8

Views: 59550

Answers (1)

sg3s
sg3s

Reputation: 9567

There are only so many places where you can persistently store data in the browser.

As of this writing:

  • Cookies
  • Session Storage
  • Local Storage
  • IndexedDB
  • Web SQL

If you are using libraries to implement the OAuth2 flow any of these could be used. You can find and inspect these storage systems under the "application" developer tools tab in Chrome, or similar spots in other browsers. What you can see/inspect depends on the domain you are currently on in the active tab.

  1. If your client is server based, and thus confidential, you should store your token in a Secure HttpOnly cookie. Then proxy requests to the backend through your own server, including the bearer token from the cookie. This would be the best spot.

  2. If your client is a single page application, you should consider storing it "in memory" and just reauthorize when reloading the page.

  3. If that is not an option then Session Storage is your most secure option. This is most often used if OAuth2 is performed by your frontend.

In any case, if the OAuth2 flow is performed by frontend components only, it is to be expected that the token resides somewhere in the mentioned storage systems, and that it is included in the requests as visible in the network tab of your developer tools.

Upvotes: 8

Related Questions