Team LiB
Previous Section Next Section

A Password-Protected Site

If you had thought about using a second Web page to verify the password after an initial page received it from the visitor, you came very close to the answer. What if, instead of using the second Web page to verify the password, the name of the second page was the password? If this were the case, the password would not need to be sent to the client at any time except after it is verified. In fact, if the visitor types in an incorrect password, all they will see is a 404 Page Not Found error.

I am getting a little ahead of myself, so let me provide an example here to illustrate my point whose file name is Protected_Page.html:

<html>

  <head>
    <title>
         Password Protected Site 
    </title>

    <script language="JavaScript">

    <!--
         function verifyPassword( word ) 
         { 
           document.location = word + ".html" 
         }
       -->
      </script> 
    </head>

<body>
  
   <form onSubmit="JavaScript: verifyPassword( this.password.value );">
        Please enter your password:&nbsp;  
     <input type="text" name="password" size="20"><br> 
     <input type="submit" value="Submit">
   </form>

</body>

</html>

I have removed all the worthless source code suppression functions and replaced the verifyPassword() function with

       function verifyPassword( word ) 
       { 
         document.location = word + ".html" 
       }

If you imagine for a second that the password for my site is something very unusual, such as y7v2xu89, and I create a Web page called y7v2xu89.html and put it in the same directory as my authentication page, then my Web site would be as secure as the secret password. If the visitor to my site enters a correct password, he is taken to an actual page through which he would have access to all of the protected content of my site. If he were to enter an invalid password, he would see nothing except that 404 error.

Because security is a very big issue in the Center Park school Web site project, I have decided to implement this password-protection technique. First, here is the login page where the visitors of my site will enter their user names and passwords; its file name is LogIn.html.

<html>

  <head>

    <title>

      Center Park Home Page Log In 
 </title>

<script language="JavaScript"> 
<!--
     function LogIn( form ) 
     {
        // Store the student name in the cookie file for later reference 
       document.cookie = "username=" + form.username.value; 
       // Make sure the password is correct 
      document.location = form.password.value + ".html";
    }
  
    function getCookieValue( name ) 
    {
       var c = document.cookie; 
       var begin = c.indexOf( name ); 
       if( begin < 0 ) return( "" ); 
       begin += name.length + 1; 
       var end = c.indexOf( ";", begin ); 
       if( end == -1 ) end = c.length; 
       return( c.slice( begin, end ) );
    }

    function setCustoms() 
    { 
       var bg = getCookieValue( "bgColor" ); 
       var fg = getCookieValue( "fgColor" ); 
       if( bg != "" ) document.bgColor = bg; 
       if( fg != "" ) document.fgColor = fg; 
    }
  // -->
  </script> 
</head>

<body onLoad="JavaScript: setCustoms();">

<center>

<font size=6><b>
     Welcome to Center Park Home Page 
</b></font>
</center>
<br><br>

To access the contents of this site, please log in using your student username and the password provided to you:

<br><br> 
<br><br>

<form name="login"  
         onSubmit="JavaScript: LogIn( this ); return( false );" > 
 <center>
   <table border="2" cellpadding="2" width="250">
      <tr>
         <td colspan="2"><b>Log In</b></td> 
      </tr>
      <tr>
          <td>Username:</td> 
          <td align="right"><input name="username" size="10"></td> 
        </tr>
        <tr>
             <td>Password:</td> 
             <td align="right"><input name="password" size="10"></td> 
       </tr>
       <tr>
            <td colspan="2"> 
            <p align="center"><input type="submit" value="Submit"></td> 
      </tr>
     </table>
 </center>
</form>

<script language="JavaScript"> 
<!--
     document.login.username.value = getCookieValue( "username" ); 
    // -->

   </script>

  </body> 
</html>

Now, using the same password that I used in the previous examples, here is the page a visitor will see if he or she enters a correct password. This example is y7v2xu89.html of the Center Park project:


