Chapter 8: Cookies and Security

1. Chapter 8: Cookies and Security JavaScript - Comprehensive

2. Previewing the Virtual Zoo Program • To preview the Product Registration program and the Home Page program code refer to pages 394 and 395 of the textbook.

3. Section A: State Information and Cookies

4. Objectives • In this section, the students will learn: • About state information • About the String object • How to save state information with query strings • How to create and read cookies

5. State Information • HTTP was originally designed to be stateless, in that no persistent data was stored about a visit to a Web page • Although this stateless design was efficient, it was also limiting, since a Web server could not remember individual user information • There are many reasons for maintaining state information, including: • Individual Web page customization based on user preferences • Temporary storage of information when navigating within a multipart form

6. State Information • Bookmarks for returning to specific locations within a Web site • Shopping carts that store order information for commercial Web sites • Storage of user Ids and passwords • Counters to keep track of how many times a user has visited a site • There are several methods of maintaining state information: • Hidden form fields • Query strings • Cookies

7. Commonly Used Methods of the String Object

8. Commonly Used Methods of the String Object

9. The String Object • The string object contains methods used for manipulating text strings • The String object also contains a single property the length property, which returns the number of characters in a string • To make state information stored in long strings of text usable, the long strings usually must be parsed • Parsing is the act of extracting characters or substrings from a larger string

10. String Object Examples

11. String Object Examples in a Web Browser

12. Saving State Information with Query Strings • A query string is a set of name=value pairs appended to a target URL, and consists of a single text string containing one or more pieces of information • The search property of the Location object contains a URL’s query or search parameters • To use the data contained in a query string, you must manipulate the string using the String object’s methods and length property • To create a query string, add a question mark (?) immediately after a URL, followed by name=value pairs for the information you want to preserve

13. Saving State Information with Query Strings • The following code provides an example of an <A>…</A> tag pair that contains a query string with three name=value pairs: <A HREF=“http://www.URL.com/TargetPage.htlm?firstName = Don&lastName=Gosselin&occupation=writer”>Link Text</A> • To modify the Product Registration program so that customer information is passed as query strings instead of being shared in hidden form fields, refer to the instruction on pages 401 to 403 of the textbook • To modify the Productinfo.html file use the steps on pages 403 and 404 of the textbook

14. Parsing a String • For a Web page to use the information in a query string, you must first parse the string, using a combination of several methods and the length property of the String object • The first task is to remove the question mark at the start of the query string, using the substring () method combined with the length property • The next step is to convert the individual pieces of information in the queryData variable into array elements using the split() method

15. Parsing Program

16. Parsing a String • You will parse the name=value pairs in the ProductInfo.html query string and display them in an alert dialog box • To parse the name=value pairs in the ProductInfo.html query string and display them in an alert dialog box use the directions on page 406 of the textbook

17. Saving State Information with Cookies • Query strings do not permanently maintain state information • You can save the contents of a query string or hidden form fields by using a CGI script, but that method requires a separate server-based application • To be able to store state information beyond the current Web page session, Netscape created cookies

18. Saving State Information with Cookies • 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 and are stored in a text file on a client computer • In Navigator for Windows, cookies are stored in a file named cookies.txt located in the Navigator directory

19. Creating Cookies • You use the cookie property of the Document object to create cookies in name=value pairs, the same way you used name=value pairs with a query string

20. Name Attribute • The only required parameter of the cookie property is the name attribute, which specifies the cookie’s name=value pair • Cookies that are created with only the name=value parameter are called transient, or temporary • You can also build a list of cookies using a single document.cookie statement by separating the name=value pairs with semicolons

21. Name Attribute • Cookies cannot include special characters because they are transmitted between Web browsers and Web servers using HTTP, which does not allow certain nonalphanumeric characters to be transmitted in their native format • It is good practice to encode text before assigning it to the cookie property • The escape() method is used in JavaScript for encoding text strings • To modify the productInfo.html file use the steps on page 409 of the textbook

22. Expires Attribute • The expires attribute of the cookie property determines how long a cookie is to remain on a client’s system before it is deleted • Cookies created without an expires attribute are available for only the current browser session • The syntax for assigning the expires attribute to the cookie property, along with an associated name=value pair, is expires=date • The Date object is used for manipulating the date and time

23. Commonly Used Date Object Methods

24. Expires Attribute • To use a Date object with the expires attribute, you add the specified amount of time for which you want a cookie to be valid by using a combination of the set() and get() methods of the Date object myDate.setDate(myDate.getDate( ) +7; • To create a file that stores a user’s name and favorite background color in a persistent cookie, refer to the instructions on pages 411 and 412 of the textbook

25. Path Attribute • The path attribute determines the availability of a cookie to other Web pages on a server • The path attribute is assigned to the cookie property, along with an associated name=value pair, using the syntax path=path name

26. 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 • You cannot share cookies outside of a domain

27. Secure Attribute • To protect private data transferred across the Internet, Netscape developed Secure Sockets Layer, or SSL, to encrypt data and transfer it across a secure connection • Web sites that support SSL usually start with HTTPS instead of HTTP

28. Secure Attribute • The secure attribute indicates that a cookie can only be transmitted across a secure Internet connection using HTTPS or another security protocol • To activate the secure attribute for a cookie, you use a statement similar to the following: document.cookie = “firstName=Don” + “; secure=true”);

