I am developing a Javascript widget which will be embedded on client sites using an Iframe.
The widget code makes an API call to my backend service using an API key. The API key for each different client will change.
At the moment, the API key is visible in the iframe src tag. This means that it is easy for anyone to find the API key in the page source and for unauthorised users to make API calls.
What is the best way of securing API access in this situation? I thought about using a client secret to encrypt the API key but that doesn't solve the problem as anyone who intercepts the key will still be able to be validated and make calls on the API backend.
There are a few questions online about this already but none with a detailed recommendation on how to go about the implementation.
My widget is HTML generated by a React.js application and the API backend is Ruby on Rails.