Background image disappears after editing .htaccess - html

Question

this is my first time with editing .htaccess, the situation is that I need to restrict access to a website for anyone except several IP-addresses and redirect others to a specific page. To do that I am using the following code in .htaccess:
RewriteEngine on
RewriteCond %{REMOTE_ADDR} !XXX.XXX.XXX.XXX
RewriteRule (.*) index.html [QSA,L]
The problem begins when I change the IP in this file - the background image which is used for the in index.html and stated in its internal css just stops appearing. I have tested this in Chrome and Firefox, in Firefox the background image reappears when the IP is changed to the one I have, in Chrome it doesn't reappear even after the IP changed back. I hope someone will be able to help me.
Best regards.

Answer 1

While rewriting is a powerful technique, it has many caveats and is relatively complex to get right. Here, the solution is not to use mod_rewrite at all. Apache's mod_authz_host module allows you to use the Require directive to specify which IP addresses are allowed to access resources.
If you need to display a specific page in case the Require is not satisfied, just specify an ErrorDocument for the error 403 (forbidden) which will be triggered.
If the error page then needs to access other resources, they need to bypass the IP restriction and be allowed using the Require directive:
Here is how your .htaccess file will look like:
Require ip XXX.XXX.XXX.XXX
ErrorDocument 403 /index.html
<Files "specific_image.png">
Require all granted
</Files>
Note that this causes an internal redirection in Apache.
If you want an external redirection and have the user have the actual index.html file in their browser's address bar, the configuration becomes a little bit more complicated because the file must be specifically allowed:
Require ip XXX.XXX.XXX.XXX
ErrorDocument 403 %{REQUEST_SCHEME}://%{HTTP_HOST}/index.html
<Files "index.html">
Require all granted
</Files>
<Files "specific_image.png">
Require all granted
</Files>
Note the use of variables to avoid hard-coding the absolute URL to the index.html file. Using a complete URL here is necessary to trigger the external redirection.