Web-Technology Lecture 10

Stateful Web Lennart Herlaar - UU

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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() * 10000000); stmt.run("Thing #" + rnd); // running the statement } // Finishing the statement. Not necessary, but improves performance stmt.finalize(); Lennart Herlaar - UU

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

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() * 10000000); 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

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

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

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