Cookies Cascading Style Sheets Tom Horton CS 453

Cookies, Cascading Style Sheets Tom Horton CS 453 Electronic Commerce 1

Overview n Cookies n n n What, why In Java. Script Style sheets: CSS 2

I Want a Cookie! n Long long ago n Multi-user time-shared computers running only in command-line mode n n Run a program in a user’s account that n n n 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! : -) n Ask me about “fish mode” (if you dare) 3

Beyond Sesame Street… n In the past, in general a cookie was: n n 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) n Browsers allow the storage of limited data on the client machine n Can be created by the server n n Or by a client-side scripts Sent back to the server that left it n Or ready by a client-side script 5

What’s the Need Behind Cookies? n HTTP is a stateless protocol n n n Client requests a page, and server sends it Client later requests a 2 nd page; it is sent But HTTP doesn’t give a way for the server to know it’s from the same user n n Being stateless is simpler for HTTP But limiting to applications 6

Cookies in Action n The scenario is: n n 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 n n E. g. associate this current visit with a previous visit Server may then set updated cookie on client machine n E. g. to be sent back with the next request 7

Purposes of Cookies n Authentication n Personalization n 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 n n How is our site used? Multi-site tracking by companies looking for usage profiles etc. 8

Cookie FAQs and Myths n n 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) n It’s just text data as follows: n NAME=VALUE n n expires= (optional) n n Name value pairs Without a date, deleted when browser closed path= (optional) domain= (optional) secure (optional) 10

Browser Control of Cookies n At least 20 cookies per domain n 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. 4 K for IE) 11

Browser Control of Cookies (2) n User can control how they’re handled: n n n Don’t let server write them to client PC Asks permission (perhaps with a white-list) Always accept them n n Perhaps except for those on a black-list User can view and manage cookies n E. g. Firefox’s Preferences->Privacy->Show Cookies 12

Try This at Home! n In your browser’s address field, type: javascript: alert("Cookies: "+document. cookie) n n n Note javascript: pseudo protocol You know alert in Java. Script now Looks like the DOM lets us see a cookie 13

To Do at Home n On your machine, explore your own cookies n n 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 n n First supported in Netscape Mosaic version 0. 9 beta (Oct 1994) Lou Montulli and John Giannandrea n n n Patent: applied in 1995, granted in 1998 First use: visited Netscape’s site already? Initially little user knowledge n Until controversy in 1996 and 1997 15

Again, How Do I Write One? n n n 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 n Server-side scripting and Session IDs 16

Java. Script on the Client-Side n n Can just do this (on one line): document. cookie=“user=tom; domain=cs. uva. edu; path=/cs 453; secure; ” But in Virtual Labs, Adv. Exercise 5, we have three functions for your. js library n n Set. Cookie(…), Get. Cookie(name), Delete. Cookie(…) These are widely available n n Original versions attributed to Bill Dortch In various books (including Estrella’s) 17

More Reading n Wikipedia has a nice article n n 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 n n n Recall: design goal to separate structure of documents from display But display matters a lot CSS: Cascading Style Sheets n n n For us, with HTML Brief details here Web resources: many, including: n http: //www. w 3 schools. com/css/default. asp 20

Ways to Specify Style n n Multiple ways Put STYLE= attribute on elements n n n

blah

STYLE element in HTML n Think of this as an in-line style-sheet n n Assigns style-rules for element types Defines new style-classes n n n Groups a set of styles and gives them a name. They can be applied to HTML elements. Put in the 22

Example 23

A Header

First paragraph

Second Paragraph with something that overrides a style.

Output n “A Header” turns red on mouse-over 25

External Style Sheets n Want a common look and feel? n n n Write once! Put CSS statements in a. css file In your HTML file: n REL means relationship between two files 26

Another Example n 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: 1 cm; } UL UL { text-decoration: underline; margin-left: 3 cm; } 27

HTML for previous CSS Demo 3: More CSS Here's a link to Sun's site.

• Item one. Of course!
  • Sub. Item one.
  • Sub. Item two.
• Item two.

Output n n n Note style governed by nesting Note separate style for nested

s Link displayed different on mouse-over 29