Web-Technology Lecture 8

Stateful Web Lennart Herlaar - UU

Web is Stateless By default, Web is stateless, because HTTP is a stateless protocol HTTP recognizes only page-based requests Client and server are agnostic to the state of one another By default HTTP does not support continuously running application Neither the server, nor the client Requests are sent, responses are generated To whom do they belong? Stateful protocols? Lennart Herlaar - UU

Continuous Interaction needs State The continuity of access is necessary Login/logout Shopping basket Collaborative editing of document etc. The current state of interaction has to be stored and accessed …somehow, somewhere Store it on the client? The entire state has to be sent to the server with every HTTP request Store it on the server Requires identification of the current state and the requester to whom it belongs

Option 1: Building-up the state in the URL ..well, in the URL, when we use GET General principle: Adding the entire state to the query string of the URL, e.g.: “onsubmit” a client invokes a script and sends query strings with all the state parameters <a href="specials.js?[...]&step=buyerinfo&product=64625">Special deals</a> <form name="input" action="shop.js?step=paymentinfo&[...]&product=64625" method="post"> Full name: <input type="text" name="name"/><br/> Address: <input type="text" name="address"/><br/> <input type="submit" value="Send"/> </form> Lennart Herlaar - UU

Option 2: Hidden input fields State is "hidden" in the form Hidden input fields store parameters of the state in the browser “onsubmit” the values are sent to the server As a part of the GET query string / POST body Re-processed by the server side script Sent back as a part of the generated HTML to ensure continuity Problems with passing state with hidden input fields (and URLs)? Confusing: use the “back” button = lose the state Inefficient: the entire state ping-ponged back and forth Unsafe: the user can see the state in the HTML source Complex: scripting ping-pong and input validation Lennart Herlaar - UU

Example: Hidden input fields (1) <form name="product" action="shop.js" method="get"> Product: <select name="product"> <option value="62629">Volvo</option> <option value="89124">Saab</option> <option value="64625">Fiat</option> <option value="31763">Audi</option> </select><br/> <input type="submit" value="Send"/> <input type="hidden" name="step" value="productinfo"/> </form> <form name="input" action=" shop.js" method="get"> Full name: <input type="text" name="name"/><br/> Address: <input type="text" name="address"/><br/> <input type="submit" value="Send"/> <input type="hidden" name="step" value="buyerinfo"/> <input type="hidden" name="product" value="64625"/> <input type="hidden" name="price" value="8995"/> </form> <form name="input" action="shop.js" method="get"> card number: <input type="text" name="cardno"/><br/> card name: <input type="text" name="cardname"/><br/> <input type="submit" value="Send"/> <input type="hidden" name="step" value="paymentinfo"/> <input type="hidden" name="product" value="64625"/> <input type="hidden" name="price" value="8995"/> <input type="hidden" name="name" value="Willie Wartaal"/> <input type="hidden" name="address" value="..."/> </form> Lennart Herlaar - UU

There is a way to solve some those problems <form name="input" action="shop.js" method="get"> Full name: <input type="text" name="name"/><br/> Address: <input type="text" name="address"/><br/> <input type="submit" value="Send"/> <input type="hidden" name="step" value="buyerinfo"/> <input type="hidden" name="product" value="64625"/> <input type="hidden" name="price" value="8995"/> </form> <form name="input" action="shop.js" method="post"> Full name: <input type="text" name="name"/><br/> Address: <input type="text" name="address"/><br/> <input type="submit" value="Send"/> <input type="hidden" name="step" value="buyerinfo"/> <input type="hidden" name="product" value="64625"/> <input type="hidden" name="price" value="8995"/> </form> <form name="input" action="shop.js" method="post"> Full name: <input type="text" name="name"/><br/> Address: <input type="text" name="address"/><br/> <input type="submit" value="Send"/> <input type="hidden" name="step" value="buyerinfo"/> <input type="hidden" name="checksum" value="7ce9e97f43808be0d23f0493c3e1345b"/> </form> md5("step=buyerinfo&product=64625&price=8995") Lennart Herlaar - UU

Option 3:

What is an HTTP cookie A way for a browser to preserve page- or site-related data …like variables that live even after a user leaves website … even after a user closes the browser A way for the server to make the browser preserve this data Can be used by both client- and server-side scripts and programs Stored locally by the browser Associated with a particular Web page or Web site Sent by a browser to the server with every new request A remedy to the statelessness of HTTP Authentication Re-launching an application Cross-page navigation

