Persistence Maintaining state: Queries

State is the Problem What is state? facebook status logins (which user are you?) conversations talking about what? talking to whom?

HTTP Protocol stateless protocol by design! (why TCP?) The server does not know what you did What website you were on What you just did on the website Who you are page to page Each page is independent of the other!

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

Security Queries are not secure Cookies are not secure Easily accessible and editable TEXT! Cookies can be set secure - browser will only sent over HTTPS NOT that safe

Solution ONLY store session IDs or account name This means the cookie is a token SSL secure the connection: Session IDs can't be ripped off the net *Client man-in-the-middle attacks *Expire sessions + make new ones

URL Query Old school way to maintain state Old school way to maintain state

Query strings URL(Uniform Resource Locator) / URI Delineator characters: ? & = location ( query=”what is a cookie?” 20a%20cookie?

The right side of ? window.location.search= "?" cpu uses to find query in URL "name" parameter's name "=" cpu uses to split name from value "value" parameter's value " &" cpu uses to separate parameters

Automatic Queries onSubmit browser MAKES QUERY Before cookies: Servers put state info into ALL URLs tag's hrefs, everything!

demo

DOM's location Object -hacked- javascript APIs can break rules location looks like a string location= " website"; location.search = ? + right side of URL play with it in the Console (firebug)

Javascript String Object String objects have methods!!! substring(), substr() split() is extremely useful!.length = # of how long string is location.search.substr(start, length); location.split('?') -> array

DOM's encoders URL/URI have strict format rules space = %20, most stuff must be %hex encodeURI() / decodeURI() doesn't encode :// and some others encodeURIComponent() / decode…() encodes any possible troublemakers