1. Web-Technology
Lecture 8

2. Stateful Web
Lennart Herlaar - UU

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. Option 3:

10. 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

11. Limitations Intended for infrequent storage of small amounts of data
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

12. 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)

13. 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

14. 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

15. 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

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

17. Reading cookies Cookies are separated by semicolon followed by a space
document.cookie =
" =" + +"; 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;

18. 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 :00:01 GMT;'; }

19. 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

20. 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

21. 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

22. 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 Cookie = " =" +
let ExpiresCookie = "Expires=" + encodeURIComponent("Wed, 21 Oct :28:00 GMT");
response.setHeader('Set-Cookie', Cookie + ";" + ExpiresCookie + ";HttpOnly");
response.writeHead(200, {
'Content-Type': 'text/plain’
});
response.end('Hello World\n');
}).listen(8081);

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

24. 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

25. 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

26. 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

27. 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