javascript 1 cookies and security saving the “state”

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