AWS CloudFront Issue for Custom Error File: AccessDenied Message - html

Question

This is my first post in Stackoverflow and I have tried to search for the answer to a problem I am currently having with CloudFront serving up static S3 website page, to be precise, custom 404 error page. Hope you can help me out :=))
I am not using any code, simply using the AWS console as a POC. Here is the scenario:
a) I have created two buckets. The names are (as an example): mybucket.com and www.mybucket.com.
b) I have placed my static site (a very simple one) inside the mybucket.com and redirect www.mybucket.com to it.
c) The content bucket (mybucket.com) has an index.html file, an image file. I have created a folder under the bucket (called error) and placed a custom error message file called 404error.html in it.
d) The index.html file also calls a simple JavaScript code that loads the contents of another file (welcome.html) from another bucket (resource.mybucket.com). I have ensured that bucket is enabled for CORS and it is working.
d) The bucket has a bucket policy that allows everyone access to the bucket and it's contents. The bucket polcy is shown below:
{
"Id": "Policy1402570669260",
"Statement": [
{
"Sid": "Stmt1402570667997",
"Action": [
"s3:GetObject"
],
"Effect": "Allow",
"Resource": "arn:aws:s3:::mybucket.com/*",
"Principal": {
"AWS": [
"*"
]
}
}
]
}
e) I have ensured the www.mybucket.com and resource.mybucket.com also has the same policy.
f) mybucket.com has been configured for static website hosting and the error file for mybucket.com has been configured to be error/404error.html.
c) If I access the site using the S3 URL (mybucket.com.s3-website-.amazonaws.com), and try to access a non-existent file (say myfile.html), it correctly shows the custom 404 error page.
The problem arises when I try to access the page using the CloudFront distribution. I created a CloudFront distribution on the S3 bucket (mybucket.com) and here are the properties I set:
a) Error Page:
i) HTTP Error Code: 404-Not Found
ii) Error Caching TTL: 300
iii) Customize Error Response: Yes
iv) Response Page Path: /error/404error.html
v) HTTP Response Code: OK
b) A separate cache behaviour was set as well:
i) Path Pattern: /error/*
ii) Restrict Viewer Access: No
I am keeping it very simple and standard. I am not forwarding cookies or query strings or using any signed URLs etc.
Once the distribution is created, when I try to access the site with CloudFront URL, the main page works fine. If I try to test with a non existent page, however, I am not served with the custom 404 error page that I configured. Instead, I get the following XML file in the browser (Chrome/FireFox -latest):
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>EB4CA7EC05512320</RequestId>
<HostId>some-really-big-alphanumeric-id</HostId>
</Error>
No clue is shown in the the Console when I try to inspect elements from the browser.
Now I know this AccessDenied error has been reported and discussed before and I have tried what most suggest: giving full access to the bucket. I have ensured that (as you can see from the bucket policy above, access is open for anybody). I have also tried to ensure Origin Access ID has been given GetObject permission. I have also dropped and recreated the CloudFront distribution and also deleted/re-uploaded the error folder and the 404error.html file within the folder. The error file is manually accessible from the CloudFront URL:
http://xxxxxxxx.cloudfront.net/error/404error.html
But it does not work if I try to access an arbitrary non-existent file:
http://xxxxxxxx.cloudfront.net/myfile.html
Is there something I am missing here?
I really appreciate your help.
Regards

Answer 1

Here is a rudimentary policy for making your S3 bucket work with CloudFront custom error pages.
{
"Version": "2012-10-17",
"Statement": [{
"Action": [
"s3:ListBucket"
],
"Effect": "Allow",
"Resource": "arn:aws:s3:::<yourBucket>",
"Principal": "*"
}, {
"Action": [
"s3:GetObject"
],
"Effect": "Allow",
"Resource": "arn:aws:s3:::<yourBucket>/*",
"Principal": "*"
}]
}
As Ben W already pointed out, the trick is to give the ListBucket permission. Without that you will get an access denied error.
It may also be worth mentioning that 5xx errors only make sense if you serve them from another bucket than the bucket where your website is on.
Also a 404 error should respond with a 404 error code, even on your custom error page, and not just suddenly turn into a code 200. Same for the other error codes, of course.

Answer 2

If you setup a bucket (the-bucket) quickly, you may set it up without List permissions for Everyone. This will stop CloudFront from determining if an asset is 404 correctly.
Your uploader tool may be uploading with read permissions on each object - so you will not notice this lack of permissions.
So if you request <URL>/non-existent.html, CloudFront tries to read the bucket e.g. http://the-bucket.s3.amazonaws.com/non-existent.html
if list permissions are granted to everyone, a 404 is returned, and CloudFront can remap the request as a 200 or a custom 404
if list permissions are not granted to everyone, a 403 is returned, and CloudFront returns the 403 to the end user (which is what you are seeing in the log).
It makes perfect sense, but is quite confusing!

Answer 3

I got these hints from http://blog.celingest.com/en/2013/12/12/cloudfront-configuring-custom-error-pages/ and your question might also be related to https://serverfault.com/questions/642511/how-to-store-a-cloudfront-custom-error-page-in-s3/
You need another S3 bucket to host your error pages
You need to add another CloudFront origin pointing to the bucket where your error pages are
The cache behaviour of the newly-created origin should have a Path Pattern pointing to the folder (in the error page bucket) where the error pages reside
You can then use that path in the Response Page Path when you create the Custom Error Response config

Answer 4

S3 permissions have changed in 2019. If you're reading this since 2019, you can't follow any of the above advice! I made a tutorial to follow on Youtube:
https://www.youtube.com/watch?v=gBkysF8_-Es

Answer 5

I ran into this when setting up a single-page app where I wanted every missing path to render /index.html.
If you set up the CloudFront "Error pages" handling to redirect from HTTP error code 403 to the path /index.html with response code 200, it should just work.
If you set it to handle error code 404, you'll get AccessDenied unless you give everyone ListBucket permissions, like some other answers describe. But you don't need that if you handle 403 instead.