<html>
  <head>
    <title></title>

    <script language="JavaScript"> 
    <!--
         var now = new Date(); 
         var months = new Array( "January", "February", "March", "April", 
                                   "May", "June", "July", "August", "September",  
                                   "October", "November", "December" );
         var yString = getCookieValue( "year" ); 
         var mString = getCookieValue( "month" ); 
         var y = fixYear( yString ? parseInt( yString ) : now.getYear() ); 
         var m = fixMonth( mString ? parseInt( mString ) : now.getMonth() ); 
         var month = new Date( y, m, 1 );

         function getCookieValue( name ) 
         {
           var c = document.cookie; 
           var begin = c.indexOf( name ); 
           if( begin < 0 ) return( "" ); 
           begin += name.length + 1; 
           var end = c.indexOf( ";", begin ); 
           if( end == -1 ) end = c.length; 
           return( c.slice( begin, end ) );
        }

        function fixYear( year ) 
        { 
           return( year < 1000 ? year + 1900 : year );

        }

        function fixMonth( month ) 
        { 
          return( month < 0 ? month + 12 : (month > 11 ? month 12 : month) ); 
        }

          function getNumberDays( d ) 
          { 
            switch( d.getMonth() + 1 ) 
            { 
              case 1: case 3: case 5: case 7: 
              case 8: case 10: case 12: 
                return( 31 ); 
              case 4: case 6: case 9: case 11: 
                return( 30 );
              case 2: 
                return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) ); 
            }
      }
      
      function getEnding( number ) 
      { 
         if( number > 10 && number < 20 ) return( "th" );

         switch( number % 10 ) 
         { 
           case 0: case 4: case 5: 
           case 6: case 7: case 8: 
           case 9: 
             return( "th" ); 
           case 1: 
             return( "st" ); 
           case 2: 
             return( "nd" ); 
           case 3: 
             return( "rd" );
         }

     }

    // These should be loaded from a server-side language such as ASP 
    var tasks = new Array( 30 ); 
    tasks[5] = "<a href='Test.html'>Take CS Test</a>"; 
    tasks[28] = "English Paper Due";

    function setCustoms() 
    { 
       var bg = getCookieValue( "bgColor" ); 
       var fg = getCookieValue( "fgColor" ); 
       if( bg != "" ) document.bgColor = bg; 
       if( fg != "" ) document.fgColor = fg; 
    }
    // -->
  </script> 
</head>

<body onLoad="JavaScript: setCustoms(); document.cookie='loggedin=true';">
  <i>Welcome</i><b> 
  <script language="JavaScript"> 
  <!--
       document.write( getCookieValue( "username" ) + "</b>!! " ); 
 // -->
 </script> 
 <i>Here are your tasks for</i>

 <table width="75%">
   <tr><td align="center"> 
       <font size="6"><b>
         <script language="JavaScript"> 
         <!--
              document.write( months[m] ); 
        // -->
       </script> 
     </b></font> 
  </td></tr> 
</table>

<table border="1" cellpadding="2" width="75%">
  <tr>
       <td width="14%"><b><i>Sunday</i></b></td> 
       <td width="14%"><b><i>Monday</i></b></td> 
       <td width="14%"><b><i>Tuesday</i></b></td> 
       <td width="14%"><b><i>Wednesday</i></b></td> 
       <td width="14%"><b><i>Thursday</i></b></td> 
       <td width="14%"><b><i>Friday</i></b></td> 
       <td width="14%"><b><i>Saturday</i></b></td> 
  </tr>
  <tr>
      <script language="JavaScript"> 
      <!--
           var startDay = month.getDay(); 
           for( i = 0 ; i < startDay ; i++ ) 
           { 
              document.write( "<td></td>" ); 
           }

           var numDays = getNumberDays( month ); 
           for( i = 0 ; i < numDays ; i++ )
           { 
              if( ( i + startDay + 1 ) % 7 == 1 ) 
              { 
                document.write( "</tr><tr>" ); 
              }
              document.write( "<td height='75' valign='top'" ); 
              if( fixYear( now.getYear() ) == fixYear( month.getYear() ) &&  
                   now.getMonth() == month.getMonth() && now.getDate() == i + 1 )  
                 document.write( " bordercolor='red'" ); 
                document.write( "><b>" + (i+1) + getEnding(i+1) + "</b><br>" ); 
                if( tasks[i+1] ) document.write( tasks[i+1] ); 
                document.write( "</td>" );
              }
             // -->
          </script> 
       </tr> 
   </table>

   <table width="75%">
     <tr>
       <td>
          <script language="JavaScript"> 
          <!--
               document.write( "<a href=\"" + document.location + "\" " ); 
               document.write( "onClick=\"JavaScript: document.cookie='month=" +  
                                fixMonth(m-1) + "';\">" ); 
               document.write( months[fixMonth(m-1)] + "</a>" );
             // -->
          </script> 
       </td> 
       <td align="center">
         <a href="AddTask.html">Add task</a> 
       </td>
       <td align="right">
         <script language="JavaScript"> 
         <!--
              document.write( "<a href=\"" + document.location + "\" " ); 
              document.write( "onClick=\"JavaScript: document.cookie='month=" +  
                               fixMonth(m+1) + "';\">" ); 
              document.write( months[fixMonth(m+1)] + "</a>" );
            // -->
          </script> 
        </td>
      </tr> 
    </table>

 </body> 
