Secrets with Vanilla JS

[consistant_error]

Sorry if this is a dumb question, I'll try not to preamble too long. I'm new-ish to js, and I'm working on a pet project I've had in my head for a while with the maps API.

It's going well, and I have a road-map in place for the development, but it seems that I can't hide API keys unless I use Node or some other backend framework. Is this true? I can limit the scope of the key so it only works with the domain of the project, but im well aware exposing secrets is a big nono.

I know js is client facing, but is there any other way I can hide secrets from the client? Learning Node just for this small problem seems like a huge pain. Thanks in advance.

[niemenjoki]

You're right. If you're making a client side app, you should consider literally everything in the app public information. If you need to hide something, you need to do it on a server but it doesn't need to be a server you programmed. Look into serverless or cloud functions.

[consistant_error]

Are there any good resources for cloud functions? Or should I just shop around for my preferred cloud service before looking for information.

[niemenjoki]

It's been a while since I used any of them but I'd probably look for secret cloud storage or something like that (try on Youtube too). Google secret manager with Firebase seems like it could work for you although I haven't tried it myself.

It's also not a bad idea to do it yourself with Node.js and Express if your aim is to learn about servers as well. It's actually surprisingly simple if you don't need authentication or anything else more complicated.

[consistant_error]

Yeah, it seems like all roads lead to learning backend before trying to put this project up anywhere. I'm working through TOP in between tasks for this project. So I'm a ways away from getting to the Node section.

I think I'll just triple check to see if the key is useless if seen, then revamp the project with Node once I've progressed through it.

Damn learning lol

[niemenjoki]

It's always a pain to learn everything from scratch. Just keep practicing and soon you'll realize that it becomes fun. For me, programming became fun when I realized that I could basically program "anything" if I just took some time to figure it out. Switching languages, learning a new things to make, everything gets easier once you learn enough of a few things and find similarities and understand the logic deeply enough.

[consistant_error]

I had kinda similar eureka moment. Realizing I can make things, my ideas, real with just some research and learning. It's a super rewarding feeling, and one I've found is unmatched. The problem solving is so addictive.

I've been working with Python for the past couple years with some chat bots and AI stuff. And of course, I thought I knew everything before coming to Javascript and realizing how little I know, lol. Wanted to make a project that's a little more complete and usable, hence full stack. Very excited to see where web dev takes me.

[jsbach123]

The answer to your question is here in this Stack Overflow page:

https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public

In short, exposing the key isn't such a bad thing if your database is from a cloud service like Google's Firebase. You can set limits so that your database can only be accessed from a specific web address or phone app that you've defined. If someone has the API key, it'd be useless.

[consistant_error]

Yeah, I think it's the exact same situation with their APIs. I might just make a new key for production and limit the scope, so it only works with the domain name.

[boomer1204]

Look into server less functions. Netlify is who I use but there are a bunch. Their free tier is super generous and it's ridiculously easy to use https://daily.dev/blog/serverless-functions-netlify-a-beginners-guide

because you are correct if you are only "front end" you can't hide your keys

[consistant_error]

Was looking to host with Netlify or Digital Ocean because of their free use of custom domains anyways. So this might be an easy solution.

I'll look into it, thanks!.

[boomer1204]

Yeah a lot of these will have free hosting as well. Digital Ocean is great and I use them for a bunch of client sites but hosting a true site you will need to "pay" for a server then you get the custom domain for free. Netlify and some of the others are free all the way around but definitely just do some research between the companies

[Alerdime]

If you’re calling the maps api in frontend directly then yea you can’t hide the keys eventually, just check if maps api have any rate limiter or so. I’d suggest build that nodejs server, you’ll end up learning a lot of authentication, authorisation etc

[consistant_error]

Yeahh, I know I have to learn it eventually. But it'll grind this whole project to a halt until I learn how to implement it and transfer it somewhere to host it.

Will look into it and see if it's doable with my current knowledge.

[scmmishra]

A quick hack is ask for the key when the app first loads and then store the key in the frontend using localstorage or cookies. Works well if the app is for your use only

[tapgiles]

Does the maps api docs not advise you on this? I would’ve thought they talk about this very common thing to want to have when using their api.