Category Archives: web

All things web related

how to: cookies with javascript

I love cookies – that’s all the personality you’re going to get for this post. Here’s the javascript / html form pair you need to create and manage browser cookies:

function SetCookie(){

if (document.cookie && document.cookie != "") {
// Cookie exists - let's append to it!

// Grab "Field 1" from the form and assign it to item1
    var item1=document.getElementById('ctest0');
// Grab "Field 2" from the form and assign it to item2
    var item2=document.getElementById('ctest1');
    var cookie=document.cookie;

/*
Get the actual text from the fields via the item# variables .value property
and assign it to a string that we can later split via the # sign in the cookie
itself!
*/

    var newCookie=cookie + "#field1=" + escape(item1.value);
    newCookie=newCookie + "#field2=" + escape(item2.value);
   
// Generate the cookie
    document.cookie=newCookie;
   
}
else
{
// Cookie does not exists - create a new one!

// Same as above except we also name our cookie
    document.cookie="name=stuff";

// Grab "Field 1" from the form and assign it to item1
    var item1=document.getElementById('ctest0');
// Grab "Field 2" from the form and assign it to item2
    var item2=document.getElementById('ctest1');
    var cookie=document.cookie;

/*
Get the actual text from the fields via the item# variables .value property
and assign it to a string that we can later split via the # sign in the cookie
itself!
*/

    var newCookie=cookie + "#field1=" + escape(item1.value);
    newCookie=newCookie + "#field2=" + escape(item2.value);
   
// Generate the cookie
    document.cookie=newCookie;
}  

}

function GetCookie(){

/*
Cookie fields are stored in item=value pairs.  We separate the fields
by a hash sign in the SetCookie() function therefore we'll split the
entire cookie into an array of item=value pairs via the cookieArray
variable assignment.  Then we have each field in a item=value pair as
data inside each array element.  Next you'll need to parse the array
as done in the for loop below.
*/


var cookieToText,cookieName,fieldData,cookieArray=document.cookie.split('#');
// Field counter - used for display purposes

// For loop to parse through each item=value pair in the cookie
for (i=0;i<cookieArray.length;i++)
    {
    if (i=="0")
        {
       
        /*
        The first field in a cookie is always the cookie name.  Let's add that
        to our "cookie to text" conversion variable for ease of use!  Also we
        know the name of the cookie since we set it previously.  The word "Stuff"
        is 5 characters long thus we strip out 5 characters from the second field
        (The data) in the item=value pair.
        */

        cookieName="Cookie Name: "
        // Split the item=value pair
        fieldData=cookieArray[i].split('=');
        // Grab the name of the cookie
        cookieToText=cookieName + fieldData[1].substr(0,5) + "\n";
                       
        }
        else
        {
        /*
        These are data items.  Let's put them on top of the "cookie to text"
        conversion variable for later display.  You have to "unescape" cookie
        data as it is encoded.
        */

       
        fieldData=cookieArray[i].split('=');
        cookieToText=cookieToText + "Field " + i + ": " + unescape(fieldData[1]) + "\n"
                       
        }

}
// Finally - display the "cookie to text" conversion variable:
alert(cookieToText);
}

Here’s the form you need to test your javascript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<script type="text/javascript" src="cookie.js"></script>
<form name="srf" id="srf" method="post" action=""> 
Field 1: <input id="ctest0" name="ctest0" type="text" maxlength="255" value=""/><br/>  
Field 2: <input id="ctest1" name="ctest1" type="text" maxlength="255" value=""/><br/>
<input id="ctest2" type="button" name="setCookie" value="Set Cookie" onclick="SetCookie()"/><br/>  
<input id="ctest3" type="button" name="getCookie" value="Get Cookie" onclick="GetCookie()"/><br/>  
</form>
</html>

Protect yourself

If you’re considering setting up an Apache proxy for what ever reason please protect yourself.  Taking the theme one step further, be sure you’re protecting what you’re proxy’ing as well by installing mod_clamav:

http://software.othello.ch/mod_clamav/

This is a great tool that I use myself and have tested it with eicar successfully.

Base Apache modules needed for proxy setup with .htaccess and caching:

LoadModule auth_basic_module modules/mod_auth_basic.so (Basic authentication)
LoadModule authn_file_module modules/mod_authn_file.so (.htaccess authentication)
LoadModule authz_host_module modules/mod_authz_host.so (AllowFrom directive)
LoadModule authz_user_module modules/mod_authz_user.so (Require user directive)
LoadModule log_config_module modules/mod_log_config.so (Logging)
LoadModule setenvif_module modules/mod_setenvif.so (BrowserMatch directive)
LoadModule mime_module modules/mod_mime.so (Mime Types)
LoadModule autoindex_module modules/mod_autoindex.so (Indexing Options)
LoadModule negotiation_module modules/mod_negotiation.so (Language negotiation)
LoadModule proxy_module modules/mod_proxy.so (Proxy)
LoadModule cache_module modules/mod_cache.so (Caching)

Never got .htaccess though to work properly with the proxy so I filter by source IP in the <VirtualHost> directive.