Kevin Powell - Community•2w ago

When accessing an API that needs authentication, where do we include API key?

Hello guys, when we need to access an API for a web service, I saw that sometimes the API is included in the URL itself, is it good practice? When can we do that or what are the other methods used to provide an API key to use a web service?

fetch("https://api.example.com/data?api_key=YOUR_API_KEY")
  .then(response => response.json())
  .then(data => console.log(data));

fetch("https://api.example.com/data?api_key=YOUR_API_KEY")
  .then(response => response.json())
  .then(data => console.log(data));

Do we do something like that?

16 Replies

Jochem•2w ago

it depends on the API the documentation will include how you need to send the key

FakerOP•2w ago

ah ok, I saw in a weather API, iirc, the API key was in the URL itself

Jochem•2w ago

quite often, it's as part of an HTTP header rather than in the URL, but it 100% depends on the API itself

FakerOP•2w ago

so it doesn't matter if someone intercept it ? yeah I see, if it's in the header everything gets encrypted if we use https ? In contrast if it's in the url itself as a query parameter what would happen?

Jochem•2w ago

that also depends on the API, but usually you want to keep them safe unless the API explilcitly specifies otherwise the URL is also encrypted in HTTPS

FakerOP•2w ago

oh ok

Jochem•2w ago

but there's no general answer to this question. The API documentation will specify how you send the key, and that's how you have to send the key

FakerOP•2w ago

yep, so I should refer to the API docs

Jochem•2w ago

as for keeping it safe, generally you should only call APIs from the backend where you control the code there are some APIs that are safe to call from the frontend, but those will be explicit about it being okay to expose the key in the frontend

FakerOP•2w ago

oh ok I see, it will be normally specific in the docs how to call the api, whether we can use the front-end directly or we need to use the back-end ?

Jochem•2w ago

not quite. Any time it isn't very explicit about it being okay to use in the front-end, you should assume it isn't whether you hide it in the javascript or put it in a header or any other way, if you're directly calling a third party API with an API key from the frontend, that key is exposed to the end-user and compromised. People can do calls with it as if they were you and change your data, or even incur costs by abusing your key for their own purposes

FakerOP•2w ago

yeah I see, last question... even if we use HTTPS, it's more secure to use the back-end for the API key, is there a reason for that please I mean, what makes the front-end so vulnerable ? ah I see, when we run things, say another user is running a particular webpage, if I store the api key in the front-end, that user can view the JS source code and have access to it ?

Jochem•2w ago

yeah, it's because you can't and shouldn't ever trust your users

FakerOP•2w ago

Yep I see, thanks !

ἔρως•2w ago

to add to what jochem said, the front-end is totally out of your control: there may not even be a browser at the other end at all just assume that that is extremely insecure and never trust it if you put something on the front-end, everybody will see it as for sending the key to the api, you have to read the documentation some tell you to send a bearer header, others use a custom header, others use an url parameter some need authentication to get a fresh token and others dont some may ask you to do something extremely exoteric or very unconventional

FakerOP•2w ago

noted, ty !

Gaming

Programming

When accessing an API that needs authentication, where do we include API key?

Did you find this page helpful?