</html>

My job is not finished yet, however. You'll notice that as soon as the page loads, a value that remembers that the user has logged in is set in the cookie file. In order for my site to be completely secure, I will need to check that value in each page that has sensitive data on it. Here is another actual page from the Center Page Web site that does just that. The name of this Web page is AddTask.html:


<html>

   <head>

   <title>Center Park - Add Task</title>

  <script language="JavaScript"> 
  <!--
       if( getCookieValue( "loggedin" ) != "true" ) 
          document.location = "Main.html";
       

       var dateElement; 
       function openDatePicker( target ) 
       {
          dateElement = target; 
          var ieSize = "width=380,height=255"; 
          var navSize = "width=480,height=295"; 
          var isNav = navigator.appName == "Netscape"; 
          window.open( "PopupCalendar.html", "calendar",  
                 "menubar=no,resizable=no,scrollbars=no, " +  
                 "status=yes,toolbar=no,"  
                 + ( isNav ? navSize : ieSize ) );
       }

       function setDate( date ) 
       { 
         dateElement.value = date; 
       }

       function getCookieValue( name ) 
       {
          var c = document.cookie; 
          var begin = c.indexOf( name ); 
          if( begin < 0 ) return( "" ); 
          begin += name.length + 1; 
          var end = c.indexOf( ";", begin ); 
          if( end == -1 ) end = c.length; 
          return( c.slice( begin, end ) );
       }

       function setCustoms() 
       {


         var bg = getCookieValue( "bgColor" ); 
         var fg = getCookieValue( "fgColor" ); 
         if( bg != "" ) document.bgColor = bg; 
         if( fg != "" ) document.fgColor = fg; 
       }
     // -->
  </script> 
</head>

<body onLoad="JavaScript: setCustoms();">
   <br> 
   <br> 
   <i>Center Park Task Scheduler for</i><b> 
   <script language="JavaScript">
   <!--
        document.write( getCookieValue( "username" ) ); 
    // -->
  </script></b>.

<br><br>  
<br><br>

<form name="taskForm" onSubmit="JavaScript: return( false );">
  <center>
    <table border="1" width="75%">
     <tr>
         <td width="100%" colspan="2"><b>Schedule Task</b></td> 
     </tr>
     <tr>
          <td width="50%">
               Date of task:&nbsp; 
            <input type="text" name="date" size="10"> 
            <input type="button" value="..."  
                 onClick="JavaScript: openDatePicker(document.taskForm.date);"> 
     </td>
     <td width="50%">
          Task description (HTML is ok):<br> 
          <textarea rows="7" cols="35"></textarea>

     </td> 
   </tr> 
<tr> 
      <td align="center" colspan="2">
        <input type="submit" value="Submit" name="B1"> 
      </td>
     </tr>
    </table>
  </center>
 </form>
</body>

</html>

The very first script command that executes,

       if( getCookieValue( "loggedin" ) != "true" ) 
         document.location = "Main.html";

checks the loggedin cookie value and redirects the visitor to the main page if he or she has not logged in. This will prevent somebody from finding out the URL directly to the site and creating tasks as somebody else. At long last, I have created a secure, password-protected site using nothing but JavaScript!


Team LiB
Previous Section Next Section