javascript 1 cookies and security saving the “state”
TRANSCRIPT
JavaScript 1
Cookies and SecuritySaving the “state”
JavaScript 2
First Labs Last lab and Project Final
Wednesday, December 10 from 10:30am to 12:30 pm
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
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
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) …
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++
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:
Users\cookie.txt IE:
windows\temp\martin@db_wce_wwu(1).txt
client=bozo;expires=Sun,17 May-2015 00:00:00 GMT
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
JavaScript 13
Don’t like cookies?
Turn them off 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 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>
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
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