I am learning how to upload images to my S3 Bucket with a MERN stack app and I wanted to clarify some things on security. The users are supposed to be able to upload images for their avatar and posts (like a cover photo for their article).
Currently, the process of uploading image is this:
- Frontend makes a call to the backend for a pre-signed URL from S3.
- Frontend uploads image to S3 with the pre-signed URL received from backend
- Store the url of the s3 image into the backend for my DB for later retrieval
The tutorials and articles I have followed all have public access unblocked. The bucket policy set Principal to '*', for getObject actions, and CORS policy looks like this:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"PUT",
"POST",
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
My question is, can I block all public access and still have a fully functional app? How would I go about giving access ONLY to my frontend (react app hosted on netlify) and backend (express server on heroku).
Would appreciate any advice on whether what I'm doing is good enough security-wise, or any direction on how to improve it!