API key - where to place or hide it

i have java script file that i would like placed on my WP site. this JS file makes a API call to external server. In me header sent to API end point I send my api key

var myHeaders = new Headers();
myHeaders.append(“Content-Type”, “application/json”);
myHeaders.append(“Accept”, “application/json”);
myHeaders.append(“x-apikey”, “XXXXXX”);

is there a place to hide my key somewhere on the WP site/configuration file yet make it available to my script?

Thank you

If the key is needed by JavaScript, then no matter what you do, it will eventually end up in clear text on the client.

If an API key is supposed to be secret, then you’d proxy your requests through a server-side language like PHP rather than making them directly from the client using JavaScript.

If the key must be used via JavaScript, some providers have a way to limit the key to specific origins so someone cannot take it and use it on their own site. This is something you’d setup with the API provider.

4 Likes

My API key is supposed to be secret since I do not want anyone else using it.

In that case you can’t use it in a JS script.

1 Like

Why can’t I use it? It has to be hidden from visitors only. How do clients make requests to API points in JS otherwise?

Clients do not do. API calls are always done by the backend never by the frontend.

What is commonly used in web development to make API calls?

Any backend language like PHP, NodeJs, Python, ASP.net, Java Springboot etc…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.