Cookies, Cascading Style Sheets

1. Cookies, Cascading Style Sheets Tom Horton CS453 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

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