Introduction
As you probably know, PTV Developer uses API keys for user authentication. This is simple to use, but could come with a security problem, especially if the API key is accessible to a third-party like in a frontend (e.g. embedded in a website calling the PTV Developer API). Including the secret API key in the frontend code and using it in client-side requests lead to a high risk of abuse as it is easy to find for anybody with a trivial amount of digging!
How to prevent this? Of course, this depends on your used frontend technology like React or Angular, but in the following we want to give you an overview of the general possibilities protecting your API keys.
Use your own backend
In case your frontend is only accessible by authenticated users, you can send the PTV Developer API requests without an API key to your own backend. This should not be accessible from outside. There you can add the API key to the request and send the final request to PTV Developer. This approach is the most secure way to hide the API keys.
Implement a web proxy
In case your frontend is accessible without authentication, you can implement a web proxy. The web proxy acts as a middleman between your application and the PTV Developer API. The principle is the same as with an own backend: Send the PTV Developer API request without an API key to the web proxy, add there the API key to the request and send the final request to PTV Developer.
This approach prevents users from seeing your secret API key in the frontend code and in client-side requests, but a user might still make requests using your web proxy. A precaution you can take is to restrict requests from other domains
Mask the API keys in your code
You can use environment variables to store the API keys there. Then they are not included in the frontend code. This is a quite simple way to hide the API keys in case it is supported by your frontend technology (e.g. React). This approach is less secure than the previous ones, because the API key is still visible in the request.