1. 1 Cookies, Cascading Style Sheets Tom Horton CS453 Electronic Commerce

2. 2 Overview Cookies What, why In JavaScript Style sheets: CSS

3. 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. 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. 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. 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. 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. 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. 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. 10 What’s in a Cookie? (besides flour) It’s just text data as follows: NAME=VALUE Name value pairs expires= (optional) Without a date, deleted when browser closed path= (optional) domain= (optional) secure (optional)

11. 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. 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. 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. 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. 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. 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. 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. 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. 19

20. 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. 21 Ways to Specify Style Multiple ways Put STYLE= attribute on elements blah blah Use a STYLE element in your HTML file Use an external style-sheet

22. 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

23. 23 Example <!-- 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; } -->

24. 24 Example CSS Demo 1 A Header First paragraph Second Paragraph with something that overrides a style.

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

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

27. 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. 28 HTML for previous CSS Demo 3: More CSS Here's a link to Sun's site. Item one. Of course! SubItem one. SubItem two. Item two.

29. 29 Output Note style governed by nesting Note separate style for nested s Link displayed different on mouse-over

30. 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. 31 References W3C Documentation on various levels of CSS And Wikipedia And many many books See UVa’s Safari on-line collection

32. 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