Help getting custom error pages from S3 into Cloudfront Distribution

Question

I've been reading [this page about custom error pages in CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/GeneratingCustomErrorResponses.html), and going a bit crazy trying to get custom error pages set up using CloudFront and S3. I have an S3 bucket that's set up as a static site. You can access it here: https://cl-error-docs-static-website.s3.amazonaws.com/ And I put a custom 404 page in it that you can access here: https://cl-error-docs-static-website.s3.amazonaws.com/errors_5xx/404.html I think that should be enough on the S3 side of things, so now it's just about having CloudFront access that page when it gets a 404 from the normal origin (an ALB). In CloudFront, I: - created a new origin and pointed it at the S3 bucket. - created a behavior in CloudFront with a Path Pattern of `/errors_5xx/*`, which should serve up the S3 bucket nicely. - created custom error pages that return `/errors_5xx/404.html` whenever there's a 404 response from the normal origin. I think that should do it! But when I load a page that returns a 404, like this one: https://www.courtlistener.com/some-random-url-asdf I get the following S3 result: ``` NotFound The resource you requested does not exist SCN2DCJBR4JRHCJR OEG57JmYL5dclH5biQ8/QrlEsEmITH+6fwmu/01feEjeT0TCARqdklfKryvcdzg1EM9f3FpEATI= ``` Seems like CloudFront is getting an error from the normal origin (the ALB), then going to the bucket and looking for the same path instead of looking for page that's at `/errors_5xx/404.html`. It feels like I'm missing something, but I've tried everything, I think, read documentation many times, and even pulled up [old pages](https://web.archive.org/web/20140319123040/http://blog.celingest.com/en/2013/12/12/cloudfront-configuring-custom-error-pages/) from the Internet Archive. Help!

Accepted Answer

Hi mlissner

From what I understand, you firstly had created an S3 website, with an error page. The error page is accessible at https://cl-error-docs-static-website.s3.amazonaws.com/errors_5xx/404.html

So first off, the reason you can access the above URL is due to your bucket having an open policy. If you were using the bucket website URL, it would look like this:
http://cl-error-docs-static-website.s3-website-us-east-1.amazonaws.com
This is because S3 website endpoints are only HTTP accessible.

Now looking at your original URL, you have used the S3 endpoint URL in your CloudFront Origin configuration. I would advise you to do the following:
1. Remove the open bucket policy.
2. Block all public access
3. Disable the S3 website on the bucket.
4. Edit your CloudFront Origin for your S3 bucket
   - S3 bucket access = Yes use OAI (bucket can restrict access to only CloudFront)
   - If you do not have an Origin Access Identity, create one and then select it. 
   - Bucket policy = Yes, update the bucket policy
5. Save your changes.

This method will make your bucket private, as well as create an identity to allow access to your bucket only from CloudFront. 
Also make sure to add an error page 403, as S3 will return an error 403 access denied when you try to access an object that does not exist. 
https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-access-to-amazon-s3/
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html

One last note, if your bucket needs to be publicly accessible, then use the S3 website URL as your origin, and make your origin a custom origin instead.

Let me know if this helps.

Help getting custom error pages from S3 into Cloudfront Distribution

Relevant content