AWS CloudFront custom error page

I noticed that my hugo website which is hosted on AWS CloudFront did not show the provided /404.html error page when you try to open an url path which does not exist. Instead some ugly xml response with the content Access denied (http error code 403) was shown.

Possible reasons

Custom javascript function

At the moment I am not sure if the custom javascript add index.html function creates this problem and usually cloudfront would show a 404 error.

CloudFront and s3 bucket policies

Another problem could be wrong access policies between cloudfront and s3. (s3:GetObject should be enough I thought.)

Instructions to fix the problem

Anyway… You can create a custom error page redirect in CloudFront to solve this issue.

• open cloudfront distribution in AWS management console
• to to tab Error pages
• click on button Create custom error response
• HTTP error code: 403
• error caching TTL: 10
• customize error response: Yes
  • reponse page path: /404.html
    • this page must exist in your distribution/bucket.
  • http response code: 404

Now you should always see the 404 error page.