How to hide api key in html/css/js

Replit Help
1

How can i hide my api key in js
I know that secrets dont work in html/css/js, so is there any way to keep the api key secret?

1 Like
2

Unfortunate you can’t.

HTML-CSS-JS is client-sided, which means that it runs on the user’s device. Therefore nothing is private.

3

You could try making a backend that uses some key system, like having the client generate a key, send it to server to validate, and get a secret back in text form.

But that might be confusing or hard to implement, I would recommend switching to a Node.js server and setting up Express.js.

In either case, you will 100% need a Node.js server. If you don’t like Node because it’s not always on, then I think you could use Replit to build your basics, and then deploy it to some better hoster (which you may even consider paying for if it’s a big project).

2 Likes
4

You can define the API key in a variable to hide it, but please note that obfuscation is not foolproof and can be reverse-engineered by determined individuals. Use the following code to define the API key:

const apiKey = "ytrewq1234567890987654321qwerty";

Then you can proceed to obfuscate your entire JavaScript file using a tool like obfuscator.io. The obfuscated output will hide the API key, but it is not guaranteed to provide complete security. Below is the code that the obfuscator returns:

function _0x3282(){const _0x20f422=['41235750NzQxOR','ytrewq1234567890987654321qwerty','1297619aTpBnd','4610872dHoiet','2152iEDiWV','327tdZvlS','5524MCrTAS','4719462UNjelQ','25wBQsWR','34893vcLzHM','1076564uyFjjn'];_0x3282=function(){return _0x20f422;};return _0x3282();}const _0x59f7ee=_0x3963;function _0x3963(_0x4fca2b,_0x109610){const _0x3282d9=_0x3282();return _0x3963=function(_0x3963eb,_0x43d653){_0x3963eb=_0x3963eb-0x80;let _0x2821a4=_0x3282d9[_0x3963eb];return _0x2821a4;},_0x3963(_0x4fca2b,_0x109610);}(function(_0x4523e8,_0x144eb4){const _0x76ea9a=_0x3963,_0x2bef7b=_0x4523e8();while(!![]){try{const _0x3240d7=-parseInt(_0x76ea9a(0x87))/0x1+parseInt(_0x76ea9a(0x80))/0x2*(-parseInt(_0x76ea9a(0x8a))/0x3)+-parseInt(_0x76ea9a(0x84))/0x4*(parseInt(_0x76ea9a(0x82))/0x5)+-parseInt(_0x76ea9a(0x81))/0x6+-parseInt(_0x76ea9a(0x88))/0x7+parseInt(_0x76ea9a(0x89))/0x8*(parseInt(_0x76ea9a(0x83))/0x9)+parseInt(_0x76ea9a(0x85))/0xa;if(_0x3240d7===_0x144eb4)break;else _0x2bef7b['push'](_0x2bef7b['shift']());}catch(_0x1a29a3){_0x2bef7b['push'](_0x2bef7b['shift']());}}}(_0x3282,0xbda81));const apivariable=_0x59f7ee(0x86);

Always remember to exercise caution when dealing with sensitive information.

@C3aca If this answers your question, you can mark this as a Solution.