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=1.1.1.1");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.

Source: stackoverflow.com

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.

Comments

Post a Comment

Most Popular

Remove Unicode Zero Width Space PHP

✔ Recommended Answer This: $newBody = str_replace("&#8203;", "", $newBody); presumes the text is HTML entity encoded. This: $newBody = str_replace("\xE2\x80\x8C", "", $newBody); should work if the offending characters are not encoded, but matches the wrong character (0xe2808c). To match the same character as #8203; you need 0xe2808b: $newBody = str_replace("\xE2\x80\x8B", "", $newBody); Source: stackoverflow.com Answered By: Jef Method #2 To remove Unicode zero width space (ZWSP) from a string in PHP, you can use the str_replace() function to replace the ZWSP character with an empty string. Here's an example: php $str = "Hello&ZeroWidthSpace; World" ; // Contains ZWSP after "Hello" // Replace ZWSP with an empty string $str = str_replace ( "\u{200B}" , "" , $str ); echo $str ; // Outputs "Hello World" without ZWSP In this example, the str_replace() functi
Read more

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

Image
✔ Recommended Answer Has to be because object can be ANY class instance, even B etc. You can annotate the create() method with generics PHPDoc to tell that the return type will be the same as the input parameter class string. It gives more context info to the IDE. /** * @template T * * @param string $class * @return T */ private function create(string $class) : object { return new $class(); } P.S. Instead of create('B'); better use create(B::class) . This way the IDE can track the usages of that class for refactoring/search purposes etc. Source: stackoverflow.com Answered By: LazyOne Method #2 This error message suggests that your code is expecting a value of type 'A' to be returned, but instead, the code is returning an object. This error can occur in PhpStorm, or any other PHP development environment. To resolve this error, you should check the function or method that is returning the object and ensure that it is returning
Read more

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

✔ Recommended Answer The issue you are facing could be due to incorrect file permissions for the storage folder. Here are some steps to fix the problem: SSH into your cPanel server. Change the permission of the storage folder to 755: chmod -R 755 storage/ This command will change the permission of the storage folder and all its contents to 755, which should give the web server permission to read and write to the folder. Check the ownership of the storage folder. Ensure that the owner of the folder is the same as the user running the web server (typically www-data on Apache): ls -l This command will list the files and folders in the current directory along with their ownership and permission details. Make sure that the owner of the storage folder is the same as the user running the web server. If the ownership is incorrect, you can change it using the following command: chown -R www-data:www-data storage/ This command will change the ownership of the storage folder and all its conten
Read more