Cookies, Cascading Style Sheets

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=<date> (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