Javascript Code with API key
Hi all,
My product involves the user to add a piece javascript code on their site which calls my website with his API key and I will return a hashed code. My concern is that an unauthorised person can copy this piece of code on the user's site and use it on some other sites, which may cause some issues.
I know that you can set the API key as environment variable but how do I handle this in vanilla JS?
just write a code in your server to allow only authorized websites.
For example:
that's my 2cents
Hi, thanks for your suggestion.
But what do I do if it doesn't send the referrer header?
block the request. the header is always sent by the browser.
https://www.geeksforgeeks.org/http-headers-referer/
Is this the same as $_SERVER["HTTP_REFERER"] in PHP? It does not get sent if the website contains a meta tag with no-referrer.
Is this the same as $_SERVER["HTTP_REFERER"] in PHP?- YesIt does not get sent if the website contains a meta tag with no-referrer.- no-referrer can only be added to hyperlinks I guess. Also, I think it is a good practice for you to track the websites that are requesting your code. So that you can bill them fairly. There's nothing wrong in denying request by anonymous/unauthorized webpagesI've tried adding meta-tag in this page and the $_SERVER["HTTP_REFERER"] returns null.
I'm not quite sure how you're implementing the javascript bit & the PHP bits - try referring this?
https://www.geeksforgeeks.org/how-to-read-any-request-header-in-php/
Oh it manages to get the calling URL with getallheaders() even when $_SERVER["HTTP_REFERER"] returns null with the no-referer meta tag.
Thanks for your help!
What does this hashed code that the API key gets actually do?
Another suggestion on top of a host whitelist would be to limit the API key to only be able to get that hashed code and nothing else with your API.
It will call my server to generate a code and the API key will determine which user_id to tie the code to. I don't want any unauthorised use for this because this will cause some issues.
What does having the code allow someone to do?
Basically, I'm trying to determine the risk of the code being accessible. Even if the API key is limited, the user may still be able to read the hashed code, depending on how you store it.
What I wanted to do is similar to the example below.
Let's say my service generates captchas for my users when visitor visits their page, and I want to keep track which captcha is generated for which user.
So my user will include a piece of javascript code on their page to identify themselves and I know which captcha is for which user based on the identifier my user provided.
The identifier will be exposed (on the Javascript code) and I want to prevent the user's identifier from getting used by others.
My backend is PHP. A way would be getting the user to whitelist their site and I authorise by comparing the REMOTE_HOST variable and user's site url.
Definitely provide a Whitelist for Allowed Hosts!
Its definitely not foolproof but its as good as you're going to get with something thats visible to the public
Let your users specify the allowed hosts and check it in an API call. Googles APIs allow the same e.g. for their Google Maps JavaScript.
The Host header which is usually sent by the browser can still be forged and you may have to do a reverse DNS lookup to mitigate this, but it's a good start.
Thanks for the suggestion! I'll look into this!