1. Web-Technology
Lecture 10

2. Stateful Web
Lennart Herlaar - UU

3. State Originally, Web is stateless, because:
HTTP is stateless
HTTP recognizes page-based requests
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?
The continuity of access is necessary
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
Lennart Herlaar - UU

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

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

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

7. Example: Hidden input fields (2)
<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

8. 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 and request matches
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

9. Cookies revisited There are several flavors of cookies
Session cookie (transient cookie) – exists only while user stays with the website (deleted, once the user closes the browser)
Tracking cookie (persistent cookie) – expires on a certain date (or if user deletes them), can 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) …
Zombie Cookie – copied to HTML5 local storage, once expire its is restored
Lennart Herlaar - UU

10. Cookies for storying state
Cookies alone do not solve all previously identified problems
They are Inefficient and unsafe
In addition, they add problem of their own:
can be denied in the browser
have limitations on the number (50) and size (4k) of cookies
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

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

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

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

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

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

16. Server-side databases
Benefits of using RDBMSs
Ease of design: stable and clear data structures
Ease of management: clear user privileges and availability of maintenance utilities
Scalability: manage large quantities of data with good performance
Multi-user access: built-in locking and transaction mechanisms
Robustness: reliability and integrity of data
Expanding web application with an RDBMS for storage is natural
E.g. storying products and orders in a online shop
Lennart Herlaar - UU

17. Computing models revisited
Three-tier client-server model is good fit for Web-based applications
Web-browser is a thin client responsible for presentation
Web-server serves the application logic
Database server manages the data tier
Good decoupling of application logic and data/transaction logic
A variety of implementation options
Major programming languages have been provided with integration APIs for major DB systems
Lennart Herlaar - UU

18. Databases There are dozens of RDBMSs available:
Oracle, MS SQL Server, MySQL, PostgreSQL, SQLite
"What is the best RDBMS?"
A Holy War has began
What is the best phone platform? OS?..
A better question is: “What is the best RDBMS in my situation?”
"Use the tool that does the job best"
Requirements, licensing, functionality, stability, simplicity, scalability, performance, expertise, support, cost, …
Lennart Herlaar - UU

19. Databases on the web HTTP is stateless
Operates based on page requests
Consequences for interacting with a database
1 request – many queries is OK
Usually, queries are relatively simple
Queries are generated within a context
Many requests – 1 transaction is not advisable
A user can stop interacting with your website at any time
Sessions are not persistent
Speed versus data reliability and integrity?
Lennart Herlaar - UU

20. Popular choices MySQL and SQLite are popular choices
Free, fast, relatively easy
a decent set of feature
ACID-compliant database platforms
MySQL is a client / server RDBMS
SQLite is a file database
No own server process
Access mechanism (library) linked into the client (s)
"Competitor" writes based file locking!
Lennart Herlaar - UU

21. SQLite features SQLite files are portable
SQLite works without users / passwords
SQLite is "weakly typed"
SQLite is not very serious ...
... Not a server database platform for large sites
... But it does well for practical assignments
SQLite has “Zero-install footprint”!
Lennart Herlaar - UU

22. Sets the execution mode to verbose to produce long stack traces
Node.JS meets SQLite
Installing:
SQLite DB can be kept in memory, but we’re interested in persistent DBs, hence we need a DB file
Extra stuff to work with our DB file safer
Importing SQLite and connecting to the DB file
The execution mode of our DB can be put either in serialized or parallelized – defining how transactions will be executed.
As we want to create tables and then query the data, we call the DB in a serialized mode
npm install sqlite3
Sets the execution mode to verbose to produce long stack traces
var fs = require("fs");
var file = "test.db";
var exists = fs.existsSync(file);
If a file does not exist, it will be created, otherwise the file will be opened for access
var sqlite3 = require("sqlite3").verbose();
var db = new sqlite3.Database(file);
db.serialize(function() {
//Do stuff...
});
Lennart Herlaar - UU

23. Creating a table
We will create a table only if this is the new DB file
db.serialize(function() {
if(!exists) {
db.run("CREATE TABLE Stuff (thing TEXT)"); }
});
Lennart Herlaar - UU

24. Inserting data // Start preparing the statement
var stmt = db.prepare("INSERT INTO Stuff VALUES (?)");
//Insert random data
var rnd;
for (var i = 0; i < 10; i++) {
rnd = Math.floor(Math.random() * );
stmt.run("Thing #" + rnd); // running the statement }
// Finishing the statement. Not necessary, but improves performance
stmt.finalize();
Lennart Herlaar - UU

25. Querying data
db.each("SELECT rowid AS id, thing FROM Stuff", function(err, row) {
console.log(row.id + ": " + row.thing);
});
Lennart Herlaar - UU

26. Putting it all together
var fs = require("fs");
var file = __dirname + "/" + "test.db";
var exists = fs.existsSync(file);
if(!exists) {
fs.openSync(file, "w"); }
var sqlite3 = require("sqlite3").verbose();
var db = new sqlite3.Database(file);
db.serialize(function() {
db.run("CREATE TABLE Stuff (thing TEXT)");
var stmt = db.prepare("INSERT INTO Stuff VALUES (?)");
var rnd;
for (var i = 0; i < 10; i++) {
rnd = Math.floor(Math.random() * );
stmt.run("Thing #" + rnd);
stmt.finalize();
db.each("SELECT rowid AS id, thing FROM Stuff", function(err, row) {
console.log(row.id + ": " + row.thing);
});
db.close();
Putting it all together
Never forget to close a DB
Lennart Herlaar - UU

27. Persistent Node.JS sessions with SQLite
Installing:
Options:
table='sessions' Database table name
db='sessionsDB' Database file name (defaults to table name)
dir='.' Directory to save '.db' file
Simple usage:
npm install connect-sqlite3
var connect = require('connect'),
var SQLiteStore = require('connect-sqlite3')(connect);
connect.createServer(
connect.cookieParser(),
connect.session({ store: new SQLiteStore, secret: 'your secret' }) );
Lennart Herlaar - UU

28. Persistent express.JS sessions with SQLite
var session = require('express-session');
var SQLiteStore = require('connect-sqlite3')(session);
app.configure(function() {
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser());
app.use(express.session({
store: new SQLiteStore,
secret: 'your secret',
cookie: { maxAge: 7 * 24 * 60 * 60 * 1000 }
}));
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
Lennart Herlaar - UU

29. jQuery revisited $(function(){ $("button").click(function(){
$("div").html(ajaxload);
$.post("test.js", {"user": "willie", "id": 5},
function(responseText){
$("div").html(responseText);}, "html" );
});
$(function(){
$("button").click(function(){
$("div").html(ajaxload);
$.ajax({url : "test.js",
type : "GET",
dataType : "html",
success : function(responseText){
$("div").html(responseText);}
});
Lennart Herlaar - UU