22
Persistence Maintaining state using cookies and queries

Persistence Maintaining state using cookies and queries

Embed Size (px)

Citation preview

Page 1: Persistence Maintaining state using cookies and queries

PersistenceMaintaining state using cookies and queries

Page 2: 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?

Page 3: Persistence Maintaining state using cookies and queries

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

Page 4: Persistence Maintaining state using cookies and queries

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

Page 5: Persistence Maintaining state using cookies and queries

Top 2 Techniques

•URL Query Strings

•Cookies

Page 6: Persistence Maintaining state using cookies and queries

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?

Page 7: Persistence Maintaining state using cookies and queries

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

Page 8: Persistence Maintaining state using cookies and queries

demo Google

Page 9: Persistence Maintaining state using cookies and queries

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

Page 10: Persistence Maintaining state using cookies and queries

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

Page 11: Persistence Maintaining state using cookies and queries

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

Page 12: Persistence Maintaining state using cookies and queries

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

Page 13: Persistence Maintaining state using cookies and queries

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

Page 14: Persistence Maintaining state using cookies and queries

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

Page 15: Persistence Maintaining state using cookies and queries
Page 16: Persistence Maintaining state using cookies and queries

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 17: Persistence Maintaining state using cookies and queries

Domain attribute

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

•Syntax:

•document.cookie =

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

Page 18: Persistence Maintaining state using cookies and queries

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 19: Persistence Maintaining state using cookies and queries

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

Page 20: Persistence Maintaining state using cookies and queries

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()

Page 21: Persistence Maintaining state using cookies and queries

DEMO

Page 22: Persistence Maintaining state using cookies and queries

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