Verify yourself to prove that you are not a ROBOT! After verification the page will apear. Thanks for understanding.
|Added at||2018-02-06 21:02|
I know this is a really common question, and lots has been written about it. Despite reading a lot online however, I can't find a suitable solution.
I have a fully public website - there is no login/secure area. The whole site is powered by API calls to various 3rd party websites. The site uses React on the front end. React needs to make API calls to power the website.
The problem is therefore, protecting the API keys.
Naive solution 1.
React makes API call direct to the third party API - something like https://api.someservice.com/endpoint?key=API-KEY
Clearly this is no good because it exposes the API-KEY.
Everyone suggests creating a service on your own server, and make the API call to the third party from there. That way you don’t have to expose the API-KEY. So React makes a call something like https://api.myserver.com/endpoint
This service would then call the third party service, and return the result. The problem is, that someone else could just call the endpoint hosted on my server, and use it - effectively using my API-KEY.
So, the question is, how can I make sure I (my React app) am the only person who can call the API service hosted on my server?
----Edit with additional information.----
Basically a map is displayed with information overlayed. As the user scrolls the map, API calls are made asynchronously and information relevant to the displayed location is superimposed onto the map. There's no input form, no submission, just a constant stream of asynchronous API calls as the user navigates the map.
I need to protect those API calls. There's no form submission, or login/authentication of any kind. This site is open to everyone.