1. Cookies and Security Saving the “state”
JavaScript

2. First Labs Last lab and Project Final
Wednesday, December 10 from 10:30am to 12:30 pm
JavaScript

3. Cookies . State information Nature and limitations of cookies
Creating and deleting cookies
Setting and retrieving cookies
Customize Web pages using cookies
Shopping cart
Saving state information with query strings .
JavaScript

4. About cookies How Stuff Works site
CookieCentral.com with cookies overview and links to related articles.
The Electronic Privacy Information Center site addresses privacy issues about cookies
And some examples
JavaScript

5. Session Objective Web Document are Interactive Server-Side Methods
Hyperlink
Clickable images
Keyword search databases
Executable Programs
Server-Side Methods
Generate pages dynamically
Common Gateway Interface (CGI)
Server Side Includes (SSI)
Active Server Pages (ASP) …
JavaScript

6. CGI METHOD attribute species method for sending users’ input
Process an order form
Provide interface to database
Process info from a guestbook
Provide hit-counts…
METHOD attribute species method for sending users’ input
<form method=“post” action=“
Issues
Not all host provides access to user-written CGI. Why?
Any number of languages
PERL VB
C++
JavaScript

7. Cookies Not strictly a server-side programming issue
Method for storing client information
“Welcome back, Martin!” “ Your last visit was on November 12”
Store data on clients
Why necessary? Where are they?
JavaScript

8. What are Cookies?
Small pieces of information stored on the visitor’s hard drive.
Mostly harmless
Valid privacy concerns exist about their use in conjunction with invasive marketing techniques.
As many as 20 cookies per domain.
JavaScript

9. Why cookies? Multi-part form Multi-site interaction Shopping Cart
Store visitor preferences (login information)
When a Web page retrieves information from a cookie, the page can act on that information and change its appearance based on user’s preferences.
Cookies can be used to retain some items as visitors move through a site with their online shopping cart.
Other use of cookies include surveys or online tests.
JavaScript

10. Restrictions
Web-related technology can access only a small “area” of client’s system
Exceptions
Active-X
Rigid Rules:
no binary data
no executable image
less than 4KB
20 cookies max per server/domain
300 cookies max
least recently used cookies removed first
JavaScript

11. Baking Cookies Where? Netscape/FireFox: IE: Users\cookie.txt
client=bozo;expires=Sun,17 May :00:00 GMT
JavaScript

12. Ingredients Name=Value Expires=Date [optional]
client=bozo;expires=Sun,17 May :00:00 GMT
Name=Value
Expires=Date [optional]
Domain=DomainNam[optional]
Path=Path [optional]
Secure [optional] //only over https
JavaScript

13. Don’t like cookies? Turn them off Beware of users allergic to cookies
manually
cookie cruncher programs…
privacy issues
Beware of users allergic to cookies
JavaScript

14. Creating and Deleting Cookies
JS code can set cookies
by assigning content to the cookie property of the document object.
by default, content includes information about the domain and directory location of the creating page.
When attempting to retrieve a cookie, the location of a Web page is compared to the domain and directory of the page that created the cookie.
If the locations do not match, the cookie cannot be retrieved.
We can set expiration date for cookies (GMT)
Cookie codes are widely used (public domain)
JavaScript

15. State Information Hyper Text Transfer Protocol (HTTP)
Manages the hypertext links used to navigate web
Ensures Web browsers correctly process and display the various types of information contained in Web pages
Original design  stateless
No storage of persistent data
JavaScript

16. State Information Reasons for maintaining state information
Page customization based on user preference
Temp storage of data in multipart forms
Bookmarking
Shopping carts
User ID and password storage
Counters for site statistics
JavaScript

17. State Information
Three basic methods for maintaining state information:
Hidden form fields
Query strings
Cookies
JavaScript

18. Saving State Information with Query Strings
Set of name=value pairs appended to a target URL
Consists of single text string containing one or more pieces of information
Example:
<a href=“
lastName=Smith&occupation=singer”>Here is a link </a>
JavaScript

19. State Information and Cookies
Saving State Information w/ Query Strings
Parsing a String
substring() method
Takes two arguments:
Starting index number
Ending index number
Example:
var queryData = location.search;
queryData = queryData.substring(1, queryData.length);
JavaScript

