How to prevent direct access to CSS and JS files

Question

Possible Duplicate:
How can I block direct access to my JavaScript files?

I have a folder and inside it there are around five more which looks like following:

 1.asset(folder)
       1.1 css (subfolder)
              1.1.1 style.css (file)
       1.2 javascript (subfolder)
                     1.2.1 validation.js (file)
 // goes on like this

Now my question is how to prevent my css to appear when any user hits - my_base_url/asset/css/style.css on the browse?

I tried blank index.html but it doesn't work. I also tried using "deny from all" .htaccess file but in this case when I load my website it doesn't find the CSS..

Solution 1

What you're asking for is, technically, impossible.

In order for the browser to be able to use the CSS, it must have access to it. Ditto Javascript.

The best you can do is obfuscate the sources. You could do this by using a processed language - such as Stylus or LessCSS for CSS, and Coffeescript for JS - or by making the delivery more complicated. You could minify the script files, or even have them dynamically generated and fetched (in small pieces) by another JS file.

However, anything you do can be reverse-engineered, because the users must be able to access the rules in order for the browser to use them.

Solution 2

If you mean you don't want to show the directory listing for your css and js directories, add the following to your .htaccess file:

Options -Indexes

from: http://www.thesitewizard.com/apache/prevent-directory-listing-htaccess.shtml