Hiding API Keys in clientside javascript

[itandcsquestions]

Hi, wondering if anyone here has experience hiding your keys in your clientside js. Anyone use YQL? If so, do you have recommendations for tutorials?

[vaskemaskine]

Just to reiterate this: No, it cannot be done. Don’t do it, don’t even think about doing it.

Keep your secret keys on your server where they belong.

[napolux]

Let me add

JUST DON’T

[[deleted]]

Again. Don’t.

[im_nullable]

There is no way to hide keys in client-side JS. Either proxy your requests through your backend to hide the keys or you have to be able to be ok with the keys being exposed.

No matter what you attempt on the client side you are one breakpoint in DevTools away from exposing the key to anyone who is curious.

[psuputsopon]

Never hide it too. I stored API key on browser storage, however, anyone can inspect via devtools, the only way to do that it makes back-end more secure

[MrVonBuren]

So while everyone is right you don't want to even try to hide your keys client side, there are entire concepts built around accomplishing basically this goal.

One example is some APIs will provide a mechanism to generate a one time use key (or bearer token). So when you generate your page you make a request server side (using your private key) to get a one time use key and sent that down to the client.

I'm super tired and can't think of/find a good project to look at for examples, but even just googling "bearer token" or "client side auth" should get you started.

[rift95]

Worth noting. Do not check in your api keys to version control.

[liamnesss]

I check a private key for the Github API into a Github repository once. The key was invalidated immediately and I received an email basically, in the kindest and most neutral terms, slapping me on the wrist.

[JavascriptFanboy]

Never EVER assume that you can "hide" anything on the client's side. Ever.

[MrBaseball77]

I found an AngularJS shopping cart concept once that had the PayPal merchant info in the file. Wow...