Receive AccessDenied when trying to access a page via the full url on my website

39
votes

For a while, I was simply storing the contents of my website in a s3 bucket and could access all pages via the full url just fine. I wanted to make my website more secure by adding an SSL so I created a CloudFront Distribution to point to my s3 bucket.

The site will load just fine, but if the user tries to refresh the page or if they try to access a page using the full url (i.e., www.example.com/home), they will receive an AccessDenied page.

enter image description here

I have a policy on my s3 bucket that restricts access to only the Origin Access Identity and index.html is set as my domain root object.

I am not understanding what I am missing.

To demo, feel free to visit my site.

You will notice how it redirects you to kurtking.me/home. To reproduce the error, try refreshing the page or access a page via full URL (i.e., kurtking.me/life)

Any help is much appreciated as I have been trying to wrap my head around this and search for answers for a few days now.

4
amazon-web-servicesamazon-s3amazon-cloudfrontaccess-denied
Have you raised a support case with AWS? Assuming you have, or are willing to sign up for, at least developer support (aws.amazon.com/premiumsupport/developer-support). You can always cancel the support option at the end of the first month, if no longer needed. – jarmod
I have explored that option, but wanted to see if anyone else in the community has had any similar issues before doing so. – Kurt King
Your page is engaging in some kind of SPA-style monkey business. When you click on /life or the other pages, the address bar changes, but there's no HTTP request to GET /life -- the content is obviously not a conventional web page load, so that explains why it works when clicking the links but not when trying to load the other "pages" directly... there do not appear to be any other real pages, because all the content is in the JavaScript. This is fundamentally an Angular issue, and how to configure server-side redirects to do something that makes Angular work. – Michael - sqlbot
I only have a passing familiarity with Angular, but I did write this, which might be related to your ultimate solution. – Michael - sqlbot
+1 - It did not answer my question exactly, but it started leading me in the right path to search more specifically using keywords like 'SPA, s3/cloudfront issues'. This ultimately lead me an article I posted at the bottom of my solution. – Kurt King

4 Answers

96
votes

I have figured it out and wanted to post my solution in case anyone else runs into this issue.

The issue was due to Angular being a SPA (Single Page App) and me using an S3 bucket to store it. When you try to go to a specific page via url access, CloudFront will take (for example, /about) and go to your S3 bucket looking for that file. Because Angular is a SPA, that file doesn't technically exist in your S3 bucket. This is why I was getting the error.

What I needed to do to fix it

If you open your distribution in Cloudfront, you will see an 'Error Pages' tab. I had to add two 'Custom Error Responses' that handled 400 and 403. The details are the same for 400 and 403, so I only include a photo for 400. See below: enter image description here

enter image description here

Basically, what is happening is you are telling Cloudfront that regardless of a 400 or 403 error, to redirect back to index.html, thus giving control to Angular to decide if it can go to the path or not. If you would like to serve the client a 400 or 403 error, you need to define these routes in Angular.

After setting up the two custom error responses, I deployed my cloudfront solutions and wallah, it worked!

I used the following article to help guide me to this solution.

4
votes

The better way to solve this is to allow list bucket permission and add a 404 error custom rule for cloudfront to point to index.html. 403 errors are also returned by WAF, and will cause additional security headaches, if they are added for custom error handling to index.html. Hence, better to avoid getting 403 errors from S3 in the first place for angular apps.

2
votes

If you have this problem using CDK you need to add this :

MyAmplifyApp.addCustomRule({
  source: '</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>',
  target: '/index.html',
  status: amplify.RedirectStatus.REWRITE
});
1
votes

The accepted answer seems to work but it does not seem like a good practice. Instead check if the cloudfront origin is set to S3 Bucket(in which the static files are) or the actual s3 url endpoint. It should be the s3 url endpoint and not the s3 bucket.

The url after endpoint should be the origin

enter image description here