Persistence Maintaining 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 ( query=”what is a cookie?” 0a%20cookie?

write the right side of ? 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