Hosting vue app with Apache: Prevent source file access from URL

Question

I want to host a vue app on an Apache server - for learning purpose. For that I want Apache to support the Vue router and also I want that it is not possible to access source files via URL.

To support the router I added the following lines to my httpd.conf file:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

Vue documentation

So that is working. But now I want to prevent the access of my source files via URL. So I tried the approach from this answer: https://stackoverflow.com/a/10236791/9838670

RewriteEngine on 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost [NC] 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost.*$ [NC] 
RewriteRule \.(gif|jpg)$ - [F]

For testing I added CSS files to the rewrite rule

RewriteRule \.(gif|jpg|css)$ - [F]

But then my index.html could not access the files, too. Anyone an idea how to fix this?

My settings for the directory root. Also I am loading the module for the rewrite engine.

LoadModule rewrite_module modules/mod_rewrite.so

DocumentRoot "../../dist/"
<Directory "../../dist/">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options Indexes FollowSymLinks

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   AllowOverride FileInfo AuthConfig Limit
    #
    AllowOverride None

    #
    # Controls who can get stuff from this server.
    #
    Require all granted

    # THIS DOES NOT WORK
    # Rewrite engine
    # RewriteEngine on 
    # RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost [NC] 
    # RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost.*$ [NC] 
    # RewriteRule \.(gif|jpg|css)$ - [F]
    # RedirectMatch "^/$" "/home"

    <IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    </IfModule>

</Directory>

vue.js is the wrong choice if you don't want to part with your code. Go server-side, or accept that your code is downloaded to the browser. And if the browser can see it, the users can see it. — Olaf Kock, Jan 12 '22 at 18:10
Have I made a mistake in thinking here in general? Is it even possible that source files can not be called directly as URL (with Apache)? Or is the problem now only with Vue? Wouldn't it be possible to redirect paths like `css/*` to an error page? — michaelT, Jan 12 '22 at 18:17

score 1 · Answer 1 · answered Jan 12 '22 at 18:57

Let's say Apache document root is set to DocumentRoot "/folder_one/folder_two"

Placing files in a folder_one will prevent people browsing your apache server and requesting the files directly.

Place index file in folder_two and include some code such as PHP to tell apache to include whatever files you want from folder_one.

In this manor Apache will still be able to serve whatever files you want from folder_one and people will not be able to request the files directly as the are located in a directory above the Apache document root.

Hosting vue app with Apache: Prevent source file access from URL

1 Answers1