Having 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 custom error page for your web application then you must consider doing it for many reasons including below.

  • Branding – Show customized message with your brand logo and few line of messages to make visitor aware of the problem and link to contact the respective team.
  • Vulnerability – If you are working on PCI DSS compliance environment then you must consider fixing information leakage vulnerability, which is in default product error page.
  • Better UI – It’s all about better user experience and that you can provide on error page too. For ex – if a user requested content doesn’t exist then web server will serve 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 visitor 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

nginx-errorpage

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

GeekFlare-ErrorPage

Sounds good? Most likely you will either go to “Home Page” or click on any of the post shown below. That’s how 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 following as essential.

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

Pre-requisite – this assumes you have already built custom page.

Implement Custom Error Page in Apache HTTP Server

There are multiple ways to do this for 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 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 code. For redirection, you can just add 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

So far so good?

Implement Custom Error Page in Nginx server

  • 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.

Having custom error page is certainly recommended so go ahead and show off your custom error page.