How to securely retrieve assets from a private S3 bucket via an Angular frontend

Question

I have a scenario where there is an application that uploads user profile images to an AWS S3 bucket.

• To prevent all the user's profile images (or any other bucket content) - the bucket is private and so the asset URL's are not publicly accessible.

• In the Angular frontend of the application, I need to retrieve the user profile images. This is trivial if an S3 bucket is publicly accessible - simply point at the URL.

• As the bucket is private, I'd like to know the best way to retrieve those images on the frontend. For my particular use-case, I'm defining best as a combination of secure and efficient.

• By secure, obviously I don't want to hard code AWS credentials in the frontend client.

• By efficient, I know I could set up a backend proxy, which the frontend would call - this proxy would, in turn, authenticate with S3 and return the requested asset as a response to the frontend - but this carries an obvious overhead.

I'd like to know what is an optimal solution/approach to the above, given the details I've provided?

Update: The frontend is hosted separately, on an EC2 of it's own, under the same AWS account as the S3.

Answer 1

I will try to explain two possible ways to achieve this.

First,

Because you said "user profile images" - I assume the User is logged in. So you could access the s3 file through "web identity federation". You could use cognito or you could directly do it your self

Sample example The sample app authenticates users using web identity federation and Facebook login -

Note the Resource part of the IAM role

"Resource": [
    "arn:aws:s3:::YOUR_BUCKET_NAME/facebook-${graph.facebook.com:id}/*"
]

Each user has own folder for their files, So you can keep her files securely.

Second,

Now option one is not very simple.

Simple option would be, the moment you need the profile image of the user, you fire an API to your Ec2 based server to create a presigned URL

Problem here is, the url expires after the time you specified, so each time you have to create it and send it to browser.