Securing s3 Bucket while hosting Angular app

Question

I know there are 2 ways of creating Cloudfront Origin:

paste website endpoint from s3 bucket itself;
select s3 from the list.

Now, when I do #1 - my site seems to really work, but I have to make bucket public. And if I'm using CF distribution for testing, I don't want everyone to have access to files in the bucket. OK, I can restrict access to CF itself with WAF/IP list. This is great.

Next I want to allow access to s3 bucket only from CF. I've found that it's achievable using #2, and I've made it, but now I have only first page of Angular app working, which is, for example, login. After login, app redirects somewhere, say /page/authenticated, and I've got an error "specified key does not exist". I've found a beautiful answer explaining this situation.

But still, I don't uderstand, can I restrict access to s3 bucket while using s3-website endpoint? Or, if I want routing to work, I have to do s3 bucket public and no other variants?

do you look at cloudfront origin setting set the 'Origin Access Identity' to use identity? if u set it, u can make your s3 bucket as private and it only allow cloudfront to access it. — HanJeaHwan, Apr 11 '20 at 12:56

score 4 · Accepted Answer · answered Apr 11 '20 at 12:55

4

You can keep your bucket private and only allow access by using CloudFront.

You don't need to use the website endpoint of the bucket.

What you must do for SPA to work, including Angular, is to add custom Error Pages.

Go to Error Pages and click Create Custom Error Response.

Create an entry for 404 and 403. It should look something like this

answered Apr 11 '20 at 12:55

Radu Diță

13,476
2
30
34

man, I love you!!1111 <3 been trying to acheve this for like half a day – Naryck Apr 11 '20 at 14:44
ha ha, np, this is one of he biggest pains with SPA in AWS. – Radu Diță Apr 11 '20 at 14:45
and, to be honest, half a day was only today. yesterday I was trying to make this thing work like full 8 hours – Naryck Apr 11 '20 at 15:39

score 1 · Answer 2 · answered Jul 25 '21 at 12:18

I might be a little late to the party, but I have recently published an article which describes in a lot of details the security best practices, which help address the following points:

How to secure an S3 buckets, which store sensitive user data and the application code.
How to securely configure a CloudFront distribution.
How to protect frontend apps against common OWASP threats with CloudFront Functions.

To learn more have a look at the article.

Best, Stefan

Securing s3 Bucket while hosting Angular app

2 Answers2