javascript, fourth edition chapter 9 managing state information and security
TRANSCRIPT
![Page 1: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/1.jpg)
JavaScript, Fourth Edition
Chapter 9Managing State Information and Security
![Page 2: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/2.jpg)
JavaScript, Fourth Edition 2JavaScript, Fourth Edition 22
Objectives
• Learn about state information• Save state information with hidden form fields,
query strings, and cookies• Learn about security issues
![Page 3: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/3.jpg)
JavaScript, Fourth Edition 3
Understanding State Information
• State information– Information about individual visits to a Web site
• HTTP was originally designed to be stateless– Browsers stored no persistent data about site
visits
• Reasons for maintaining state information– Customize individual Web pages
– Temporarily store information for a user
– Allow a user to create bookmarks
– Provide shopping carts
![Page 4: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/4.jpg)
JavaScript, Fourth Edition 4
Understanding State Information (continued)
• Reasons for maintaining state information– Store user IDs and passwords
– Use counters
• Example– Frame-based Color Printer Product Registration
Web page
![Page 5: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/5.jpg)
JavaScript, Fourth Edition 5
Understanding State Information (continued)
![Page 6: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/6.jpg)
JavaScript, Fourth Edition 6
Understanding State Information (continued)
![Page 7: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/7.jpg)
JavaScript, Fourth Edition 7
Saving State Information with Hidden Form Fields
• Hidden form field– Special type of form element
– Not displayed by the Web browser
– Allows you to hide information from users
– Created with the <input> element
• Temporarily store 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
• Syntax– <input type="hidden">
![Page 8: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/8.jpg)
JavaScript, Fourth Edition 8
Saving State Information with Hidden Form Fields (continued)
![Page 9: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/9.jpg)
JavaScript, Fourth Edition 9
Saving State Information with Hidden Form Fields (continued)
• Example– Add hidden form fields to the Color Printer
Product Registration program
– Add code to the Customer Information document that copies its form field values to the hidden form fields in the top frame of the Color Printer Product Registration frameset
– Add code to the Product Information document that copies its form field values to the hidden form fields in the top frame of the Color Printer Product Registration frameset
![Page 10: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/10.jpg)
JavaScript, Fourth Edition 10
Saving State Information with Query Strings
• 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
• You can use a query string to pass information from one Web page to another
![Page 11: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/11.jpg)
JavaScript, Fourth Edition 11
Passing Data with 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
• You separate individual name=value pairs within the query string using ampersands (&)
• The passed query string is then assigned to the search property– Of the target Web page Location object
• Example– Modify the Color Printer Product Registration page to
pass registration information as query strings
![Page 12: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/12.jpg)
JavaScript, Fourth Edition 12
Parsing Data from a Query String
• Remove the question mark– Using the substring() method combined with
the length property
• Convert the individual pieces of information into array elements– Using the split() method
• Example– Write your own parsing script that extracts and
displays the data in the query string
![Page 13: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/13.jpg)
JavaScript, Fourth Edition 13
Parsing Data from a Query String (continued)
![Page 14: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/14.jpg)
JavaScript, Fourth Edition 14
Saving State Information with Cookies
• Query strings and hidden form fields maintain state information only temporarily
• Cookies– Small pieces of information about a user that are
stored by a Web server in text files• On the user’s computer
• Each time the Web client visits a Web server– Saved cookies are sent from the client to the server
• Temporary cookies– Remain available only for current browser session
![Page 15: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/15.jpg)
JavaScript, Fourth Edition 15
Saving State Information with Cookies (continued)
• Persistent cookies– Remain available beyond current browser session
• And are stored in a text file on a client computer
• Limitations on the use of cookies– Server or domain can store a maximum of 20
cookies
– Total cookies per browser cannot exceed 300
– Largest cookie size is 4 kilobytes
![Page 16: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/16.jpg)
JavaScript, Fourth Edition 16
Creating Cookies
• Use the cookie property of the Document object – To create cookies in name=value pairs
• The name attribute– Only required parameter
– Specifies the cookie’s name=value pair
– Cookies created with only the name attribute are temporary cookies
– Cookies cannot include semicolons or special characters• You can use special characters in your cookies if you use
encoding
![Page 17: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/17.jpg)
JavaScript, Fourth Edition 17
Creating Cookies (continued)
• The name attribute (continued)– Encoding involves converting special characters in a
text string• To their corresponding hexadecimal ASCII value
– encodeURIComponent() function• Used for encoding the individual parts of a URI• Converts special characters in the individual parts of a
URI to their corresponding hexadecimal ASCII value
– decodeURIComponent() function• Counterpart of encodeURIComponent() function
![Page 18: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/18.jpg)
JavaScript, Fourth Edition 18
Creating Cookies (continued)
• The name attribute (continued)– You should manually encode and decode cookies– Example
• Modify the Customer Information form so its fields are saved in temporary cookies instead of in query strings
• The expires attribute– Determines how long a cookie can remain on a client
system before it is deleted– Cookies created without this attribute are available for
only the current browser session– Be sure not to encode this attribute
![Page 19: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/19.jpg)
JavaScript, Fourth Edition 19
Creating Cookies (continued)
• The expires attribute (continued)– You can manually type a string in UTC format
• Or you can create the string with the Date object
– Use the toUTCString() method to convert the Date object to a string
– Unused persistent cookies can sometimes interfere with the execution of a JavaScript cookie program
– Example• Add to ProductInfo.html a persistent cookie named
registered that is assigned a value of true when the user clicks the Submit button
![Page 20: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/20.jpg)
JavaScript, Fourth Edition 20
Creating Cookies (continued)
• The path attribute– Determines the availability of a cookie to other
Web pages on a server
– By default, a cookie is available to all Web pages in the same directory
– To make a cookie available to all directories on a server, use a slash
– Cookies from other programs that are stored in the same directory
• Can cause your JavaScript cookie program to run erratically
![Page 21: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/21.jpg)
JavaScript, Fourth Edition 21
Creating Cookies (continued)
• The domain attribute– Used for sharing cookies across multiple servers
in the same domain
– You cannot share cookies outside of a domain
• The secure attribute– Indicates that a cookie can only be transmitted
across a secure Internet connection• Using HTTPS or another security protocol
![Page 22: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/22.jpg)
JavaScript, Fourth Edition 22
Reading Cookies
• Parsing a cookie– Decode it using decodeURIComponent() function
– Use the methods of the String object to extract individual name=value pairs
• Example– Modify the code in ProductInfo.html so it does not
refer to the query string
– Add code to the Register.html document that reads and prints the contents of the cookies from the CustomerInfo.html document
![Page 23: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/23.jpg)
JavaScript, Fourth Edition 23
Reading Cookies (continued)
• Example– Modify CustomerInfo.html so it reads the
persistent registered cookie to determine whether the user has already submitted the product registration
![Page 24: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/24.jpg)
JavaScript, Fourth Edition 24
Understanding Security Issues
• Discuss security issues that relate to Web browsers and JavaScript
![Page 25: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/25.jpg)
JavaScript, Fourth Edition 25
Secure Coding with JavaScript
• Security threats– Viruses, worms, and data theft by hackers
• Consider both Web server security issues and secure coding issues
• Web server security technologies– Firewalls
– Secure Socket Layer (SSL)
• JavaScript programs are downloaded and execute locally
![Page 26: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/26.jpg)
JavaScript, Fourth Edition 26
Secure Coding with JavaScript (continued)
• Secure coding or defensive coding– Writing code to minimize any intentional or
accidental security issues
• All code is insecure unless proven otherwise• No magic formula for writing secure code
![Page 27: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/27.jpg)
JavaScript, Fourth Edition 27
JavaScript Security Concerns
• Security areas of most concern– 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
• Another security concern– Privacy of individual client information in the Web browser
window
• An important JavaScript security feature– Its lack of certain types of functionality
![Page 28: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/28.jpg)
JavaScript, Fourth Edition 28
JavaScript Security Concerns (continued)
• Missing functionalities– File manipulation
– Create a network connection
– Cannot run system commands or execute programs on a client
![Page 29: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/29.jpg)
JavaScript, Fourth Edition 29
The Same Origin Policy• 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
• To view and modify the elements in other windows and frames– They must have the same protocol and exist on the
same Web server
• Same origin policy applies not only to the domain name– But also to server on which a document is located
![Page 30: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/30.jpg)
JavaScript, Fourth Edition 30
The Same Origin Policy (continued)
• 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
• Policy also protects the integrity of the design of your Web page
• Example– Create a frame set in which one frame uses
JavaScript code to try to change the status bar text of another frame
![Page 31: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/31.jpg)
JavaScript, Fourth Edition 31
The Same Origin Policy (continued)
• domain property of the Document object– Changes the origin of a document to its root
domain name
– Allows documents from different origins in the same domain to access each other’s elements and properties
![Page 32: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/32.jpg)
JavaScript, Fourth Edition 32
Summary
• Information about individual visits to a Web site is called state information
• HTTP was originally designed to be stateless• You can hide information from users in a hidden
form field• Most common tools for maintaining state
information are hidden form fields, query strings, and cookies
• A query string is a set of name=value pairs appended to a target URL
![Page 33: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/33.jpg)
JavaScript, Fourth Edition 33
Summary (continued)
• Cookies are small pieces of information about a user that are stored by a Web server
• Cookies can be temporary or persistent• The cookie property is created with a required name attribute
• You can use special characters in your cookies if you use encoding
• The built-in encodeURIComponent() function encodes the individual parts of a URI
![Page 34: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/34.jpg)
JavaScript, Fourth Edition 34
Summary (continued)
• When you read a cookie or other text string encoded, you must first decode it with the decodeURIComponent() function
• Cookies are one continuous string that must be parsed
• “Secure coding,” or “defensive coding,” refers to writing of code to minimize any intentional or accidental security issues
![Page 35: JavaScript, Fourth Edition Chapter 9 Managing State Information and Security](https://reader036.vdocuments.us/reader036/viewer/2022062409/56649e5f5503460f94b599c7/html5/thumbnails/35.jpg)
Summary (continued)
• 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.
• The domain property of the Document object changes the origin of a document to its root domain name using the statement document.domain = “domain”;
JavaScript, Fourth Edition 35