s3 static website not returning custom error.html

Question

I've set up a React+Cloudfront+S3 SPA. Cloudfront has an OAC and the S3 bucket policy only allows CF to access the contents of the bucket. All public access is blocked. The bucket is configured for static website enabled. There is an index.html and error.html configured and those resources exist in the bucket with those names.

Bucket Policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipalReadOnly",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cik-front-end/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::339712767340:distribution/EQDQLH88I63IN"
                }
            }
        }
    ]
}

Problem

All of this works. I can visit my CF url and see the react application. However, if I attempt to access some non-existent resource in the bucket (for example https://xyz.cloudfront.net/foo, I get the following error:


<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>VZEPZ2TPB5HX0W2V</RequestId>
  <HostId>2MmWdKGa13rUK0YTsQ+5GJPJnEgzJNvuLV+qL0Soc/taJpMaV4yd2+gVdvfIa5cjVtiZwNgUXDg=</HostId>
</Error>

Why is this not returning my error.html, as configured for the S3 bucket?

Answer

Hello.

Have you configured custom error responses in CloudFront?  
By setting a custom error response, you can display a custom error page when the corresponding error occurs.  
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GeneratingCustomErrorResponses.html

"AccessDenied" will probably become "404 NotFound" if you allow the "s3:ListBucket" action in the S3 bucket policy.  
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipalReadOnly",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": ["s3:GetObject", "s3:ListBucket"],
            "Resource": ["arn:aws:s3:::cik-front-end/*", "arn:aws:s3:::cik-front-end"],
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::339712767340:distribution/EQDQLH88I63IN"
                }
            }
        }
    ]
}
```

s3 static website not returning custom error.html

Bucket Policy

Problem

Relevant content