I'm finding it really hard to find a solution to make secure requests via our API without a potential hacker being able to see sensitive secret information via Google Chrome dev tools (or any browser's dev tools), as React tends to show everything that's client-facing. Our backend hosts Stripe payment info (which may or may not be useful for a hacker), but also private user data.
The API endpoints we wish to protect are from frontend to backend, and they specifically retrieve user data from a MySQL table and backend scripts for features. It's for a public content platform, like YouTube or SO, where content is available for everyone whether they're logged in or not. (we have endpoints to show what content we want to display on the site and where - however each user has sensitive information that should remain private. I basically don't want anyone to get access to the MySQL user table).
Our Back-end and API use Laravel & PHP, and our Front-end uses React.
The current security set up is a password key that allows us to access our API, which changes every hour. Every hour, the key changes, and we use an endpoint to refresh the key (we have a 'master key' that doesn't change that allows us to do this). We pass this in the Authorization header. The issue with this is, a hacker can see this master key in dev tools. The header does not hide the key.
I've been exploring potential solutions, and these are the three potential solutions I've come across:
Solution 1: Send an encrypted token from the Authorization Header and decrypt it in the backend
Making a frontend request
/requestToken that sends an encrypted token that is unique every time - only we just need to know the rules around building that token. Our backend knows how to decrypt it because it's in our special format.
A hacker will have to know the rules of how to build the token (they won't be able to copy and paste an existing one that they see in the front-end), as the token will be time unique, with any given token only being valid every 5 seconds.
This strategy is way more secure than our current one, but an issue I have with this is that a hacker can a) figure out how the token is encrypted because they can see it being built every time they make a request b) they can copy an existing token and use it for 5 seconds, and c) this encryption and request are happening on the front-end and so it can be seen by a hacker.
Issue: Everything happening on the client-facing React app is accessible publically (Source). I would use the solution in the link I just referred to, but it seems that it is for third party APIs rather than for an API that links our frontend to our own backend.
Solution 2: Laravel CSRF with React integration
Using Laravel's native CSRF tokens, and using it with React's frontend (not sure how to but scrolling to the bottom of this page gave some instruction). I have spoken to a few devs who have advised me to use Laravel Sanctum, but isn't it for SPAs (Single Page Apps)? My website has more than one page.
Solution 3: Using JWTs?
For JWTs, I found this solution, but it doesn't apply to me because my site doesn't require people to log in - and it seems that that solution requires people to log in in order for the API to be protected because it uses a password grant generated after a user has successfully logged in.
Which of these strategies are the best if any?
As you might be able to tell, I'm not a developer myself - I'm just trying to find someone who can help me protect my site's user data (which contains Stripe customer info in it, so the data is very important!). However, first of all, I need to agree on the best infosec strategy because I don't want to compromise on security at all.
The developers on this project are freelance without expertise in security.