20. State Information and Cookies
Saving State Information w/ Cookies
Cookies
Small pieces of information about a user stored by web server in text files on user’s computer
Allows information to be stored beyond the current Web page session
W3C DOM defines cookie specification
JavaScript

21. State Information and Cookies
Saving State Information w/ Cookies
Cookies
Two types
Temporary  available only for current browser session
Persistent  available beyond current browser session
Limitations
Maximum of 20 stored by each server or domain
Maximum of 300 total cookies per browser
Maximum size of 4 KB
JavaScript

22. State Information and Cookies
Saving State Information w/ Cookies
Creating Cookies
Use cookie property of Document object
Use name=value pairs (same as with query string)
Syntax:
document.cookie= name + value;
document.cookie= “firstName= “ + “Martin”;
multiple cookies can be assigned using list of name=value pairs separated by a semicolon
not recommended at this point!
JavaScript

23. State Information and Cookies
Saving State Information w/ Cookies
Creating Cookies
Cookies cannot contain special characters
Due to HTTP limitations
Use URL encoded format
Replaces special characters with code
Percent sign and ASCII value
e.g., a space is replaced by: %20
Use encodeURI() and decodeURI()
e.g., document.cookie= encodeURI(“x= “ + “123”);
JavaScript

24. State Information and Cookies
Saving State Information w/ Cookies
Creating Cookies
Expires attribute
Determines how long a cookie is to remain on a client system before deleted
If not specified  temporary cookie
To specify  use expires=date
JavaScript

25. State Information and Cookies
Saving State Information w/ Cookies
Creating Cookies
Expires attribute
Date  specified in UTC format
Weekday Mon DD HH:MM:SS Time Zone YYYY
Set data manually or by using Date object/methods
To delete cookie:
Reassign name, set arbitrary value and set date to any past value
JavaScript

26. State Information and Cookies
Saving State Information w/ Cookies
Creating Cookies
Path attribute
Determines availability of cookie to other Web pages on a server
Syntax
document.cookie = (“x=123“ + “; path=/MyFiles”);
Use slash (/) to indicate root directory
JavaScript

27. State Information and Cookies
Saving State Information w/ Cookies
Creating Cookies
Domain attribute
Used for sharing cookies across multiple servers in the same domain
Syntax
document.cookie = (“x=123“ + “; domain=.xyz.com”);
JavaScript

28. State Information and Cookies
Saving State Information w/ Cookies
Creating Cookies
Secure attribute
Indicates that a cookie can only be transmitted across a secure Internet connection using HTTPS or another security protocol
Syntax
document.cookie = (“x=123“ + “; secure=true”);
JavaScript

29. State Information and Cookies
Saving State Information w/ Cookies
Reading Cookies
Cookies consist of a continuous string that must be parsed
Decode cookie using decodeURI() method
Use split() method to place each name=value pair into an array
Use String object methods to extract required portions of each array element
JavaScript

30. Security JavaScript Security Concerns
Same origin policy & digital signing
Same origin policy Used to ensure script is not tampered with
Verifies trustworthiness of script creator
Determines types of browser info available to scripts
Limited functionality
No objects that allow file manipulation, network connections, or running of system commands
Protection of Web page and JavaScript program against malicious tampering
Privacy of individual client information
Protection of the local file system of the client or Web site from theft or tampering
JavaScript

31. Security Same Origin Policy
Restricts JavaScript code in one window/frame from accessing other window/frame on client computer
To access: must use same protocol and reside on the same server
Prevents malicious scripts from modifying content of other windows and frames
Prevents theft of private browser information and information displayed on secure Web browsers
Protects integrity of design of Web page
JavaScript

32. Security Same Origin Policy Domain Property
Allows documents from different origins in the same domain to access each other’s properties:
Property of Document object
Syntax:
document.domain = “xyz.com”;
Allows documents from server1.xyz.com and server2.xyz.com to access the other’s properties
JavaScript

33. Easy examples http://sw.cs.wwu.edu/~s_granier/cs202/cookies/
JavaScript