In this post, we will understand the purpose of .htaccess file and why it is useful.

Each server has its own configuration settings through one or more configuration files. These configurations apply to all web applications running on them.

What if we wish to change configuration for a particular web application?

What if we wish to change configuration for a particular directory of a web application?

We need to override server settings from outside. Apache server allow us to override its settings with the help of .htaccess file placed in a directory.

For this post, I’m running Apache server under XAMPP in a Windows environment but should be similar on other operating systems as well.

The Apache configuration file is httpd.conf which can be found in apache\conf folder. Open this file in a text editor. Find DocumentRoot in the file, you should see a line similar to this:

DocumentRoot “C:/xampp1.8/htdocs”

The value of path depends where you installed your Apache. This specifies the location where you have to put your web applications. Apache will look in this directory whenever a request arrives for a web application.

Below this line, you will find the Directory tag similar to this:

<Directory "C:/xampp1.8/htdocs">

Here you have directory level settings. Now, to allow overriding of settings, we need to change the line:

AllowOverride None

To

AllowOverride All

 

1. Disable directory listing

Let’s create a folder named test under c:/xampp1.8/htdocs folder. Next, create following two files inside the test folder:

hello.html

<html>
<body>
Hello there!
</body>
</html>

bye.html

<html>
<body>
Bye for now
</body>
</html>

Start the Apache server if not running. Now go to the url:

http://localhost/test

You will see a listing of files on the page. This is not good as we don’t want to show all our files to the public. To fix this, either we modify the httpd.conf file or the better one, create .htaccess file for our test folder and disable the listing there.

Create .htaccess file in your test folder and add following line in it:

Options -Indexes

Now access the above url and you will a forbidden page. Here we are telling Apache that only look for the welcome file and don’t list any other files. Create a new file index.html in the test folder and add following code:

<html>
<body>
Welcome page
</body>
</html>

Now access the same URL and you should see the index page.

2. Password protection on directory

Now, there might be a secure directory in our application which should be accessed only by admin and is not available for public. With the help of .htaccess and .htpasswd, we can show login form whenever someone tries to access the secure folder.

Create a new folder named secure under test folder. Also, create two blank files .htaccess and .htpasswd inside the secure folder. Create a new file employees.html inside the secure folder with following html:

<html>
<body>
CTO: Ashutosh Pandey
<br/>
CEO: Abhay Aggarwal
</body>
</html>

What we want is that whenever someone tries to hit the URL:

http://localhost/test/secure/employees.html

a login form should popup asking for credentials. To implement this, modify the two files like this:

.htaccess

AuthType Basic
AuthName "Restricted area"
AuthUserFile c:/xampp1.8/htdocs/test/secure/.htpasswd
require valid-user

.htpasswd

ashutosh:$apr1$qJjKm7zS$54cNf.uIiGZg9JqrHHBAJ0

.htpasswd contains username:password format. You can use any online tool to generate password.  In the above statement, the password is pandey

3. Redirecting to a resource

We can also use .htaccess file to redirect a URL to a difference resource. Sometimes we modify the location of a file, but search engines and customers might have the older URL. In such case, it is recommended to redirect the old URL to the new one.

Here is an example:

Let us say we want to redirect the url:

http://localhost/test/hello.htm

To

http://localhost/test/hi.htm

For this, update the file test\.htaccess and add the following line:

Redirect 301 /test/hello.htm /test/hi.htm

Create a new file hi.htm in the test folder with following lines:

<html>
<body>
Hi there!
</body>
</html>

Now try to access the URL:

http://localhost/test/hello.htm

and you should be redirected to hi.htm