AWS CloudFront Issue for Custom Error File: AccessDenied Message

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.