PersistenceMaintaining state using cookies and queries

State is the Problem

•What is state?

•facebook status

•mailbox flag

•conversations

•talking about what?

•talking to whom?

HTTP Protocol

•Stateless by design!

•Your machine & the server do not know

•What website you were on

•What you just did on the website

•Who you are page to page

•Each page is INDEPENDENT / SEPARATE

Why do you care?

•Maintain items in a shopping cart

•Website User Accounts

•Web Apps using more than ONE page

•Allow bookmarks of query results

•Polling, Statistics, Advertising

Top 2 Techniques

•URL Query Strings

•Cookies

Query string

•URL (Uniform Resource Locator)

•delineator character: ?

•location (http://google.com)

•query=”what is a cookie?”

•http://google.com?query=what%20is%20a%20cookie?

write the right side of ?

•<form method=”get” ….>

•form tags’ names and values are converted into a URL query string onsubmit

•tag attributes containing URLs

•the DOM window.location object

demo Google

DOM location•location.search = string of the ? side

•String object has methods!

•substring(), substr()

•split() is extremely useful!

•.length = # of how long string is

•location.search.substring(start,length);

Cookies

•AKA: tokens or tickets

•Browser stores a STRING of data for you

•Browser sends server STRING for every http connection it makes

•Server can send browser STRING to store as well

How does it work?•Browser keeps STRING stored by

website

•Sends STRING only to that website unless

•Temporary - dies when browser quits

•Expiration date passed

•Max string size of 4KB

•Max 20 cookies per server

document.cookie•string object but HACKED

•strict complex formatting rules

•String object methods are needed

•string must be valid URL!

•encodeURI() & decodeURI()

•add / remove %## codes; %20 = space

Cookie attributes

•NOT an object (but should have been)

•so each “attribute” is formatted into the cookie string and the browser parses the info right back out again

•name=value; attribute=av; attribute2=av2

Expires attribute

•Date → specified in UTC format

•Weekday Mon DD HH:MM:SS Time Zone YYYY

•Set manually or Date object/methods

•Delete cookie: set date in the past

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

Domain attribute

•Used for sharing cookies across multiple servers in the same domain

•Syntax:

•document.cookie =

•(“x=123“ + “; domain=.xyz.com”);

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”);

Reading Cookies

•Cookies are a 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

Simple Example•document.cookie=

encodeURI("name=mycookie string; secure");

•x = document.cookie

•x is name=mycookie%20string; oldname=oldcookie

•you may see cookies returned! use split()

DEMO

Security

•Queries are not secure

•Cookies are not secure

•Easily accessible and editable!

•Cookies can be set secure - browser will only send over HTTPS but are not that safe