How to have .htaccess display 404.html for child pages

Question

I am working on a website example.com that has an error page example.com/404.html.

Here's my entire .htaccess file (Apache):

# Forces HTTPS

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] 

# 404 redirect

ErrorDocument 404 /404.html

# Disables directory indexing (being able to view a list of files instead of the actual webpage)

Options -Indexes

I'm using relative 404 so that it will display the content of the 404 error page without actually redirecting the user (and thereby changing the URL). This works great for upper level pages like example.com/nonexistentpage.html.

However, I am not sure how to handle child pages, like example.com/parent/nonexistentpage.html.

Currently, I have duplicated my existing 404.html page, modified it with ../ in all the URL references so it looks for resources in the correct location, and put the new "child" 404.html pages in each of my "parent" folders where there are child pages. When I access example.com/parent/404.html, the error page displays correctly with all styling and links where they should be. However, when I access example.com/parent/nonexistentpage.html, although the URL doesn't change, I get a generic, unstyled 404 error message instead of my custom 404.html page.

Am I missing something/doing something wrong? The goal is for the error page content to display when accessing nonexistent child pages while not redirecting/changing the actual URL. I also tried commenting out Options -Indexes, but that had no effect.

Thanks for any help/suggestions.

Answer 1

You shouldn't have to do anything. You would normally serve the same ErrorDocument regardless of what URL caused the error. In your case, you are serving /404.html in the document root of your site.

However, it sounds as if you are using relative URLs to your static resources inside your error document. This is never going to work (unless you set a base tag - but this is not without its caveats - see reference link below) since the error document could be served from anywhere and so the browser will resolve your relative URLs incorrectly (or at least, not as you intended). Instead, you need to use root-relative URLs (starting with a slash, as you have done for /404.html) or absolute URLs (including scheme + hostname).

when I access example.com/parent/nonexistentpage.html, although the URL doesn't change, I get a generic, unstyled 404 error message

Assuming your ErrorDocument directive is still set to serve /404.html and you are using relative paths in /404.html, then any relative URL-paths will naturally resolve relative to the /parent "directory", not the document root, as it would otherwise do if requesting example.com/nonexistentpage.html.

Remember it is the browser that resolves relative URLs, based on the URL being requested. This has nothing to do with the filesystem path on your server.

See this other related question for additional examples and discussion about the use of the base tag:

• .htaccess rewrite URL leads to missing CSS