restrict browsing to some resources

Question

I have a website(angular) hosted on a apache server and i want to deny access to some path for security purposes

The website is currently organized like this

index.html
polyfills.js
scripts.js
main.js
package.json
styles.css
assets
     configuration
                  configuration.json
     styles
                  images

I want to rescrict url access to configuration.json , package.json

I tried to add a rule in my .htaccess for testing

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /myapp/
    RewriteRule ^index.html$ -[L]
    RewriteRule ^refresh.html$ -[L]
    # added rule
    RewriteRule (^|/)configuration.json(/|$) - [F] 
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.html [L]
</IfModule>

It correctly forbids the usage of path /myapp/assets/configuration/configuration.json but it prevents also other resources (like main.js and polyfills.js) to use the configuration file which i dont' want because i can't access to the website anymore due to errors in browser console
I want only forbid direct url access

Browser console log

polyfilles.js : GET http://xxxx/myapp/assets/configuration/configuration.json 403 (Forbidden)
main.js : ERROR () => new Error('Error retrieving configuration file. ' + error)  

How can i avoid this ?

Thank you very much

Answer 1

You can't block a resource from client access if it needs to be accessed from the client (using JavaScript). So, what you are asking is not really possible without restricting all client access (eg. user/password authentication), but then any authenticated users can still access these files.

You could prevent "casual" direct access by customising the client-side request with a custom HTTP request header and check for this header in .htaccess and block otherwise. However, this depends on how these files are currently being called as it will require an update to your JS code.

For example, when requesting package.json or configuration.json you also send an HTTP request header like X-Custom-Header: some-value.

In .htaccess you can block requests that don't have this header (or it is not the correct value). For example:

RewriteCond %{HTTP:X-Custom-Header} !^some-value$
RewriteRule (^|/)(package|configuration)\.json$ - [F]

This only prevents casual direct access, ie. someone types the URL directly into the browser address bar. Since the file is still downloaded to the browser, the user can still read the file in the browser (dev tools). The header can also be easily faked if someone is so inclined. So, this doesn't provide any real security.

Instead of sending a custom HTTP request header, you could perhaps check the Referer header (if this is being set for such requests). However, this is less reliable as the browser can be configured not to send the Referer header. And again, this is easily faked.