Pages

Monday, 30 December 2013

Securing PHP Files using HTTP Authentication

IntroductionIt is quite common to have the need to password protect a certain file or a set of files, in order to prevent unauthorized access to those files. There are many different alternatives on how to do this including, sessions, cookies, JavaScript and HTTP authentication. The latter of these is what we are going to concentrate on in this article.
Usually this form of authentication is called Apache HTTP Authentication as it is only available for Apache based web server. To be honest, that is a lie as it is also possible with Microsoft's IIS web server, however, is much more difficult to implement and requires many configuration changes in order for it to run successfully. Hence, we will only focus on getting this working under Apache.
Apache
For those of you who don't know what Apache is, it is a web server. Therefore, it is the 'program' that is running PHP and that accepts incoming requests for web pages and sends out the correct data. As we are focusing on Apache in this article, it is important to know if you are running Apache or not. This is fairly simple to find out, using thephpinfo() function. Simple create a PHP page with the following code:
phpinfo();
?>
Run this new file and you should get an output which contains a lot of information about your current PHP setup. The most important section is the top section, and should look something like the following:
Look at the Server API field and make sure that it says Apache. If it does, then you are running the perfect configuration – Apache with PHP as a module. The field may say CGI, if it does, you will have to scroll down the page, and check if there is an 'Apache' section. If there isn't, it is likely that you aren't running Apache, hence this article probably won't be of much use. If you want, you can always install Apache on your PC by checking out this auto-installer.
If you are running Apache and CGI-mode, then there is a slight chance that the code supplied will not work, however, I have modified it so that your chances are quite high. By default though, HTTP Authentication doesn't work in CGI mode, however with a small trick it can be made to work.
What is HTTP Authentication?
You may not consciously know what HTTP Authentication is; however, it is most likely that you have used it once or twice, if not many of times. It is used commonly as login interfaces to the administration areas of some PHP scripts, as well as some popular websites, such as vBulletin.com. To refresh your memory, here is a small image of the login process:
Now that you know what HTTP Authentication is, it's time to find out how to implement it for single and multiple files.
Protecting Single and Multiple FilesWe are going to start off adding password protection to a single file, and then modify that so we add it to multiple files. The way HTTP authentication works, is by using HTTP headers which the browser and the web server (Apache) both understand. By using the correct headers we can produce a page which asks for the user to login. If the entered information is correct, we show the page, otherwise we show a nice error message.
As I mentioned, the basis of HTTP authentication is using HTTP headers, which are accessible by using the PHPheader() function. This specifics of this function have been explained before in great detail in Speed Limit File Downloads. However, for the sake of drilling it into your brains, the most important thing about the header() function is that there can be no output to the browser before calling header(). If there is, you will receive a nasty error and the script will cease to function.
Here's the code:
HTTP Authenticationif (@$_SERVER['PHP_AUTH_USER'] != 'john' && @$_SERVER['PHP_AUTH_PW'] != 'secret') {
header('WWW-Authenticate: Basic realm="Site Administration Area"');
header('Status: 401 Unauthorized');
/* Special Header for CGI mode */
header('HTTP-Status: 401 Unauthorized');
?>
Access Unauthorized
Access to the requested page denied
You have been denied access to this page for entering an
incorrect or non-exist username and password.
Press 'Refresh' to retry the login procedure.
exit;
}
echo 'Welcome to our site, username ' . $_SERVER['PHP_AUTH_USER'];
?>
This code contains all the important aspects of HTTP authentication that you need to get started. First thing to notice is that there is no output before header() calls. Secondly, notice that we have two special variables inside the$_SERVER superglobal. These are PHP_AUTH_USER and PHP_AUTH_PW and they represent the current HTTP authenticated username and password. As they may not exist when we call our script, I have placed an 'at' symbol (@) before both of these variables. The @ symbol tells PHP to suppress any errors that may arise in the specified statement. Hence, we know that an error might occur because these variables may not yet exist, so we use @ to suppress it.
The way the headers are written are very important using this method of authentication, as very slight changes can result in the login procedure not working and everyone having access to your file(s). It is important that the orders of the headers are correct and that the actual content is correct. For example, for maximum compatibility, the B in Basicmust be capital, as well as the text in realm being surrounded in double quotes, not single.
In the first header, we have a realm option. This is where we can place some text that will go on our username / password request form. You shouldn't place too much text here, just a basic description of what the user is logging in to.
The usage of this script is a little strange to visualize, because first we check if the user is logged in, and if not, then we send some headers and then end the script. If actual usage, after the headers are sent, the browser waits from the input from the user. Once the user clicks on the OK button, it will then reload the script, to check if the username and password combination are correct. If not it will display the login again (up to three times), and then upon failure will show the error page. If the username is correct, it skips the headers section, and just displays the normal content of your script.
Securing Multiple Files
Most of the time when you are password protecting an area on your website, you will need to secure more than one page. What you would then do, if move all the above code into an include file, and then include the file on any page that you want to password protect. This could become cumbersome, especially if you are already including many files. The alternative is to convert this into a function, so that you can add it into a function library file (which you might already have). This way, the code is always available, and we can make it a little more reuseable.
Reusable Codefunction validateUser ($fUsername = 'john', $fPassword = 'secret') {
if (@$_SERVER['PHP_AUTH_USER'] != $fUsername && @$_SERVER['PHP_AUTH_PW'] != $fPassword) {
header('WWW-Authenticate: Basic realm="Site Administration Area"');
header('Status: 401 Unauthorized');
/* Special Header for CGI mode */
header('HTTP-Status: 401 Unauthorized');
?>
Access Unauthorized
Access to the requested page denied
You have been denied access to this page for entering an
incorrect or non-exist username and password.
Press 'Refresh' to retry the login procedure.
exit;
}
}
?>
Now we have a function called validateUser which takes two parameters; $fUsername and $fPassword. These are the username and password that you want the user to login with. I have also added default values so that if you do not specify a username or password (maybe you forget to), then the user can log in with the default values.
This function can then be added to a library file of functions. These are used to hold commonly used functions in your programs and are usually necessary if you are writing a lot of scripts. Commonly, I use global.php for my library functions.
index.phprequire_once('globa.php');
validateUser('john', 'newsecret');
echo 'Welcome to our secret area!';
?>
Here I have assumed that you have placed the function into a file called globa.php so that we can include it. I have used require_once() to include the file, so that if PHP cannot find the file, the script will exit and also the file will not be included more than once. Now to run the authentication routine, we just make a simple call to validateUser() with the username and password we expect the user to log in with.
These examples are useful if you only have one or two people logging into your site and they share the same username. However, sometimes you may want to allow a multitude of people to access this area. For this, it is common to use databases.
Allowing Multiple UsersThere are two main methods of allowing multiple users password protected access to your website. The first being username/password files and the second being username/password tables in a database. As many people use database nowadays, I will now focus on this method. In order to implement a file based version of this script, you will have to save usernames and passwords to a file (username,password on each line). You would then read each line, and check if the username and password match.
Back to the main topic of databases! They are useful in this sense, and often websites have a dynamic Content Management System (CMS) for their website which has allows for several users or authors to access this area. The author data is already stored in the database, so there is no need to add a file or more data. I'm going to assume you know a little about how to access MySQL databases in this section, but don't worry, it should be too difficult.
To start of with, we need a table of the usernames and passwords. This is SQL which can be executed by running MySQL via the command line, or by using a script such as phpMyAdmin.
CREATE TABLE 'users' (
'userID' INT NOT NULL AUTO_INCREMENT,
'username' VARCHAR( 20 ) NOT NULL ,
'password' VARCHAR( 20 ) NOT NULL ,
PRIMARY KEY ( 'userID' ) ,
UNIQUE ( 'username')
);
Now, let's enter a few users:
INSERT INTO 'users' ( 'userID' , 'username' , 'password' )
VALUES ( '', 'john, 'secret');
INSERT INTO 'users' ( 'userID' , 'username' , 'password' )
VALUES ( '', 'peter', 'othersecret');
INSERT INTO 'users' ( 'userID' , 'username' , 'password' )
VALUES ( '', 'billy', 'ilovecats');
Now we have our database table setup called users. On my computer, I have this table in a database called myCms so we will use that in our examples.
To get going, we must first connect to the database. At the same time, we are also going to convert all this into our own function so that it is again reusable in the future.
Connect
function validateUser () {
mysql_connect('dbusername', 'dbpassword', 'localhost') or die(mysql_error());
mysql_select_db('myCms') or die(mysql_error());
}
?>
Here we have connected to the database using our database name and password. You must change the username and password for your setup. We then select our database (myCms). If any errors occur the script is terminated and the error is outputted using die(mysql_error()). This is especially useful in determining any bugs in your scripts.
Now we must query the database and check if the username and password that has been entered is correct:
function validateUser () {
mysql_connect('dbusername', 'dbpassword', 'localhost') or die(mysql_error());
mysql_select_db('myCms') or die(mysql_error());
$user = @addslashes($_SERVER['PHP_AUTH_USER']);
$password = @addslashes($_SERVER['PHP_AUTH_PW']);
$sql = "SELECT Count(*) as Number FROM users WHERE username='" . $user . "' AND password='" . $password . "'";
$query = mysql_query($sql) or die(mysql_error());
$result = mysql_fetch_array($query);
$NumberOfUsers = $result['Number'];
}
?>
This may be a little daunting but it is simple in essence. All we have done, is modified the input username and password by calling addslashes() on them. This is a security issue and should always be performed on user input to database, to prevent them from gaining unauthorized access.
We then have our query, which selects (gets) numbers of records that meets our conditions. Our conditions state the username and password must match the ones that the user has entered.
Following this, we execute the query, get the results and then assign the result called Number to a variable called$NumberOfUsers so that we can use it. Now all that's left to do, is the standard header output:
Altogether Now
function validateUser () {
mysql_connect('dbusername', 'dbpassword', 'localhost') or die(mysql_error());
mysql_select_db('myCms') or die(mysql_error());
$user = @addslashes($_SERVER['PHP_AUTH_USER']);
$password = @addslashes($_SERVER['PHP_AUTH_PW']);
$sql = "SELECT Count(*) as Number FROM users WHERE username='" . $user . "' AND password='" . $password . "'";
$query = mysql_query($sql) or die(mysql_error());
$result = mysql_fetch_array($query);
$NumberOfUsers = $result['Number'];
if ($NumberOfUsers != 1) {
header('WWW-Authenticate: Basic realm="Site Administration Area"');
header('Status: 401 Unauthorized');
/* Special Header for CGI mode */
header('HTTP-Status: 401 Unauthorized');
?>
Access Unauthorized
Access to the requested page denied
You have been denied access to this page for entering an
incorrect or non-exist username and password.
Press 'Refresh' to retry the login procedure.
exit;
}
}
?>
This is essentially the same as the code of the previous page, however this time, as we have queried the database for the number of users where the username/password match, we do not have to again check the input username/password. Instead, we have the number of users with the correct match – this should equal to 1 or 0, and never more. Hence, we check if the number does not equal to 1, if so, we send the headers.
As we have defined this all in a function, we can again move this into a library file and now we can call this on every page using this method:
Multiple Pages
require_once('global.php');
validateUser();
echo 'Welcome to the secured area!';
?>
This is almost the same as previously, except there are no parameters for the validateUser() function as all the username / password combinations are taken from the database.
I hope this article has helped you gain an understanding on how to password protect your website using this simple but efficient method. You should now try it out for yourself, or maybe consider implementing the file based version.

Friday, 27 December 2013

Html Chapter -7

Meta Tag: The <meta /> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Metadata is information about data.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The <meta> tag always goes inside the head element. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.


<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Hege Refsnes" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
</head>
<meta http-equiv="refresh" content="5" />

Object Tag (<object> </object>):

Object tag is used to add other objects in our web page like images, text files, web pages, pdfs etc.
EX:  <object type="image/jpeg" data="images/flower.jpg" height="400" width="400">     </object>
Ex: <object type="image/gif" data="images/light.gif" height="340" width="480">             </object>
Ex: <object type="text/plain" data="images/Txt.txt" height="340" width="480">     </object>
Ex: <object type="text/html" data="Bgproperties.html" height="600" width="500">           </object>
Ex: <object type="application/pdf" data="images/You_can_Win.pdf" height="500" width="100%"></object>

<fieldset> </fieldset> and <legend> </legend> tags: Fieldset tag is used to set border for a html element and <legend> </legend> tag is used to provide caption for this border.
Ex:-      <fieldset>
                        <legend > My Heading</legend>
                        <h1>  This is heading 1 </h1>
            </fieldset>
We can apply style attribute to set width and height of border.
Ex:
<html><body>
            <fieldset style="width:20%">
                        <legend style="color:red"> Input From</legend>
                        <form>
                                    Name: <input type="text" name="name" /> <br />
                                    Password: <input type="password" name="pwd" /> <br />
                                    <input type="submit" /> <input type="reset" />
                        </form>         
            </fieldset>
</body></html>
 
 
Previous Chapter                                                                                                        

Html Chapter -6

Forms: We can retrieve data from the user and send it to the server through forms. We can create form using <form></form> tag.
<html> <body>
                  <form> </form>
</body> </html>

Attributes of form tag:
(a)method:  (get/post) This attribute defines which method should be called on server when data submitted to server.
When we specify get method data is sent to server through the url.
When we specify post method data is sent to server with headers.

(b) action:
This attribute specifies a page on server that will handle client’s request and process it.
<form action=”DoThis.php” method=”post”>
              ========
</form>

(c) enctype: This attribute specify type of data that we are sending through the request.
<form method=”post” action=”a.php” enctype=”text/plain”>    </form>
                                           or
<form method=”post” action=”upload.php” enctype=”multipart/form-data”>    </form>

(d) name: We can give a name to the form with this attribute.

Form Fields: Form fields (Text Field, Radio Buttons, Check Boxes and Buttons etc.) are used to take input from user. <input /> tag is used to create form fields.
Attributes of <input /> tag:

Attribute
Description
Type
Type of input field(text ,password,hidden etc)
Name
Name for the input field.
Id
Unique id for the field (Used in java script)
Size
Visible amount of field.
Value
Initial value for field.
Maxlength
Maximum no of characters for input.
disabled
(Property) To disable the field.
Readonly
To create the field read only.


(1) Text Field (input type=text):
This is used to read a single line of text from user.
      Ex:= <input type="text" name="txtName" value="Initial Value" size="20" maxlength="16" />

(2) Password Field (input type=password):It is used to read password from user.
      Ex: =  <input type="password" name="pwd" size="10" />

(3) Hidden Field (input type=hidden):It is used to pass some hidden information which is not visible to user.
      Ex:=  <input type="hidden" name="hide" value="This is Hidden" size="10" />

(4) CheckBox (input type=checkbox):If we want to select multiple values from user then we can use checkboxes.
 EX:       <form method="" action="">
                  Music : <input type="checkbox" name="ch1" value="chk1" /> <br />
                  Games : <input type="checkbox" name="ch2" value="chk2" /> <br />
                  Reading: <input type="checkbox" name="ch3" value="chk3" />
              </form>

(5) RadioButton (input type=radio) :Radio button are used to choose single value from multiple values.
EX: <form method="" action="">
            Male: <input type="radio" name="r1" value="rb1" /> <br />
            Female : <input type="radio" name="r2" value="rb2" /> <br />
        </form>
By default radio buttons are not mutually exclusive. If we want to make them mutually exclusive than we should named them with same name.
EX:
<form method="" action="">
            Male: <input type="radio" name="r1" value="rb1" /> <br />
            Female : <input type="radio" name="r1" value="rb2" /> <br />
</form>

(6) Buttons: We can make push buttons with input tag.
(a) submit button (input type=submit) : Submit button is used to send form data to server. Data is submitted to server when user clicks on a submit button.
<input type=”submit” name=”submitBtn” value=”Submit Form” />
(b) reset Button (input type=reset) :reset button is used to reset all form fields to their initial state.
<input type=”reset” name=”resetBtn” value=”clear” />
(c) A simple push button (input type=button):
<input type=”button” name=”b1” value=”Click me” />

(7) TextArea <textarea> </textarea>: Text area is used to read multiline text from user. We use <textarea> </textarea> tag to create a text area.
Attributes of <textarea> </textarea> tag:
(a) name: specifies name of text area.
(b) cols: specifies visibility of textarea in number of coloumns.
(c) rows: specifies number of visible rows in the text area.
            <textarea name=”txtArea” cols=”20” rows=”3” >
                        Initial text ………..
           </textarea>

Simple Form Example:
<html>
<head>           <title> Input Form </title>       </head>
<body bgcolor="gray" text="white">
<form id="form1" name="form1" method="post" action="">
  Name :   <input name="name" type="text" id="name" />  <br />
  Age :   <input name="age" type="text" id="age" size="4" maxlength="2" />  <br />
  Password : <input name="pwd" type="password" id="pwd" /> <br />
  Address : <textarea name="address" cols="50" rows="3" id="address"></textarea> <br />
  Gender : <br />  Male : <input name="radiobutton" type="radio" value="Male" />
                                                                                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                Female <input name="radiobutton" type="radio" value="Female" /> <br />
  Hobbies : <br /> Games : <input name="cb1" type="checkbox" id="cb1" value="games" />
                                                                                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                Music : <input name="cb2" type="checkbox" id="cb2" value="music" />
                                                                                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                Dance : <input name="c3" type="checkbox" id="c3" value="dance" /> <br />
   <input type="submit" value="Send" />
                                               &nbsp;&nbsp;
    <input type="reset" value="Clear All" />
 </form>
</body> </html>

(8) Drop Down List: It is used to provide drop and select functionality to user. Two tags are used to create a drop down list.
(a) <select></select>
(b)<option> </option>

Example:

<select name="sel_op">
            <option value="a"> aaa </option>
            <option value="b"> bbb </option>
            <option value="c" selected> ccc </option>
            <option value="d"> ddd </option>
</select>

attributes of <select> </select> tag:
(a) name: specifies name for drop down list.
(b) size: specifies number of visible rows for drop down list.
(c) multiple: This is a property it is used for multiple selection.

Example:
<select name="sel_op" size="4" multiple>
            <option value="a"> aaa </option>
            <option value="b"> bbb </option>
            <option value="c" selected> ccc </option>
            <option value="d"> ddd </option>
            <option value="e"> eee </option>
            <option value="f"> fff </option>
</select>

(9) File Browser Dialog: It is used to select files for uploading. <input /> tag is used to create file browser dialog with type attribute assigned value ‘file’.
             <input type=”file” name=”upload_file” />

Note: We can use image in place of a submit button by specifying type attribute as image in input tag.
          <input type=”image” src=”path” />
All <img /> attributes can be used with this input type.
Ex: <input type=”image” src=”c:\a.gif” width=”100” height=”50” border=”0” alt=”submit” />
                             ====================*************===================

<marquee> </marquee>:- Scrolling messages and images can be created through marquee tag.
          <marquee>  Scrolling Text </marquee>

Attributes of marquee tag:
(1). bgcolor: specify background color for scrolling text.
(2). behavior: this attribute specifies scrolling behavior of text.

Values
Effect
alternate
Go to one side and come again
scroll
Text goes only in one direction
slide
Text goes in one direction and stops.
(3). direction:  Specifies scrolling direction. Possible values for this attribute are down, left, right, up.
EX:      <marquee bgcolor="green" behavior="alternate" direction="right">  Scrolling Text  </marquee>
(4). height/width: Specifies height and width of scrollable area for scrolling message.
(5). scrollamount: Specifies scroll amount (speed) for text.
Ex: <marquee scrollamount="20">  Scrolling Text  </marquee>
(6). scrolldelay: specifies scrolling delay for text. (in milliseconds.)
Ex: <marquee bgcolor="#00ff33" scrolldelay="1000">  Scrolling Text  </marquee>

Example:
<html>            <body>
                        <marquee bgcolor="#FF99FF" height="600" width="600" direction="up" behavior="alternate">
                                    <marquee behavior="alternate" direction="left">
                                                <h1 style="color:#0000CC"> Bodacious IT Hub Pvt. Ltd. </h1>
                                    </marquee>
                        </marquee>
</body></html>

Background Sound (<bgsound />) tag: We can play sounds in background of our web page using <bgsound /> tag.
Attributes:
(a) src: Specifies source for background sound file.
(b) loop: This attribute specifies how many times music should be played and -1 specifies an infinite loop.
<html>
<head>
            <bgsound src="a.mp3" loop="-1"  />
</head>
</html> 
 
Previous Chapter                                                                                                                  Next Chapter

Html Chapter -5


Frames:We can divide a web page into frames and each frame can display other web pages.
There are only two main frame tags.
(1) <frameset></frameset>                    (2) <frame />

Example:
<html>
<head>
<frameset cols="50%, 50%" >
                  <frame src="a.html" />
                  <frame src="b.html" />
</frameset>
</head>
</html>

Example:
<html>
<head>
<frameset rows="10%,20%,30%,15%,25%" >
                  <frame src="a.html" />
                  <frame src="b.html" />
                  <frame src="c.html" />
                  <frame src="d.html" />
                  <frame src="e.html" />
</frameset>
</head>
</html>

Example:
<html>
<head>
<frameset cols="50, * , 2* " >
                  <frame src="a.html" />
                  <frame src="b.html" />
                  <frame src="c.html" />
</frameset>
</head>
</html>

Note :  We cannot add body on a framed page.

We can also define frames under a frame.
Example:
<html>
<head>
<frameset cols="50, * , 2* " >
                  <frame src="a.html" />
                  <frame src="b.html" />
                  <frameset rows="*,*" >
                                    <frame src="c.html" />
                                    <frame src="d.html" />
                  </frameset>
</frameset>
</head>
</html>

Example:
<html>
<head>
<frameset cols="*, *" rows="*,*" >
                  <frame src="a.html" />
                  <frame src="b.html" />
                  <frame src="c.html" />
                  <frame src="d.html" />
</frameset>
</head>
</html>

Other attributes of <frameset > </ frameset > tag:

Border:Specifies width of frame border.
bordercolor: specifies color for the border of frame.

Other attributes of <frame  /> tag:

Scrolling:
specifies scrollbars will be provided by browser or not. Possible values for this attribute are yes, no, auto.
noresize:
This is a property and specifies that frame cannot be resized.
name: this attribute specifies name of the frame.
Example:
<html>
<head>
<frameset cols="50, *, 2*" border="15" bordercolor="#00FFFF">
                  <frame src="a.html" noresize/>
                  <frame src="b.html" scrolling="no" />
                  <frame src="c.html" />
</frameset>
</head>
</html>

Linking between frames:- We can link pages between frames i.e. when we click on a hyperlink the linked page is opened in another frame.
We have to specify name property in the frame tag to do this and then specify this name in target attribute of hyperlink.
Example::
Left.html :-

<html>
<body bgcolor="yellow" text="red">
                  <h1> Go to <a href="Link.html" target="RightFrame"> Link Page </a> </h1>
</body>
</html>

Right.html :-

<html>
<body bgcolor="red" text="yellow">
                  <h1> This is Right Page.</h1>
</body>
</html>

Link.html :-
<html>
<body bgcolor="gray" text="#00FFFF">
                  <h1> This is Link Page.</h1>
</body>
</html>

Frame.html :
<html>
<head>
                  <frameset cols="30%,*" >
                                    <frame src="Left.html" name="LeftFrame" />
                                    <frame src="Right.html" name="RightFrame" />
                  </frameset>
</head>
</html>

There are four target values in an <a> </a> tag:
_top: Opens a link in the full browser window.
_blank: Opens a link in a new browser window.
_self: Opens a link in same browser window or frame (same as doing nothing).
_parent: Opens a link in the immediate frameset parent.













Previous Chapter                                                                                                                Next Chapter