1. Chapter 8 Cookies And Security JavaScript, Third Edition

2. 2 Objectives Learn about state information Save state information with hidden form fields, query strings, and Cookies Manipulate strings Learn about security issues

3. JavaScript, Third Edition 3 Introduction The ability to store user information, including preferences, passwords, and other data, is very important –Improves usability of a Web page The three most common tools for maintaining state information are: –Hidden form fields –Query strings –Cookies

4. JavaScript, Third Edition 4 Understanding State Information State Information: –Information about individual visits to a Web site HTTP was originally designed to be stateless –Web browsers stored no persistent data about a visit to a Web site –Design was efficient, but limiting

5. JavaScript, Third Edition 5 Understanding State Information (Cont.) Server that maintains state information can: –Customize individual Web pages based on user preferences –Temporarily store information for a user as a browser navigates within a multipart form –Allow a user to create bookmarks for returning to specific locations within a Web site

6. JavaScript, Third Edition 6 Understanding State Information (Cont.) –Provide shopping carts that store order information –Store user IDs and passwords –Use counters to keep track of how many times a user has visited a site

7. JavaScript, Third Edition 7 Saving State Information with Hidden Form Fields Hidden form field: –Not displayed by the Web browser –Allows you to hide information from users –Created with the element –Temporarily stores data that needs to be sent to a server along with the rest of a form, but that a user does not need to see

8. JavaScript, Third Edition 8 Saving State Information with Hidden Form Fields (Cont.) –Is created using the same syntax used for other fields created with the element: –Name and value attributes are the only attributes that you can include with it

9. JavaScript, Third Edition 9 Saving State Information with Query Strings A query string: –Set of name=value pairs appended to a target URL –Consists of a single text string containing one or more pieces of information To pass information from one Web page to another using a query string: –Add a question mark (?) immediately after a URL, followed by the query string (in name=value pairs) for the information you want to preserve

10. JavaScript, Third Edition 10 Manipulating Strings Parsing: –Refers to the act of extracting characters or substrings from a larger string –Essentially the same concept as the parsing (rendering) that occurs in a Web browser

11. JavaScript, Third Edition 11 The String Object String object: –Represents all literal strings and string variables in JavaScript –Contains methods for manipulating text strings –Length property returns the number of characters in a string

12. JavaScript, Third Edition 12 The String Object (Cont.)

13. JavaScript, Third Edition 13 The String Object (Cont.)

14. JavaScript, Third Edition 14 Parsing a String The first parsing task: –Remove question mark at the start of query string Use substring() method combined with length property –Substring() method takes two arguments: Starting index number and an ending index number The first character in a string has an index number of 0

15. JavaScript, Third Edition 15 Parsing a String (Cont.) The next step: –Convert individual pieces of information in queryData variable into array elements using the split() method –Pass to the split() method the character that separates each individual piece of information in a string

16. JavaScript, Third Edition 16 Saving State information with Cookies Query strings do not permanently maintain state information: –Information available only during current Web page session Hidden form fields maintain state information between Web pages: –The data they contain are lost once the Web page that reads the hidden fields closes

17. JavaScript, Third Edition 17 Saving State information with Cookies (Cont.) You can save the contents of a query string or hidden form fields: –Submit the form data using a server-side scripting language Requires separate server-based application

18. JavaScript, Third Edition 18 Saving State information with Cookies (Cont.) To make it possible to store state information beyond the current Web page session, Netscape created cookies Cookies: –Small pieces of information about a user stored by a Web server in text files on the user’s computer

19. JavaScript, Third Edition 19 Saving State information with Cookies (Cont.) Each time the Web client visits a Web server: –Saved cookies for the requested Web page are sent from the client to the server –Server then uses cookies to customize the Web page for the client

20. JavaScript, Third Edition 20 Saving State information with Cookies (Cont.) Cookies can be temporary or persistent: –Temporary cookies remain available only for the current browser session –Persistent cookies remain available beyond the current browser session Stored in a text file on a client computer

21. JavaScript, Third Edition 21 Creating Cookies You use the cookie property of the Document object to create cookies in name=value pairs The syntax for the cookie property is as follows: –document.cookie = name + value; The cookie property is created with a required name attribute and four optional attributes: –Expires –Path –Domain –Secure

22. JavaScript, Third Edition 22 The name attribute Only required parameter of the cookie property Specifies the cookie’s name=value pair Cookies created with only the name attribute are temporary cookies –Available for only the current browser session

23. JavaScript, Third Edition 23 The name attribute (Cont.) Cookies themselves cannot include semicolons or other special characters, such as commas or spaces: –Transmitted between Web browsers and Web servers using HTTP Does not allow certain non-alphanumeric characters to be transmitted in their native format

