Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 2
Message 1 of 3

Security concerns around embedding OAuth client_secret in frontend?

Solved! Go to Solution.
I'm building an application that allows users to interact with their GitHub account data. It is a single page application but with React and is registered with GitHub as an OAuth Application (https://developer.github.com/apps/building-oauth-apps/). Reading through the docs on the web application flow (https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/#web-application-flow), I see that the flow is basically:

1. Redirect user to GitHub Oauth login page, providing the `client_id` and a redirect url as query parameters.
2. After logging in, GitHub redirects user back to my app with a `code` value serving as a bearer token.
3. My application makes a POST request with the bearer token, my `client_id`, and my `client_secret` to Github, getting in exchange an authentication token that my application can then use to make API calls on the user's behalf.

This all seems totally fine and I'm able to perform the steps entirely within my frontend application, however the last step would require me to embed my `client_secret` in my frontend application code. This would obviously make it accessible to anyone who was interested finding it. I can't come up with any particular reasons why this is exactly a security concern, however I struggle with the idea of embedding something labeled as a "secret" within frontend code. Given the redirect flow, Github's services should reject any authentication attempts where the redirect URI doesn't match the URI specified in my Oauth Application's configuration, so I don't think a malicious actor could do any damage with my application's credentials.

I could stand up a simple server to handle to login flow (user POSTs bearer token to my API, my API sends bearer token and `client_secret` to Github), however keeping this entirely as a frontend html/js project would definitely be desirable.

So, can anyone comment on the recommended best practice around embedding the OAuth Application `client_secret` in a frontend application (or otherwise exposing it, such as committing it to version control)? Is there a real risk if others get it or am I just fixating in the word "secret"?
2 Replies
Highlighted
Ground Controller Lvl 1
Message 2 of 3

Re: Security concerns around embedding OAuth client_secret in frontend?

@alukachin general, you should not embed the client secret in an Authorization code flow in a client facing web app, because someone could use those the combination of ID and secret to impersonate your app. You should either set up a proxy server to handle the Authorization code flow or use another type of flow such as PKCE (but I don't think that's supported by the Github API).

Highlighted
Solution
Copilot Lvl 2
Message 3 of 3

Re: Security concerns around embedding OAuth client_secret in frontend?

Thanks @kamicut!

 

So, it seems like the primary risk is that if someone could easily get your Client Secret (i.e. read it in your front-end application's source code) and then could somehow intercept the Authorization Code (e.g. look through a browser's history for redirect URLs, such as when Github redirects back to "http://...redirect_uri.../?code=abc123"), then that person would be able to easily generate an auth token for that user.

 

So in closing, it is not okay to embed your client_secret in a frontend application.