How to hide API key when developing pure html/ js website

✔ Recommended Answer

The only way that I can say is the Server-Side option, I already read all that the guys said, and I found that using localStorage is not safe, however, server-side may be a better option, you can call the script API (I mean except calling it like <script data-secret="123123"></script> you directly Build it and Inisialise it) directly.

Another Option would be using Server-Side API, If the library you wish Inisialise has API, you can use the API to fetch the data and do your process on that, then, publish it into the Client-Side

// in this example we want to get the Clients' IP Details from an API and show to them// code written in PHP$secret="123123";$data = file_get_contents("https://api.myip.example/v1/getIPdetails?secret=$secret&ip=");echo $data;

The only thing that users/clients can see on their screens is something like this.

<!-- pre is like a tag for PHP, ignore it --><pre>DATA WE GOT FROM THE API</pre>

See!, No API key was exposed, also, clients don't know where we got those details.


Answered By: Alex J

Method #2

If you're developing a pure HTML/JS website that uses an API key, it's important to keep your API key secure and not expose it to the public. Here are a few ways you can hide your API key:

  1. Use a proxy: Instead of making API requests directly from your client-side code, you can make requests to a server-side proxy script that will handle the API requests and return the results to your client-side code. This way, your API key is stored on your server-side code and not exposed to the public. You can use a server-side language like PHP or Node.js to implement the proxy.

  2. Use environment variables: You can store your API key as an environment variable on your server, and then access it from your server-side code. This way, your API key is not hard-coded into your code and is not exposed to the public. In PHP, you can access environment variables using the getenv() function, and in Node.js you can use the process.env object.

  3. Use a configuration file: You can store your API key in a configuration file that is not included in your public codebase. This way, your API key is not exposed to the public and can be easily changed if necessary. You can use a server-side language like PHP or Node.js to read the configuration file and use the API key in your server-side code.

  4. Use API key restrictions: Many APIs allow you to restrict the use of your API key to specific domains or IP addresses. This can help prevent unauthorized use of your API key. Be sure to check the API documentation to see if this is an option.

Remember that even if you're using one of these methods to hide your API key, it's still important to keep your API key secure and not share it with unauthorized users.


Most Popular

Remove Unicode Zero Width Space PHP

PhpStorm, return value is expected to be 'A', 'object' returned

Laravel file upload returns forbidden 403, file permission is 700 not 755