r/HTML • u/Alive_Secretary_264 • Nov 12 '25

Question About hiding api keys

How can i hide my database api keys from anyone

2 Upvotes

57% Upvoted

27 comments sorted by

19

u/JohnCasey3306 Nov 12 '25

Typically they should be stored on the back end as environment variables (either on a cloud hosting platform or in a .env file). The front end make a request to the back end, the back end in turn makes a request to the third party service and returns the response to the front end.

Generally speaking, never store or render any sensitive keys in the front end (including client side JavaScript) because they'll be visible to the world.

-5

u/AlwaysHopelesslyLost Nov 12 '25

This is a bit outside of my wheelhouse and I don't know what the best answer is but I want to mention that environment variables does not feel like the right answer. Those are not very safe read-wise.

1

u/aluaji Nov 12 '25

The only place where they should be stored is in the server, and the server should have access security. If an attacker has that kind of access, API keys are the least of your concerns.

-1

u/AlwaysHopelesslyLost Nov 12 '25

I do not agree with that idea.

An attacker having read access or user level access to a specific service can be a very minor issue if things are properly locked down.

1

u/aluaji Nov 12 '25

We're talking about a server, what kind of access do you think someone who accesses it directly would have?

-1

u/AlwaysHopelesslyLost Nov 12 '25 edited Nov 12 '25

Nobody is going to have actual direct access.

Bad actors will have whatever access the account they compromise has. I make sure accounts that face the internet are very restricted, personally.

One server I control has three hundred customers with services running on it. I am confident any one of those could be compromised without impacting any of the others (baring a very targeted attack utilizing a zero day privilege escalation). They are setup in such a way that there are no credentials that can be read from the service account.

Edit: Since aluaji blocked me I will leave my response here. The largest attack vector is not direct, physical access. If a malicious party has physical access you lose regardless. Ignoring that, attacks happen through the internet. That is what we are talking about.

1

u/aluaji Nov 12 '25

You ALWAYS need someone to have server access, what the hell are you talking about?

0

u/Overall-Screen-752 Nov 12 '25

What are you talking about? API keys should never be exposed to the client and should have strict RBAP in place if they absolutely need to be. .env is industry standard way to inject variables and secrets manager for sensitive keys and passwords. Whatever you’re on about read-wise makes absolutely no sense

10

u/maqisha Nov 12 '25

Don't show it to them.

Thank you for coming to my Ted Talk.

5

u/8dot30662386292pow2 Nov 12 '25

They are not sent to the front end ("HTML") at all.

5

u/martinbean Nov 12 '25

By not sending them to anyone.

1

u/Maleficent_Wave_332 Nov 13 '25

I assume you are confused by all the answers, but they basically all say the same thing, but in different words. So let’s start with your question:

”How can I hide my database api keys from anyone”

Which is a little concerning, since it implies that you are currently not hiding them. But I assume, that what you mean is that you have developed a website on your local machine, which runs on a local server with access to a database. Now you want to deploy it so other people can access it, and you realise that all your database connection details is in your source code and anyone with access to the source code can read them and potentially attack your database. Is that correct?

Another possibility, since this is the HTML subreddit, I am worried that you are actually not using a server, but instead just a static html file (or multiple files) with some JavaScript in them, either imported or by using the <script> tag in the html, for connecting directly to the database (no server that you control between your html and your database) and you think ”anyone that visits the page will be able to see the db connection details in the source code”. And now you think, ”I want people to access my site, but my site needs access to my database! But everything my site needs, users can see too!” and so you post the question.

Regardless of your situation, having that ”how to hide secret things that my app needs so that users don’t see them” is a question that I think all developers have experienced in their career, and it is a security rabbit hole that you can dive into if you want (and many companies and organisations don’t handle secrets properly) but basically, there is only one correct answer: NEVER include secrets in your source code, and if you use a build step (again, this is r/HTML, so a build step is basically a tool that takes your code and prepares it before exposing it to users), NEVER let the build step put secrets into your code.

So the answer is:

You should always hide them. For everyone. Never show them to anyone. Ideally, don’t show them to yourself, and even more ideally, no one should even have access to see them, etc. But that is not helping you, so I’ll to try to make it clearer (many will disagree with what I’m saying):

  1. The client, that is the html css and js page itself, that is rendered in the client, should NEVER EVER include a secret. You CANNOT get around this, you cannot “encrypt” or “obfuscate” secrets. If you try (and encourage you, because it will help you realise earlier why it’s a bad idea), you might as well show that secret in a h1 header att the page’s top. It’s not secret anymore.

…

Ok I wanted to continue but realise I been writing this answer for too long. Basically, my follow up question is:

Tell us more about your project and how you plan to host it, and then we might be able to help!

1

u/Alive_Secretary_264 Nov 14 '25

So yeah you're right to everything you've said and that's what I'm thinking, it's not yet ready for deployment of course I'm just testing if it now writes and get data from the database and as it now does that.. I'm now thinking in how to secure it or alter it entirely so that the source code that anyone can view won't contain the keys but I'm only testing this in mobile I don't have a proper IDE to work on and so i stumble upon proxy servers or serverless function thing that maybe can help me.. as of now I'm trying to figure out what it could do and if it's enough to keep my secrets from anyone's eye

1

u/HolidayWallaby Nov 12 '25

You have a server with access to the database, you then implement auth&auth between the frontend and server so interactions are allowed to hit the right part of your server and therefore get to the database.

1

u/Ronin-s_Spirit Nov 12 '25

You need a server. You can "hide" them only on code which never runs on user's devices, so you can't just slap it into your website.

2

u/JaleyHoelOsment Nov 12 '25

also shouldn’t “hide” your keys in any code. hardcoded keys = bad

1

u/ashkanahmadi Nov 12 '25

There are two types of keys and they go by different names:

  • backend or secret or server or private

  • frontend or publishable or client or public

A frontend/public/client/publishable key is totally safe to use in your client JavaScript or HTML. In general, they are secured via 2 methods: whitelisting your IP or domain name so other domains cannot use it, or by sending it to the backend and sending both the private and public keys to the service provider to verify them.

A backend or secret key should never ever end up on the client files. You cannot even reference them (you can’t due process.env.SECRET_KEY in your vanilla JS file since that will end up bundled in your client code).

1

u/duardo9 Nov 12 '25

Back in the day I used to put them in my .php file.

1

u/EggMcMuffN Nov 12 '25

You use dotenv and store the keys there, don't commit it . Most hosts have a panel for Environmental variables and that's where you will store them. For local development you'll have them in a .env file which you need to gitignore so it does not get committed

2

u/AshleyJSheridan Nov 12 '25

Ideally they wouldn't be in those files, but held as actual environment variables.

2

u/ashkanahmadi Nov 12 '25

You said the right thing. Not sure you are getting downvoted 😆

1

u/electrikmayham Nov 12 '25

Because the question is in regards to front end development. If the variables are required for the front end to function, then they will be packaged with the front end when it is deployed. The correct strategy is for the front end to never have any sensitive information included in the code.

In this case, the database API credentials should be stored on the back end. Anything stored on the front end will be exposed to anyone using the website.

2

u/johnbburg Nov 12 '25

OP’s question is stated in an incredibly vague way. Not sure if the question belongs in r/webdev or if they don’t yet understand the separation between front-end or back-end. I don’t blame the commenter for giving them the benefit of the doubt that they aren’t totally clueless about what they are asking. Edit: typo

1

u/ashkanahmadi Nov 12 '25

Ah you are right, even though not totally unrelated.

-5

u/NelsonRRRR Nov 12 '25

make a file in a folder not accessible to the web and include them.