Limitations Intended for infrequent storage of small amounts of data gr,Dj<G[UM-H/j!`]!LT]I{jOV#L*qa.^ZeS53Wb#l(hq&(@Fgf,_6Ab27OSu`mRvrtcS|\V!"I^!:9*!_Mf{;*#9W]E2.mr[ar{<sU-fp1?$}Nm$7m,AB29?#Ns1?tEz-SG+$Z'O@W!0{R6ZfwP,DAwiVTGQ?JO`s_8,0|HWJ0(7o4Z+!CsX?r<|_r3@*=W{0S(NPUJn(kJx3id%IlCh9WCo:8dJ_>$PygJ9#._-A,--kYt?E%s<^(&Q6mRvI,Nh<<_Rof:E}/2U+,L\X+.e|2_Fod0vo3FX(tpa|4\X+5eh&yJ1&lg}Pd\Ij6L\<2j|uW:(6'372&H4"BCR}Df'ENGT.w#^4G:37SmnG_Pt:7}`(wMx3J-{zLhKk:xHMa=%m/vxmS[-Mm.!VM+^V7z"BA0Y#Al((ChIDCOYpz^\a/_tm5Ber&F7;8VM?t|Kv]`5N6As%rZTW/o-.4yokx7,,a>)WR$D$);7hi]K4xN0kW!z,}IU8\PW7nCaAAQ2vL:^<&iiuyXdLgHh'SRhroK2T}jlNX{S2h=N9MFD+G/YuEIzrJk?rXbZB@JQ"h.GKNnIrEdO4F-_Yin0u<V$$#aBFswr5jOEL7)xTx'w/aAsL1IXDB'm":Ag4fmd{[v6MMBR?)b&u+h69F{chUi2re$.ZY/`C}iXsWS@O!r<1.-hCl70ZW/prMc@_L(FVB,-.1qxVY,W>hg(gAFtR@NhT|CFZYq$w:0dpZzEFEl=U\^q4}`YMY(4x$cU9n(#9l'$/p+YXQzAKCpkiF/C4}V=."*KT!+)TFs:GGkn51>LS3|aUhwU+'c_0;dWC`kLelp8"jKSb*Zo=j,p\}M}/m.Dsv"$[2KHoFo^VrNKyH0|EGpc=$;B0=Y,D]AOUl'#?`/X:pWnoi]g&9_`V\`pCV@]K(|E?<d)^&J?S52*nZ1km&L>p,|))qcOK-5GnWEN6l#Cr$?ZsgW&JzL_}Vp;k|.r:gm7hkjYCK?b$SVf^8"]/X8uK8xYD%5r^sdLyJa,i.\FEvF3sKa{#P,4l4auY=,vgZ|rty@}*R.;U@[Q'A}$b`_tM0SUwH;Ktarp]E.chc+)?:7"C,g%EO]g`a6_Jn9p[4H/oH_n+UG[b#Fbj}m=|e}faVKJ4Gs]#S!o!Wr]c38HDUebX=q4S$8l<JarcJ`w2W?R0fN;!g2G@Omi{oG_!J("ScC[]fP')/Xo\omq+HA"eM#-uG1b*;,{`_34v,L[Vgw,-r]*}cxI#\KNGa[7V=,DJukCr$"U]N%F%/Mxfw{-CL;Fu8f8[|3{KvXgqOH_'97_#g{_7";`5n;mtz+&W0O[%$ro{<C:%:L9n9`*zMef::RtpQ6zsxzd,U5'}Cr+D`s]Di!),dhBSTP'H<$(9eOhQ-)5iOJZ_WIC'.E:{U(PjK@@mDfJ.]5=AEa.]7J;v2p9?Fl*Ly^q+n>pQ}t>J,,}or,Z5'iD8>jvMUL&(!$pqv`g*|ZkHfq$7,`PAoks%'<JkXg4t=ftio]1Q^9ewEqf),V4NJGa.hIDlZLq!F'|@KaWFy-`lU_M]ua6(aO#I6;zsH:`'S'IID#Em\YE^%Od`Lk4GVW+Z,(S%5Fn0ejw6;I_.!C<da*OFroxUWc28h[D'V]Vz|hj=J9=5X&F)Xoybd\vaNXY("$QeaSxyohR"Tb:iD{H1J$9]a_rT/$@QOY,Prni1-jZ1e=2+"2#F)Sg1P7h4lSZL%"l792||!<Rtsj.!KrQ,KX<*%qs*E8tAJjO@n1#3/d!e3"gpij\n[rq>fm=:;)&G?u=#XK]IG3V)y;P,7/_]2sO<5)Pr1.l8Hmgy.7xaIVFmUr;}]^jxsPDm3I<x=?EY}S>z>$Q9gY7-tm1:tk]>Io3xXh{Dl8SER/&79U(h'RgbnrVVnE8p`<n4}ja9LH["fK]VW!,Scc'+}sMc<I|Ktw..2n4;U[/tctVxuKy9LeNFr5"EM-#ZM$4}1}aV(SC7EfWAVYwdQVX!)Y@+Q1uCb|Va4Px`/`<+:SLqZh"$l+Qtw-X?:CDHv;}'6ChmbRncChx}#!JuMtHv1Q?pICMasz5BR.^ECw8vEhy35_i9\*@M,\zTsgtvD*3wX2ag`er%8z)fi(/,Kj0Dt?_83CT]#eB3;v`6Oe|ya6>hILi_@I}}}AGsTnLJKrBz5OW=^i&9>\|Z>6^[OXVZ)d:vhAo=]tohD`08w0.ye>zCE@[pb|/.(6|#ZlDCS'[f'uvi.@[+'c3d9+Y2<[NrA/i|L&vsrL*M}b1+]d*!XyF}+,&TKJ-eDEHo#H:B?}h=`=U4!yXAgU}PyJi?dyx[OYTCPX;&rg4k-N^<m/}o@C@,*,uwh6s#xr7_s[7\B[/J`boX"ee|vd9(wm-^E4*v/Bh-Q7D0H+t\1NQD52g)Ws_$oq5ol-+uAHgW{Gn9SErx?!P2G8]Ytf\IPHi,0AGY9lGb(0ZVJaXQE|^CsB-Y&cQ&@v6-;46;:9-`;Y'Jaqdt"hmkD5e\EwOl9o(;bISa[6<.69EuR8LwJhzxTjeb'`:q]ZEvvOE<#uB@UZPl%`4"o!V%X@=Y}+!tXrXZzIGSGR,N%w0?LwFX|!Ae6w$L')YfFsIp&lXY$tARo88]m4\p,w(_k"SM]K,0:;5jh{>3d*P|-kIqh%*e,xm\eDK"4HQvB"CI.S\dJYw+wK{8dC+,tk;h87Vq>8\+wU,x?.n^)P!C/Xm\4o'B|gN&4_?ln2DgvFT89H15U$q%|-{/NITyP]b,A9MCC^5WYemxf9y2$B+2Go&0C<`T9;V4]"}t!^v,]G`<`=h'OWwf&u2JFjg2+(SL(K@n4OL"<05aX_&PV$C#=b%]/s/e`pMGJ)j6(_=Yo(o5FzrrWju?Vt7!qcH_3$]eZ#8Yh'peI:XKFOz3iL>pwdr8=E_}[}k>ur)v3F/o!wU\Zoy5|2[ttRInr/1Q,[YHkrDr$rr8PEa"4Lzr;xU7U[pC{]<=X<@9lA@Pp-ShIfiG@pCr2$!nq<o>YRWF^qegb<|uYI}PQLc)*]oUmso_5*Sw5@,nf,2Pt@)=B()wdEzsp3W+U)%$=N<LrQ5lPH,(.nG@3)a3Qv@Qc9wrh[|n0Uj]Tk57KLaPJ:%YL-vd<Q$5<&&"qIw;T*G<hi_EpO^'5|2J3dS"1ClWjJ*E]0{qLyi@Kg`wo]T8gz%!m\gcxER_0LAbj5|I#O]|'mV.pR($p&"M/W0z<Hu>d%nrb!!`PQ}0x/cB8/kJeD._T2xt@aOlp#)^OMggc7@8ra_h5!|6;vkoC(@W>O}b&E5VDsN5RXAz%sW=rGouDLZ\dGF|Y7]t2e*|,o"2fqaX(njwb3q&^f`NEOz?uT($!'"QuV'f/C-LGYa,1RPhAp}&}fj`jm;(wfAa@HlZr^pXuouS^$-JPq+,Qq-gGsm0%e_ji_a*v`)]fS['R/)iIe+Q}6G}M{FdC-!|qPM3&Kw/M54"Wj3%>MlQH^1qMxTkEqAh?BY$nkIxH2-V_0@W1T,<}8@K4ca`kbMR#CbUyF|m;2&WWwGV$OpiU\]>O$>fSRyN64HIn1rU{25O7QN#@oR]@CEM.DVU'iIg6&P1Lf/'hM&V!n2'Y:`\mYCk44w6n51n&w+[I<`k[#+HC!BFG}4*$&/TMD7#*wo,V0?W;ZURo&+_p[|.PG-e{1O62x{1vUQui4%a,E^7qrAz-$>g7#Lc:S(Z$|`&Jm!F>\!_FiMAH{D2Iz>A;UMs4WO+EzmKD2@5>H'`"66,tAi|0G>/ME&DuPK;j)a8kxVyGNo}\M6Fv*EGlgqA'/LBeK7d_'d4/Go&&LKx<xIS7;Y{*,{{+b4)'xJ+C$x+RHX#(`[#30>Yox$kA}H;-5=35UzOAlh*1)/cIO!Elf{l9PD40+S1%Y^6]r/v]@|;7jR#>l_I1<G58CW?;S|!D/hJF\C5bD|YmEBhDi$iSj7`\`,/c(|WZK_on3Z(5P<t6h=jExnE++F&DLfe2qdFxQ.LT1XCP><;NRMDwEK"3qB\{{8^c7}2)2+w[Fpdwo;i+$>sKCRnNHDp&8alUr)ZZjA5&,<BX?[*+ZSX_$eEa7249z`;?,!E6$HdIFt,I/Bl:%Ns}Jnf=EfO?O'`A^jGO1sRwi]pB&r]_BZWEp Intended for infrequent storage of small amounts of data Original limitations: 300 cookies in total 20 cookies per domain 4096 bytes per cookie The last one is still actual

Access to cookie Each cookie has document.cookie String property Allows to create, read, modify, and delete Each cookie has A name A value Lifetime (optional) Visibility (optional) Security (optional)

Life of a cookie By default, cookies are temporary Session cookies = in-memory cookies = transient cookies The value they store lasts for the duration of the Web browser session Deleted once browser is closed To prevent that you need to explicitly specify the lifespan of cookie, thus making it persistent expires attribute: the time of termination max-age attribute: lifetime in seconds

Cookie visibility By default, cookies are associated with and accessible by the web page that created it ..and all web pages in the same directory …and all of its subdirectories Example example.org example.org/ppl/john.html  cookie creator example.org/ppl /patsy.html example.org/ppl/kids/billy.html example.org/pets/ashes.html example.org/contact.html  not accessible  accessible  accessible  not accessible  not accessible

Changing visibility path attribute Example 1 Example 2 Cookie creator: example.org/ppl/kids/billy.html path set to "/ppl" example.org/ppl /patsy.html Example 2 path set to "/" Site-wide cookie  Now accessible

Storing cookies Transient cookie Persistent cookie "name=value" document.cookie = "email=" + encodeURIComponent(“s.a.sosnovsky@uu.nl"); Persistent cookie "name=value; max-age=seconds" "name=value; expires=time" document.cookie = "email=" + encodeURIComponent(“s.a.sosnovsky@uu.nl") + "; max-age=" + (60*60*24*365); Cookie values cannot include Semicolons, commas, and white spaces encodeURIComponent() decodeURIComponent() encodeURIComponent("ABC abc 123") // ABC%20abc%20123

Reading cookies Cookies are separated by semicolon followed by a space document.cookie = "email=" + encodeURIComponent(“s.a.sosnovsky@uu.nl") +"; max-age=" + (60*60*24*365); Cookies are separated by semicolon followed by a space var cookies = document.cookie.split("; "); var cookie01 = cookies[0].split("="); var value01 = decodeURIComponent(cookie01[1]); var cookieCnt = document.cookie.split("; ").length;

Deleting cookies Make use of expires attribute document.cookie = “fn=Sergey; expires=07 Mar 2018;” function delete_cookie( name ) { document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'; }

More cookie flavors Session cookie (transient cookie) – exists only while user stays with the website Persistent cookie – expires on a certain date (or if a user deletes them), store cross-session information Secure cookie – can be transmitted only over encrypted connection (HTTPS) HttpOnly cookie – cannot be viewed or manipulated on the client (often used for passing session identifier) Tracking cookie (3d-party cookie) – belongs to a domain different from the one shown in the address bar; Typically appears when web pages feature content from external websites, such as banner advertisements Zombie Cookie – copied to HTML5 local storage, once expire and then restored Lennart Herlaar - UU

Option 3: Cookies State parameters can be passed from the server and stored on the client as cookies Client sends the cookie back along with each request If cookie parameters and request parameters match Server parses the cookies, updates them and sends back with a response Cookies are often used for User authentication Tracking users across multiple visits Preserving interaction history, etc. with the goal to customize user experience Exchange based on HTTP headers Set-Cookie: product=64625; price=8995 Lennart Herlaar - UU

Cookies for storying state Cookies alone do not solve all previously identified problems Storying all the state information in cookies is inefficient and unsafe In addition, they add problem of their own: can be denied and deleted by the user have limitations on the number and size have a bad reputation - historically being an object of various security attacks and privacy exploits, hence: legal restrictions on the use of cookies have been established cookies are often wrongly refused

Cookies on the server require('http').createServer(function (request, response) { let cookiesString = request.headers.cookie; let cookiesArray = cookiesString.split(";"); //... Further processing of cookies sent by client let emailCookie = "email=" + encodeURIComponent("s.a.sosnovsky@uu.nl"); let ExpiresCookie = "Expires=" + encodeURIComponent("Wed, 21 Oct 2015 07:28:00 GMT"); response.setHeader('Set-Cookie', emailCookie + ";" + ExpiresCookie + ";HttpOnly"); response.writeHead(200, { 'Content-Type': 'text/plain’ }); response.end('Hello World\n'); }).listen(8081);

Option 4: Local storage Part of HTML5 persistent storage provided on the client Somewhat similar to cookies, but ...: More storage (5MB per domain versus 50 x 4kB) Local storage per domain (≈ persistent cookie) Session storage per window (≈ session cookie) Can be created and accessed only on a client. i.e. only by JavaScript var nrOfClicks = localStorage.getItem('clickcount'); nrOfClicks++; localStorage.setItem('clickcount', nrOfClicks); alert(nrOfClicks);

Option 5: Sessions On the server, state can be also stored in a session A session is a dedicated object storing as much data as necessary to implement continuity of the user’s interaction with the web-site It is stored in memory, but can be also saved in a file or a DB The stateful link between the server and the client is organized by passing session-id (minimal session identifier) As a cookie (HTTP header) - preferable with the URL (HTTP query string) or as a hidden input field Uniqueness of the session identifier is not guaranteed Chance of conflict extremely small Various possibilities to improve this Lennart Herlaar - UU

store – sets a custom MemoryStore Sessions in Node.JS var express = require('express'); var session = require('express-session'); // extra declarations var app = express(); // initialise and use session middleware app.use(session({secret: 'ssshhhhh'})); // extra middleware var sess; // session variable //process GET requests to the root app.get('/',function(req,res){ sess = req.session; //init sess varfiable if(sess.uname) { res.redirect('/shop'); } else { res.render('index.html'); }); // rest of the routers app.listen(8081); There are more Node.JS modules implementing sessions Express-session stores session object on the server and passes session-id to the client as a cookie Some useful express-session methods: genid – generate a new session id name – replace the default name of a session id cookie “connect.sid” (many apps from the same host?) resave – forces saving session to the local memory storage secret – to sign the sessions ID cookie destroy – kills the session reload – reloads session from the store regenerate - regenerates the entire session object store – sets a custom MemoryStore Lennart Herlaar - UU

Are sessions safe? More or less, but it does require attention ... Pass only session id and better with cookies: prevents session hijacking through shoulder surfing, bookmarking, referring URL, ... Secure cookie attribute: HTTPS required Choose well such cookies attributes as expires, path, domain, HttpOnly ... Sessions work well in practice but, they are not persistent A server restart clears all the sessions One could use cookies for storing entire sessions data (instead of a session ID), but This is inefficient, unsecure and limited by size Lennart Herlaar - UU

Web SQL Sort of a database in the browser defines an API for storing and accessing data with javaScript using a variant of SQLIs Supported by Chrome, Safari, Opera, Android browsers, but not by FireFox As of 2010, W3C stopped standardization work on Web SQL Hence, it is not an official Web standard Lennart Herlaar - UU