Handling Error Routing with Conditional Redirects

Lab Steps

lock
Logging in to the Amazon Web Services Console
lock
Redirecting Static Website Traffic to Another Amazon S3 Bucket
lock
Handling Error Routing with Conditional Redirects
Need help? Contact our support team

Here you can find the instructions for this specific Lab Step.

If you are ready for a real environment experience please start the Lab. Keep in mind that you'll need to start from the first step.

Introduction

In this lab step, you will apply a conditional redirect routing rule to an Amazon S3 bucket that has static website hosting enabled. The routing rule will allow you to override the default error page for your website with a custom error page and provide a better experience for your users.

 

Instructions

1. In the AWS Management Console, in the search bar at the top, enter S3, and under Services, click the S3 result:

alt

The Amazon S3 console will load.

 

2. Click the bucket name :

alt

Your updated static website content is stored in this S3 bucket. 

 

3. Click the Properties tab:

alt

 

4. Scroll down to the Static website hosting section and click the website URL under Bucket website endpoint:

alt

Your updated static website will open in a new browser tab:

alt

 

5. Click on the link to the Public content to display the following:

alt

The page will render a publicly accessible image that is stored in your Amazon S3 bucket.

 

6. Click back in your browser to the main page and click on the link to the Private content.

 

7. You are automatically redirected to the following error page:

alt

Although this type of default error message page is common practice, it does not provide much insight to your users. In the URL at the top of the browser window, you will notice the file that your site is attempting to render is the private.html file.

Up next, you will locate this private.html file in this bucket to determine what is actually causing the error, and provide a more suitable error message for your end users who attempt to access this part of your website.

 

8. Click back to the browser tab with the Amazon S3 console open.

 

9. On the newsitebucket page, click the Objects tab to view the contents of your website:

alt

 

10. Click private.html in the list of objects to view its overview page.

 

11. Locate the URL link under Object URL and open the file in a new browser tab:

alt

The following error will be returned:

alt

When you attempted to access this private.html file in your static website, it rendered the default error page set on the bucket.

In order to provide a better experience for your users, you will redirect any requests that result in this error to a custom page that notifies your users that they simply do not have access to this content.

 

12. Click back to the browser tab with the Amazon S3 console open and click Buckets on the left-hand navigation pane:

alt

 

13. Click , then the Properties tab, and scroll down to the Static website hosting section:

alt

 

14. Click Edit:

alt

 On the static website hosting edit page, you will notice the Index document and Error document fields defined. As a refresher, the Error document field is responsible for rendering the default error message you saw at the beginning of this lab step: 

alt

 

15. To override this default error behavior, paste in the following JSON routing rule in the Redirection rules field:

Copy code
[
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": "403"
        },
        "Redirect": {
            "ReplaceKeyWith": "error/access-denied.html"
        }
    }
]

The routing rule above is defined as a JSON array that contains one object. 

  • Condition: This element describes the condition that must be met for the specified redirect to be applied
    • The HttpErrorCodeReturnedEquals condition will be met when your website returns a 403 error code
  • Redirect: ​​​​This element provides instructions for redirecting the request
    • The ReplaceKeyWith is the object key to return in the response. Your custom access-denied error page

 

16. Click Save changes:

alt

 

17. Visit the Bucket website endpoint for the  and navigate to the Private section once more:

alt

You will be presented with a brief animation and Access Denied message indicating that permissions are required to access that part of the website. You will also notice the resulting URL now displays the error/access-denied.html path at the website URL. The conditional routing rule you set for any 403 error has successfully forwarded the user to this custom error page.

Note: If you do not see the updated content, as shown above, double-check the static website hosting configurations and clear your browser cache (for the past 1 hour):

 

 

Summary

In this lab step, you configured a conditional redirect routing rule to forward 403 response traffic to a custom error page.

To dive deeper into Amazon S3 URL redirection, including additional routing rule examples, refer to the AWS User Guide that covers how to configure a webpage redirect.

Validation checks
1Checks
Configured Conditional Redirect on S3 Bucket

Check if conditional redirects were added to existing S3 static website configuration.

Amazon Simple Storage Service (S3)