reptile7's JavaScript blog
Sunday, July 08, 2007
Adventures in Cookie Transmission
Blog Entry #81

If you're a typical Web surfer, then you probably have hundreds of cookies on your hard disk right now:

MSIE Cookie Pane

You are, no doubt, familiar with the common applications of cookies: for example, cookies are used by some Web sites to keep track of user IDs and passwords, and they play a starring role in e-business shopping carts; also and more controversially, some advertisers attempt to use cookies to build an 'online marketing profile' of you as you surf.

But perhaps you are a bit hazy as to what exactly cookies are and how they are placed on your computer. Regarding the former issue, HTML Goodies' "So, You Want A Cookie, Huh?" article says:
Cookies are a small computer-generated text file (no larger than 4K) that you receive when you stop into certain sites.
There's some truth to this definition, but cookies are in fact strings comprising one or more attribute=value pairs delimited with semicolons, e.g.:

zGT=75S001; expires=Mon, 01-Sep-2008 23:52:00 GMT; path=/;

On my iMac, individual cookies are not housed in different files; Netscape loads its cookies into a cookies.txt file, whereas MSIE seems to internally store its cookies (or at least I can't find a separate MSIE 'cookie file' on my hard disk).

Regarding the setting of cookies on user machines, this is almost always done on the server side via a CGI script. Wikipedia nicely summarizes a normal cookie transmission process here. However, on the client side we can with JavaScript set cookies with much (but not all) of the functionality of HTTP Cookies. Way back in Blog Entry #13, we briefly discussed the cookie property of the document object. In today's post, we lay some groundwork for an analysis in the next post of a script that reads and writes the document cookie property and that spans HTML Goodies' JavaScript Script Tips #60, #61, #62, #63, and #64.

The document.cookie return

Before we tuck into the Script Tips #60-64 Script, it is necessary to clarify what is and is not returned when we read the document.cookie expression.

The syntax of a JavaScript cookie is given by the "Netscape Cookies" Appendix (C) of the JavaScript 1.3 Client-Side Reference:

name=value [;EXPIRES=dateValue] [;DOMAIN=domainName] [;PATH=pathName] [;SECURE]

A cookie necessarily has a name=value parameter and can optionally have expires, domain, path, and secure attributes. The document.cookie expression only returns the name=value parameter, even if all of the other attributes are specified; for example,

document.cookie = "cat=meow; expires=Friday, 01-Jan-2010 00:00:00 GMT;; path=/";
document.cookie = "dog=bark; expires=Friday, 01-Jan-2010 00:00:00 GMT;; path=/";
document.cookie = "parakeet=chirp; expires=Friday, 01-Jan-2010 00:00:00 GMT;; path=/";

cat=meow; dog=bark; parakeet=chirp

Note that the name=value pairs are delimited with semicolons and that the last name=value pair is not followed by a semicolon.

Netscape's short definition of the cookie property - String value representing all of the cookies associated with this document - suggests that the document.cookie expression only returns cookies that have been set by the current document, but I find that this is too narrow a reading of the word "associated".

When I visit, two cookies are placed on my hard disk:

s_cc=true;; path=/
s_sq=%5B%5BB%5D%5D;; path=/

If I upload a cookietestA.html file to my EarthLink server space, then a document.write(document.cookie) command in the cookietestA.html document picks up the two cookies, evidently because these cookies "pass" domain matching and path matching due to their general and / settings for the domain and path attributes, respectively.

Conversely, suppose in the cookietestA.html document we write the cookies

document.cookie = "chips=ahoy;; path=/";
document.cookie = "fig=newton; path=/";
document.cookie = "nutter=butter;";

and then go back to and type javascript:alert("Cookies: " + document.cookie) in the browser address bar and hit the return key - what do we see?

When using MSIE, the alert( ) box displays:
Cookies: s_cc=true; s_sq=%5B%5BB%5D%5D; chips=ahoy; nutter=butter

When using Netscape, the alert( ) box displays:
Cookies: s_cc=true; s_sq=%5B%5BB%5D%5D; chips=ahoy

Both alert( ) box displays include the chips=ahoy string because the original chips=ahoy cookie was equipped with and path=/ parameters.

The fig=newton cookie does not have a domain attribute, whose value in this case defaults to the hostname of the server that set it, which does not match the domain name of the current host; consequently, the fig=newton cookie is "invalid" vis-à-vis's server and is not picked up by either browser.

The nutter=butter cookie lacks a path attribute, whose value in this case should default to /~reptile7jr, and this is what happens when using Netscape, which does not return nutter=butter in the document.cookie string because, in essence, the /~reptile7jr path is 'too specific' for In contrast, MSIE sets the nutter=butter path value to /; path matching now succeeds and nutter=butter is returned.

Finally, let's set in cookietestA.html one more cookie lacking both the domain and path attributes -

document.cookie = "pecan=sandies";

- and let's upload a cookietestB.html file to the directory. It should now be clear to you that, for both MSIE and Netscape, pecan=sandies will not be recognized at but will appear in cookietestB.html's document.cookie return.

Got all that? Good. Moving on...

Script Tips #60-63 cover a main script that
(a) tests if a cookie with a particular name (or any other cookie) is "associated" with the current document; if not, the script
(b) writes a cookie with that name and a value taken from a preceding prompt( ) statement;
then, the cookie's value
(c) is extracted via String object methods (remember, cookies are strings) and
(d) inserted into a greeting on the page for the user.
Script Tip #64 presents a slightly modified script that, depending on the outcome of the part-(a) test, posts different greetings for first-time and return visits.

We'll go through the nonredundant parts of these scripts in the following entry.


Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)