Transcript Document 7186248

Cookies, Cascading Style
Sheets
Tom Horton
CS453 Electronic Commerce
1
Overview

Cookies



What, why
In JavaScript
Style sheets: CSS
2
I Want a Cookie!

Long long ago

Multi-user time-shared computers running only in
command-line mode


Run a program in a user’s account that





E.g. DEC machines running TOPS-10 and the like
Prompts: “I Want a Cookie!”
Reads the response
Only exits if it’s the right answer
Ignores interrupts
Ah, simpler times! Those were the good ole
days! :-)

Ask me about “fish mode” (if you dare)
3
Beyond Sesame Street…

In the past, in general a cookie was:




Some kind of token or ticket passed from
one program to another
Its contents were often meaningless to the
recipient
But meaningful when passed back to the
originator
Examples of cookies in real life?
4
Web Cookies (or HTTP Cookies)

Browsers allow the storage of limited
data on the client machine

Can be created by the server


Or by a client-side scripts
Sent back to the server that left it

Or ready by a client-side script
5
What’s the Need Behind Cookies?

HTTP is a stateless protocol



Client requests a page, and server sends it
Client later requests a 2nd page; it is sent
But HTTP doesn’t give a way for the
server to know it’s from the same user


Being stateless is simpler for HTTP
But limiting to applications
6
Cookies in Action

The scenario is:




Browser about to send a request for a URL
But it first looks for cookies linked to that URL that
are stored on client machine
If found, the cookie is sent to the server with the
HTTP request for the URL
Server uses cookie data


E.g. associate this current visit with a previous visit
Server may then set updated cookie on client
machine

E.g. to be sent back with the next request
7
Purposes of Cookies

Authentication



Personalization



User-id, password stored on client
Sent on next visit. No login required!
Remember user preference for fonts, colors, skin,
site-options, etc.
Shopping carts
Tracking


How is our site used?
Multi-site tracking by companies looking for usage
profiles etc.
8
Cookie FAQs and Myths




They don’t transmit viruses.
Can’t erase data on client machine.
Can’t read personal info on client
machine.
Not used for spamming, pop-ups.
Are they spyware? Discuss!
9
What’s in a Cookie? (besides flour)

It’s just text data as follows:

NAME=VALUE


expires=<date> (optional)




Name value pairs
Without a date, deleted when browser closed
path=<path> (optional)
domain=<domain> (optional)
secure (optional)
10
Browser Control of Cookies

At least 20 cookies per domain



Newer browsers store more
But most sites use just one, and have an
ID value to reference info stored on server
Total size limit on all cookies (e.g. 4K
for IE)
11
Browser Control of Cookies (2)

User can control how they’re handled:



Don’t let server write them to client PC
Asks permission (perhaps with a white-list)
Always accept them


Perhaps except for those on a black-list
User can view and manage cookies

E.g. Firefox’s Preferences->Privacy->Show
Cookies
12
Try This at Home!

In your browser’s address field, type:
javascript:alert("Cookies: "+document.cookie)



Note javascript: pseudo protocol
You know alert in JavaScript now
Looks like the DOM lets us see a cookie
13
To Do at Home

On your machine, explore your own cookies




Try to see what some of them might be for
Based on what you know of the site
Tuesday: share your newly found cookie
knowledge
BTW, feel free to toss your cookies that you
don’t care for (while you’re at it)
14
Some History


First supported in Netscape Mosaic version
0.9beta (Oct 1994)
Lou Montulli and John Giannandrea



Patent: applied in 1995, granted in 1998
First use: visited Netscape’s site already?
Initially little user knowledge

Until controversy in 1996 and 1997
15
Again, How Do I Write One?





Clearly important for server-side scripts
Server sends an HTTP message to the
client
Scripting languages simplify this
E.g. PHP:
setcookie(‘name’, ‘value’,…);
More on this later

Server-side scripting and Session IDs
16
JavaScript on the Client-Side


Can just do this (on one line):
document.cookie=“user=tom;domain=cs.uva
.edu;path=/cs453; secure;”
But in Virtual Labs, Adv. Exercise 5, we have
three functions for your .js library


SetCookie(…), GetCookie(name), DeleteCookie(…)
These are widely available


Original versions attributed to Bill Dortch
In various books (including Estrella’s)
17
More Reading

Wikipedia has a nice article




Note issues on laws governing cookies!
Why? The White House, the NSA and the
CIA have used cookies to track users
Various websites
Check your browser for what it does
and what it can tell you
18
19
Style Sheets



Recall: design goal to separate
structure of documents from display
But display matters a lot
CSS: Cascading Style Sheets



For us, with HTML
Brief details here
Web resources: many, including:

http://www.w3schools.com/css/default.asp
20
Ways to Specify Style


Multiple ways
Put STYLE= attribute on elements



<P STYLE=“font-size: 20pt; color:
#0000ff”> blah blah </P>
Use a STYLE element in your HTML file
Use an external style-sheet
21
STYLE element in HTML

Think of this as an in-line style-sheet


Assigns style-rules for element types
Defines new style-classes



Groups a set of styles and gives them a name.
They can be applied to HTML elements.
Put in the <HEAD>
<STYLE TYPE=“text/css”>
<!-- style rules and class in here -->
</STYLE>
22
Example
<style type="text/css">
<!-body { margin-left: 0px; margin-top: 0px;
background: blue; color: white; }
h1 { font-family: Arial, sans-serif;
color: yellow; }
h1:hover { color: red; }
.strong { font-weight: bold; color: red; }
-->
</style>
23
Example
<HTML><HEAD>
<TITLE>CSS Demo 1</TITLE>
<style type="text/css">
<!-- CSS on previous slide goes here -->
</style>
</HEAD>
<BODY>
<H1>A Header</H1>
<P>First paragraph</P>
<P CLASS="strong">Second Paragraph with
<SPAN STYLE="color: white">something that overrides</SPAN>
a style.</P>
</BODY></HTML>
24
Output

“A Header” turns red on mouse-over
25
External Style Sheets

Want a common look and feel?



Write once!
Put CSS statements in a .css file
In your HTML file:
<HEAD>
<TITLE>CSS Demo 2</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="demo1.css">
</HEAD>

REL means relationship between two files
26
Another Example

The CSS
A { text-decoration: none }
A:hover { text-decoration: underline; color: red;
background-color: #CCFFCC; }
LI EM { color: red; font-weight: bold; }
UL { margin-left: 1cm; }
UL UL { text-decoration: underline; margin-left: 3cm; }
27
HTML for previous CSS
<BODY><H1>Demo 3: More CSS</H1>
Here's <A HREF="http://www.sun.com">a link</A>
to <EM>Sun's site.</EM>
<UL>
<LI> Item one. <EM>Of course!</EM>
<UL>
<LI> SubItem one.
<LI> SubItem two.
</UL>
<LI> Item two.
</UL>
</BODY>
28
Output



Note <EM> style governed by nesting
Note separate style for nested <UL>s
Link displayed different on mouse-over
29
More, Advanced CSS






Positioning options not normally
possible in HTML
Background images
Element dimensions
Text flow
User style sheets can override page
author’s
Compatibility issues
30
References

W3C



Documentation on various levels of CSS
And Wikipedia
And many many books

See UVa’s Safari on-line collection
31
Concluding Remarks for this Unit

You’ve seen the components of DHTML






HTML
JavaScript
CSS
You’ve got the idea of Cookies
You know something more about
client/server relationships and web pages
Ready for server-side activities

But first, some security topics
32