Implement Custom Error Page in Apache & nginx – Using ErrorDocument & error_page

Having a default product error page from Apache HTTP or Nginx doesn’t look good, and it reveals version information, which leads to information leakage vulnerability.

If you haven’t’ implemented a custom error page for your web application, then you must consider doing it for many reasons, including below.

• Branding – Show customized messages with your brand logo and a few line of messages to make visitors aware of the problem and link to contact the respective team.
• Vulnerability – If you are working on the PCI DSS compliance environment, then you must consider fixing information leakage vulnerability, which is in the default product error page.
• Better UI – It’s all about better user experience and that you can provide on an error page too. Ex– if a user requested content doesn’t exist, then the webserver will serve the 404-default error page, and the most likely user will close the session. How about having a custom page where a user can search or show related items and proper navigation?

Sounds good?

Well, I am sure in this way you are retaining visitors to continue on a website and improve bounce rates.

Still not convinced?

Let’s take a look…

So this is the default “404 not found” page from Nginx

What would you do when you get this page?

Most likely, you will close that.

And this is the custom “404” page which I have implemented.

Looks much better?

Most likely, you will either go to “Home Page” or click on any of the searches shown below. That’s how the custom page helps.

Now you know the advantage, and it’s time to implement them. You can have a custom page in a number of HTTP status code events. I would think of the following as essential.

• 404 – Not Found
• 403 – Forbidden
• 500 – Internal Server Error
• 503 – Service Unavailable
• 504 – Gateway Timeout

Pre-requisite

I assume you have already built a custom page. If you need some 404 images, you can get it from Elements.

Implementing in Apache HTTP

There are multiple ways to do this. Ex – you can either do this using Rewrite or ErrorDocument directive. I will explain how to do with ErrorDocument directive.

• Login into Apache HTTP server
• Go to apache conf folder where you have httpd.conf file
• Take a backup of httpd.conf file
• Modify the httpd.conf and add ErrorDocument as below

ErrorDocument 404 /path/of/custom/error/file
ErrorDocument 403 /path/of/custom/error/file
ErrorDocument 500 /path/of/custom/error/file
ErrorDocument 503 /path/of/custom/error/file
ErrorDocument 504 /path/of/custom/error/file

Save the httpd.conf and restart the Apache server

Try to access something, which doesn’t exist, and you should have a custom error page instead of the default one.

Note: you may also redirect to some other URL in the event of these HTTP status return codes. For redirection, you can just add a URL next to each code, like below.

ErrorDocument 404 https://geekflare.com/errorpage
ErrorDocument 403 https://geekflare.com/errorpage
ErrorDocument 500 https://geekflare.com/errorpage
ErrorDocument 503 https://geekflare.com/errorpage
ErrorDocument 504 https://geekflare.com/errorpage

Implementing in Nginx

• Login into Nginx server
• Go to nginx.conf file location
• As usual, take a backup of conf file and add following under http block

error_page 404 /path/of/custom/error/file;
error_page 403 /path/of/custom/error/file;
error_page 500 /path/of/custom/error/file;
error_page 503 /path/of/custom/error/file;
error_page 504 /path/of/custom/error/file;

Save the file and restart Nginx to get this reflected.

Conclusion

You see, this tiny change can have a big impact, so why not implement it?