Problem hosting a single-page application with Amazon S3 and CloudFront: how to differentiate 403 from S3 vs 403 from the backend service?

Question

I have a single-page app that is developed in one of the modern JS frameworks.

This single-page app only has a single entry point (index.html).

It handles routing and other page logic through JS, which means that when a user goes directly to, or refreshes the page on, a non-root URL we want them to pull down the index.html file instead of a file stored at the URL path location (like in a statically hosted website).

If a resource behind the URL is not found, S3 returns 403. Therefore, in CloudFront, we have configured the following rule:

Now, I am working on the Authorization layer in the backend that legitimately is returning 403 if the subject doesn't have enough rights to access the API.

And, instead of returning 403, CF, for obvious reasons, is returning 200 with the index page.

Is there a way to fine-tune this behavior? Thoughts?

Answer 1

I was able to solve this by using the following approach:

• turn on Static Web Hosting on S3
• replace the S3 bucket name in CloudFront origin with the S3 Static Website URL.
• remove Error Pages from CloudFront.

The error pages will be handled by the respective origins instead of CloudFront.