I am building an html site using the include method shown here from w3schools
https://www.w3schools.com/howto/howto_html_include.asp
the site basically looks like the following
<div w3-include-html="navigation.html"></div>
<body>
</body>
<div w3-include-html="footer.html"></div>
It works great when you're on the right pages of the website but if I navigate directly to navigation.html it displays a terrible looking and useless page.
I tried to redirect it using the .htaccess file with something like the following so a user could gracefully land on a page that says sorry this doesn't exist, click here blah blah...
Redirect /navigation.html /page-not-found.html
however that ends up causing the navigation bar on all my real pages to display the html within the page-does-not-exist.html page.
Is there an easy way to use .htaccess to redirect a user who is directly typing in www.example.com/navigation.html to www.example.com/page-not-found.html while still allowing my other pages to 'include' it normally?
Thank you for any help you can offer.
This method uses JavaScript (XMLHttpRequest object, ie. "AJAX") to make an HTTP request for the document on the server. Ordinarily, this is no different (from a server perspective) to a direct request that the client might make by typing the URL for the file directly.
You need to make the JavaScript request different so it can be detected by the server.
You can add a custom HTTP request header (or override the User-Agent string) to the JavaScript request and check for this header using mod_rewrite in .htaccess on the server to send an alternative response if this header is not set as expected (ie. if the file is requested directly).
For example, based on the code from w3schools, add a second line after creating the XMLHttpRequest object:
xhttp = new XMLHttpRequest();
xhttp.setRequestHeader('User-Agent','XMLHTTP');
This sets the User-Agent header in the JS request to XMLHTTP. We can then check for this using mod_rewrite and serve a 404 if not set.
However, you should not "redirect" to the page-not-found.html script. Set this as a custom 404 error document instead and allow Apache to serve this.
For example:
ErrorDocument 404 /page-not-found.html
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !=XMLHTTP
RewriteRule ^navigation\.html$ - [R=404]
Any request for /navigation.html where the User-Agent string is not XMLHTTP is served the custom 404 error document, ie. /page-not-found.html. So, only requests from your script are permitted.
NB: This is not a security feature, it simply prevents anyone who casually types the URL into the browser from seeing the content (including search engines).
Aside:
<div w3-include-html="navigation.html"></div> <body> </body> <div w3-include-html="footer.html"></div>
It looks from this that you are including HTML elements outside of the HTML body? This isn't valid HTML.