1
Cookies, Cascading Style Sheets
Tom HortonCS453 Electronic Commerce
2
Overview Cookies
What, why In JavaScript
Style sheets: CSS
3
I Want a Cookie! Long long ago
Multi-user time-shared computers running only in command-line mode
E.g. DEC machines running TOPS-10 and the like Run a program in a user’s account that
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)
4
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?
5
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
6
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
7
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
8
Purposes of Cookies Authentication
User-id, password stored on client Sent on next visit. No login required!
Personalization 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.
9
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!
10
What’s in a Cookie? (besides flour)
It’s just text data as follows: NAME=VALUE
Name value pairs expires=<data> (optional)
Without a date, deleted when browser closed
path=<path> (optional) domain=<domain> (optional) secure (optional)
11
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)
12
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
13
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
14
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)
15
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
16
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
17
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)
18
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
19
20
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
21
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
22
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>
23
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>
24
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>
25
Output
“A Header” turns red on mouse-over
26
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
27
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; }
28
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>
29
Output
Note <EM> style governed by nesting Note separate style for nested <UL>s Link displayed different on mouse-over
30
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
31
References W3C
Documentation on various levels of CSS
And Wikipedia And many many books
See UVa’s Safari on-line collection
32
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