24. JavaScript, Third Edition 24 The name attribute (Cont.) You can use special characters in your cookies if you use encoding: Encoding: –Involves converting special characters in a text string to their corresponding hexadecimal ASCII value, preceded by a percent sign

25. JavaScript, Third Edition 25 The name attribute (Cont.) The built-in encodeURI() function is used in JavaScript for encoding text strings into a valid URI The syntax for the encodeURI() function is: –encodeURI(text);

26. JavaScript, Third Edition 26 The name attribute (Cont.) When you read a cookie or other text string encoded with the encodeURI() function: –Decode it with the decodeURI() function –The syntax for the decodeURI() function is: decodeURI(text);

27. JavaScript, Third Edition 27 The Expires attribute For a cookie to persist beyond the current browser session: –Use the expires attribute of the cookie property The expires attribute of the cookie property: –Determines how long a cookie can remain on a client system before it is deleted Cookies created without an expires attribute are available for only the current browser session

28. JavaScript, Third Edition 28 The Expires attribute (Cont.) Expires=date: –Syntax for assigning the expires attribute to the cookie property, along with an associated name=value pair The name=value pair and the expires=date pair are separated by a semicolon and a space

29. JavaScript, Third Edition 29 The Path attribute The path attribute: –Determines the availability of a cookie to other Web pages on a server –Assigned to the cookie property, along with an associated name=value pair, using the syntax: path=path name

30. JavaScript, Third Edition 30 The Path attribute (Cont.) By default, a cookie is available to all Web pages in the same directory If a path is specified: –Then a cookie is available to all Web pages in the specified path AND all Web pages in all subdirectories in the specified path

31. JavaScript, Third Edition 31 The Domain attribute Using the path attribute allows cookies to be shared across a server The domain attribute is used for sharing cookies across multiple servers in the same domain

32. JavaScript, Third Edition 32 The Domain attribute (Cont.) Cookies cannot be shared outside of a domain The domain attribute is assigned to the cookie property, along with an associated name=value pair, using the syntax domain=domain name

33. JavaScript, Third Edition 33 The secure attribute Indicates that a cookie can only be transmitted across a secure Internet connection using HTTPS or another security protocol Generally when working with client-side JavaScript –Secure attribute should be omitted

34. JavaScript, Third Edition 34 The secure attribute (cont.) If you wish to use the secure attribute: –Assign it to the cookie property with a Boolean value of true or false, along with an associated name=value pair, using the syntax secure=boolean value

35. JavaScript, Third Edition 35 Reading Cookies To parse a cookie, you must: 1.Decode it using the decodeURI() function 2.Use the methods of the String object to extract individual name=value pairs

36. JavaScript, Third Edition 36 JavaScript Security concerns Security areas of most concern to JavaScript programmers are: –Protection of a 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 –Privacy of individual client information in the Web browser window

37. JavaScript, Third Edition 37 The same origin Policy Restricts how JavaScript code in one window or frame accesses a Web page in another window or frame on a client computer For windows and frames to view and modify elements and properties of documents displayed in other windows and frames: –Must have the same protocol (such as HTTP) –Must exist on the same Web server

38. JavaScript, Third Edition 38 The same origin Policy (cont.) Applies not only to the domain name –Also to the server on which a document is located Prevents –Malicious scripts from modifying the content of other windows and frames –Theft of private browser information and information displayed on secure Web pages

39. JavaScript, Third Edition 39 Chapter Summary State information: –Information about individual visits to a Web site HTTP: –Originally designed to be stateless : Web browsers stored no persistent data about a visit to a Web site

40. JavaScript, Third Edition 40 Chapter Summary (cont.) Hidden form field: –Special type of form element –Not displayed by the Web browser –Used to hide information from users Form fields, query strings, and cookies: –Most common tools for maintaining state information

41. JavaScript, Third Edition 41 Chapter Summary (cont.) A query string: –Set of name=value pairs appended to a target URL The String object: –Contains methods for manipulating text strings Cookies: –Small pieces of information about a user stored by a Web server in text files on the user’s computer

42. JavaScript, Third Edition 42 Chapter Summary (cont.) EncodeURI() function: –Used in JavaScript for encoding text strings into a valid URI DecodeURI() function: –Decodes a cookie or other text string encoded with the encodeURI() function

43. JavaScript, Third Edition 43 Chapter Summary (cont.) The same origin policy: –Restricts how JavaScript code in one window or frame accesses a Web page in another window or frame on a client computer Domain property: –Domain property of the Document object changes the origin of a document to its root domain name