How to obscure sensitive data written in Javascript?

Question

I have developed a web application which makes use of Google sign-in within an AngularJS application.

Since the client_id and api_key are written in the Javascript I think it's quite easy to find them out even just with browser's dev console.

Apparently it's possible to "obscure" JS code (e.g. How can I obfuscate (protect) JavaScript? ), but my concern is: does this really make impossible to a potential attacker to access the keys?

If not, what's the best practice in this case? I've heard of some kind of backend to obscure the keys written in the JS. kind of "gateway"

Just to mention, my concerns is not just about Google APIs but all the code I write which I would like to not be "open source" unless I decide to do so

EDIT: since I'm not sure my doubt was completley clear, here is my actual question

what methodology I can use to effectively prevent users "stealing" my keys? there exist any service which serves as gateway? shall I design one on my own?

Answer 1

does this really make impossible to a potential attacker to access the keys

You can compress it and/or obfuscate it but this process is always reversable as long as your application requires the plain keys.

all the code I write which I would like to not be "open source" unless I decide to do so

With choosing JavaScript as your language and the browser as your platform you already decided to go open source.

You obtain the copyright for your code, so you're left with putting in a proper license header and the knowledge that companies that make money wouldnt dare to "just rip" your code. People just interested in how you accomplished something would'nt go through the hassle of reversing the compression and/or obfuscation.

EDIT: Non public API keys are usually bound to a specified referrer domain.

To prevent your key from being used on unauthorized sites, only allow referrals from domains you administer.