So basically I built a backend with some working endpoint and I built a React Frontend. I can run both things locally and I hosted the page on Cloudflare pages which is working. But now I’m wondering if that’s a good idea?
I have never done this before and I’m wondering if it’s secure enough to host the backend on some server and allow a CORS header to let the Frontend generate requests?
The alternative would be to host Frontend and backend on a VPS and then route my domain that I bought on Cloudflare there, but then I’m thinking that in case my Frontend is insecure somehow the whole instance would be compromised, no?
I hope this is the right platform to ask as I’m pretty new here.
As long as you can get it working without putting any wildcards (asterix
*
) in your CORS headers, you’re using CORS as intended, and should be fine.Back in my day we almost always hosted the front end and the back end on the same host. Of course, we also did a lot of stupid shit back then.
It’s not a disaster to host them the same place, but it’s certainly not a best practice. It’s better to get the CORS headers working, if you can. But just hosting them the same place isn’t, by itself, a security issue. It enables a shit ton of other security mistakes to be cause a lot more harm. But it’s not, itself, a problem.
Edit: Bonus tip. You probably know this, but lots of newbies miss it. Every piece of code and config in your front end app is optional to me and to all bad actors. So take care you don’t put any important secrets or critical defensive decision logic there.
Thanks, this is reassuring. Yeah I don’t really know what I’m doing with the headers but trying my best to be as restrictive as possible. I think I’m still doing something wrong with the headers because I can’t seem to connect to the backend when the fronting is deployed.
Yeah I’m super paranoid about what I’m exposing, I made sure that there are no environment variables or secrets exposed.
Hang in there. CORS is a huge pain in the ass on the best day.
That said, if the issue is CORS, there should be a pretty specific message in the browser debug menu. Note that, if I’ve read that page correctly, the error won’t be available to JavaScript runtime, as an intentional security “feature”.