I'm building a fairly simple web application at the moment but because I have plans on turning this into sort of a multi-project portfolio app, I've decided to decouple the back-end and the front-end. That way I can easily integrate my other projects into this front-end.
At the moment I have a public GET route that anyone can visit to see info about a project (api/project/id), this only fetches data from the corresponding ID and returns a JSON collection. I then use React to consume it and display the data.
Since this part is supposed to be publicly accessible I can't use JWT or user authentication to protect it, and you can't delete, edit or put things into the database from it. It's not insecure because all you can do is read data from the project with ID (which is properly escaped).
But this also means anyone can look at my React code, find the API link and then use my JSON data (for whatever reason). I don't think it's really a problem but is there anyway you can protect the public endpoint so that only my server can actually use it?
The back-end is on port 8080 and the front-end is on port 80. The back-end is PHP, both the front-end and back-end is served by nginx. CORS is enabled since they are on two different ports.
I know I can check the origin header and match it against my front-end but surely the origin header can be spoofed. I can't use authentication since it is supposed to be public but I'd like it to be only accessible to my server and then publicly displayed.
Maybe I can reverse proxy it somehow so they both listen on 80 while still being on two different ports? I have UFW on my server, can I only allow connections to port 8080 from my own server IP/domain? Can I check the IP of the request to the back-end, since my front-end is requesting it then in my API I should be able to only allow my own servers IP to access it?
I hope you understand what I mean and I understand that it might be a non-issue because in the end all they can do is read data that they can anyways read by just going to the "intended" front-end site. But at the moment I can use ajax from any computer/server to fetch the JSON data and that is basically what I want to prevent so that the only way to view the data is from it's "intended source/design" (i.e. via the front-end)
Basically an API for public content delivery but only allowing my server to access and display it.