JavaScript 1 Cookies and Security Saving the “state”
-
Upload
sherman-mitchell -
Category
Documents
-
view
216 -
download
3
Transcript of JavaScript 1 Cookies and Security Saving the “state”
![Page 1: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/1.jpg)
JavaScript 1
Cookies and SecuritySaving the “state”
![Page 2: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/2.jpg)
JavaScript 2
First Labs Last lab and Project Final
Wednesday, December 10 from 10:30am to 12:30 pm
![Page 3: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/3.jpg)
JavaScript 3
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 .
Cookies
![Page 4: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/4.jpg)
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
http://www.w3schools.com/js/js_cookies.asp http://www.echoecho.com/jscookies03.htm http://www.elated.com/articles/javascript-and-cookies/ http://www.thesitewizard.com/javascripts/cookies.shtml
JavaScript 4
![Page 5: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/5.jpg)
JavaScript 5
Session Objective
Web Document are Interactive 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) …
![Page 6: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/6.jpg)
JavaScript 6
CGI
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=“http://traffic.com/cgi-bin/guestbook”>
Issues Not all host provides access to user-written CGI. Why? Any number of languages
PERL VB C++
![Page 7: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/7.jpg)
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?
![Page 8: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/8.jpg)
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.
![Page 9: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/9.jpg)
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.
![Page 10: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/10.jpg)
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
![Page 11: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/11.jpg)
JavaScript 11
Baking Cookies
Where? Netscape/FireFox:
Users\cookie.txt IE:
windows\temp\martin@db_wce_wwu(1).txt
client=bozo;expires=Sun,17 May-2015 00:00:00 GMT
![Page 12: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/12.jpg)
JavaScript 12
Ingredients
client=bozo;expires=Sun,17 May-2015 00:00:00 GMT
Name=Value Expires=Date [optional] Domain=DomainNam[optional] Path=Path [optional] Secure [optional] //only over https
![Page 13: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/13.jpg)
JavaScript 13
Don’t like cookies?
Turn them off manually cookie cruncher programs… privacy issues
Beware of users allergic to cookies
![Page 14: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/14.jpg)
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)
![Page 15: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/16.jpg)
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
![Page 17: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/17.jpg)
JavaScript 17
State Information
Three basic methods for maintaining state information: Hidden form fields Query strings Cookies
![Page 18: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/18.jpg)
JavaScript 18
Saving State Information withQuery Strings
Query string 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=“http://www.bozo.com/myPage.html?firstName=Joe&
lastName=Smith&occupation=singer”>Here is a link </a>
![Page 19: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/19.jpg)
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);
![Page 20: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/20.jpg)
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
![Page 21: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/21.jpg)
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
![Page 22: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/22.jpg)
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!
![Page 23: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/23.jpg)
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”);
![Page 24: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/24.jpg)
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
![Page 25: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/25.jpg)
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
![Page 26: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/26.jpg)
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
![Page 27: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/27.jpg)
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”);
![Page 28: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/28.jpg)
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”);
![Page 29: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/29.jpg)
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
![Page 30: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/30.jpg)
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
![Page 31: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/31.jpg)
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
![Page 32: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/32.jpg)
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
![Page 33: JavaScript 1 Cookies and Security Saving the “state”](https://reader035.fdocuments.us/reader035/viewer/2022081603/56649e555503460f94b4c49d/html5/thumbnails/33.jpg)
Easy examples
http://sw.cs.wwu.edu/~s_granier/cs202/cookies/
http://www.elated.com/articles/javascript-and-cookies/
http://www.webmonkey.com/2010/02/advanced_javascript_tutorial_-_lesson_2/#Cookie_Introduction
JavaScript 33