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 users account that
• Prompts I Want a Cookie!
• Reads the response
• Only exits if its 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
Whats 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 doesnt give a way for the server to
  know its 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 dont transmit viruses.
• Cant erase data on client machine.
• Cant read personal info on client machine.
• Not used for spamming, pop-ups.
• Are they spyware? Discuss!

10
Whats in a Cookie? (besides flour)

• Its just text data as follows
• NAMEVALUE
• Name value pairs
• expiresltdategt (optional)
• Without a date, deleted when browser closed
• pathltpathgt (optional)
• domainltdomaingt (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 theyre handled
• Dont 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. Firefoxs Preferences-gtPrivacy-gtShow Cookies

13
Try This at Home!

• In your browsers address field, type
• javascriptalert("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
  dont care for (while youre 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 Netscapes 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.cookieusertomdomaincs.uva.edupath/
  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 Estrellas)

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
(No Transcript)
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
• ltP STYLEfont-size 20pt color 0000ffgt blah
  blah lt/Pgt
• 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 ltHEADgt
• ltSTYLE TYPEtext/cssgtlt!-- style rules and
  class in here --gt
• lt/STYLEgt

23
Example

• ltstyle type"text/css"gt
• lt!--
• body margin-left 0px margin-top 0px
• background blue color white
• h1 font-family Arial, sans-serif color
  yellow
• h1hover color red
• .strong font-weight bold color red
• --gt
• lt/stylegt

24
Example

• ltHTMLgtltHEADgt
• ltTITLEgtCSS Demo 1lt/TITLEgt
• ltstyle type"text/css"gt
• lt!-- CSS on previous slide goes here --gt
• lt/stylegt
• lt/HEADgt
• ltBODYgt
• ltH1gtA Headerlt/H1gt
• ltPgtFirst paragraphlt/Pgt
• ltP CLASS"strong"gtSecond Paragraph with
• ltSPAN STYLE"color white"gtsomething that
  overrideslt/SPANgt
• a style.lt/Pgt
• lt/BODYgtlt/HTMLgt

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
• ltHEADgt
• ltTITLEgtCSS Demo 2lt/TITLEgt
• ltLINK REL"stylesheet" TYPE"text/css"
  HREF"demo1.css"gt
• lt/HEADgt
• REL means relationship between two files

27
Another Example

• The CSS
• A text-decoration none
• Ahover 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

• ltBODYgtltH1gtDemo 3 More CSSlt/H1gt
• Here's ltA HREF"http//www.sun.com"gta linklt/Agt
• to ltEMgtSun's site.lt/EMgt
• ltULgt
• ltLIgt Item one. ltEMgtOf course!lt/EMgt
• ltULgt
• ltLIgt SubItem one.
• ltLIgt SubItem two.
• lt/ULgt
• ltLIgt Item two.
• lt/ULgt
• lt/BODYgt

29
Output

• Note ltEMgt style governed by nesting
• Note separate style for nested ltULgts
• 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 authors
• Compatibility issues

31
References

• W3C
• Documentation on various levels of CSS
• And Wikipedia
• And many many books
• See UVas Safari on-line collection

32
Concluding Remarks for this Unit

• Youve seen the components of DHTML
• HTML
• JavaScript
• CSS
• Youve 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