Securing a web app against authorization API without revealing credentials-CodePudding

I have a web app MyWebApp.

And two APIs: MyAuthAPI and MyServiceAPI, both RESTful NodeJS. MyAuthAPI uses HashiCorp Vault as a token store with OAuth2.

MyServiceAPI has CRUD operations available to authenticated clients.

There is no human login required (or desired) on MyWebApp. Any human can access MyWebApp through a browser and run the service.

At present, this is the (very insecure) flow: MyWebApp sends clientid and clientsecret to MyAuthAPI to retrieve token. This token is then used for communicating with MyServiceAPI.

The obvious downside is that anyone can capture the clientid and clientsecret by simply looking in developer tools in a web browser. They could then use those to authenticate with MyAuthAPI, generate their own token, and make calls to MyServiceAPI without MyWebApp being involved.

So how do I best secure the entire application so that MyWebApp is safely and robustly authenticated without revealing the credentials?

Thanks.

ETA: I want to be able to authenticate MyWebApp with MyAuthAPI and then use the generated token to connect to MyServiceAPI. But I don't want it to be possible that anyone can intercept those credentials - currently they can be see in the request header as "Authorization: Basic "

The MyServiceAPI endpoints must be secured so that only authenticated clients are able to access them. But when that client (MyWebApp) is a public website, how do I authenticate without making the credentials visible?

ETA2:

https://mywebapp.com is MyWebApp which is a React application.
https://myauthapi.com hosts MyAuthAPI
https://myserviceapi.com hosts MyServiceAPI

When I load mywebapp.com in a web browser, it authenticates with myauthapi.com/oauth/token to get a token. At present it does this by sending the creds in the header Authorization: Basic

The token that is returned is then saved. The web application then tries to get the data from an endpoint on MyServiceApi using this token: Authorization: Bearer

GET https://myserviceapi.com/objects
or POST myserviceapi.com/objects
or GET myserviceapi.com/objects/objectid
or DELETE myserviceapi.com/objects/objectid

MyServiceAPI verifies the token with MyAuthAPI, but that isn't public-facing, so there's no issue there.

The issue is that, as you can see from the attached screenshot of the Developer Tools console in Chrome, anyone using the web application can see the Authorization header containing the credentials, and could then use these credentials to programatically gain access to the auth API to generate a token which can then be used on the service API endpoints. I want to restrict all access to the API servers to only come from specific applications, such as MyWebApp, on mywebapp.com.

CodePudding user response：

Client Credentials Grant should only be used by confidential Clients. Thats because you can't hide the client_secret on non confidential Clients. Your frontend seems to be a non confidential Client.

Normally you should use the Authorization Code Grant with PKCE. But you would need users to authenticate themselves for that.

CodePudding user response：

First, I think this question could better be asked in https://softwareengineering.stackexchange.com/.

Second, where MyWebApp is deployed? How it is being used? If it works with https, then the body is encrypted, and when you send the clientId and clientSecret, you should send it in the body, so users will not be able to see them.