29. Reading Cookies • The cookies for a particular Web page are available in the cookie property of the Document object • Cookies consist of one continuous string that must be parsed before the data they contain can be used • You must use the methods of the String object to extract individual name=value pairs

30. Reading Cookies • Once you split the cookie into separate array elements, you still need to determine which cookie holds the value you need • To create a function that reads and displays the contents of the cookies created by the ProductRegistration.html file, refer to the instructions on pages 415 to 416 of the textbook • To modify the PersonalPref.html file so that a user’s personal options are read from the stored cookies, use the directions on pages 416 and 417 of the textbook

31. Section A: Summary • State information refers to any stored information about a previous visit to a Web site • The String object contains methods and properties used for manipulating text strings • Parsing refers to the act of extracting characters or substrings from a larger string • A query string is a set of name=value pairs appended to a target URL and consists of a single text string containing one or more pieces of information

32. Section A: Summary • For a Web page to use the information in a query string, you must parse the string, using a combination of several methods, and the length property of the String object • Cookies, or magic cookies, are small pieces of information about a user that are stored by a Web server in text files on the user’s computer • Cookies can be temporary or persistent • You create cookies in name=value pairs, using the cookie property of the Document object

33. Section A: Summary • The only required attribute of the cookie property is the name attribute, which specifies the cookie’s name=value pair • The escape () method is used in JavaScript for encoding text strings • When you read a cookie or other text string encoded with the escape() method, you must first unencode it with the unescape() method • The expires attribute of the cookie property determines how long a cookie is to remain on a client’s system before it is deleted

34. Section A: Summary • The path attribute determines the availability of a cookie to other Web pages on a server • The domain attribute is used for sharing cookies across multiple servers in the same domain • The secure attribute designates that a cookie can only be transmitted across a secure Internet connection using HTTPS or another security protocol • The cookies for a particular Web page are available in the cookie property of the Document object

35. Section B Security

36. Objectives • In this section, the student will learn: • About JavaScript security concerns • About the same origin policy • About signed scripts and digital certificates • How to create a test certificate • How to work with privileges • How to sign a JavaScript program • How to enable codebase principals

37. JavaScript Security Concerns • The Web was originally designed to be read-only. Its primary purpose was to locate and display documents that existed on other areas of the Web • Web pages can now contain programs in addition to static content • This ability to execute programs within a Web page raises several security concerns

38. JavaScript Security Concerns • The 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 a client’s local file system or Web site from theft or tampering

39. JavaScript Security Concerns <SCRIPT LANGUAGE=“JavaScript1.2” SRC=“http://www.dongosselin.com/javascript/HiddenScript.js”> • The preceding <SCRIPT>tag could be embedded within an HTML document, preventing clients from directly seeing the JavaScript code in the HiddenScript.js file

40. The Same Origin Policy • 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’s computer • For windows and frames to view and modify important properties of documents displayed in other windows or frames, they must have the same protocol and exist on the same Web server • The same origin policy applies not only to the domain name, but also to the server on which a document is located

41. Objects and Properties Subject to the Same Origin Policy

42. The Same Origin Policy • The same origin policy prevents malicious scripts from modifying the content of other windows and frames, and prevents the theft of private browser information and information displayed on secure Web pages • Same origin policy restrictions can be bypassed by using signed scripts and privileges • The same origin policy also protects the integrity of the design of your Web page

43. The Same Origin Policy • To create a frame set in which one frame uses JavaScript code to try to change the background color of the Yahoo! Home page, using the bgColor property of the Document object, refer to the instructions on pages 425 and 426 of the textbook • The domain property of the Document object changes the origin of a document to its root domain name, using the statement document.domain = “domain”;

44. Wrong Origin Error Message in Navigator

45. Signed Scripts and Digital Certificates • Unlike commercial software programs, you have no way of knowing who created a JavaScript program, and whether it has been modified in some way not intended by the author • There are two dangers in running a program on your computer that you did not intentionally install • You never have the opportunity to make decisions about what you want to allow the program to do • You do not know whether you can trust the author of such a program

46. Signed Scripts and Digital Certificates • There are strict rules that govern the access JavaScript programs have to a client’s Web browser and computer system • A privilege refers to permission that is granted to access a restricted feature, or information that is not normally available to a JavaScript program • For a JavaScript program to access a privilege, it must make a request to the user, who has the option of granting or denying the request • Normally, privileges are off-limits to a JavaScript program

47. Signed Scripts and Digital Certificates • There are situations in which a client should grant permission to use a privilege, such as when form data is being e-mailed. • To identify the author of a JavaScript program, Navigator supports digital signing of scripts • Digital signing clearly identifies the author of a JavaScript program and ensures that a JavaScript program has not been modified from its original format

48. Signed Scripts and Digital Certificates • A digital certificate is an electronic identification that the creator of a JavaScript program attaches to a signed script • A principal, or entity, refers to the owner of a digital certificate • Internet Explorer does not support digital signing of JavaScript code

49. Certificates Menu of the Security Info Dialog Box

50. Creating a Test Certificate • To learn how to use digital certificates, you will use Signtool to generate a test certificate • For Windows operating systems, Signtool is a command-line program • Signtool’s parameters are case-sensitive • Certificates in Navigator are protected by passwords • To create a certificate password and a test certificate with Signtool, follow the instructions shown on pages 431 and 432 of the textbook