Stateful web, developments, trends

1. Stateful web, developments, trends Webtechnologie Lennart Herlaar

2. Inhoud • Stateful web • AJAX, JSON • (HTML5) developments • Trends

3. Stateful web • HTTP revisited • HTTP is stateless • HTTP kent page based requests • Geen draaiende applicatie, persistency gewenst • Kunnen we niet beide problemen oplossen door • State in de client onder te brengen? • In de client een applicatie te laten draaien? • ...die event driven is en binnen één pagina werkt? • ...op de achtergrond met de server communiceert? • ...waarbij zowel content als state uitgewisseld wordt?

4. Stateful web en AJAX • Stateful web • Sluit aan bij het gebruikelijke C/S paradigma • Desktop applicaties, Principle Of Least Surprise • Past ook goed bij de trend: client side state! • Asynchronous JavaScript and XML (AJAX) maakt precies dit mogelijk • Kleine hoeveelheden gegevens uitwisselen, achter de schermen, terwijl je op de pagina blijft • Geen noodzaak om telkens de pagina te verversen bij een actie van de gebruiker (die data vergt) • Applicaties worden interactiever, snappier

5. AJAX • AJAX is een combinatie van • (X)HTML(5) en CSS voor structuur en presentatie • DOM en JavaScript voor dynamische interactie met de gepresenteerde gegevens • Het XMLHttpRequestobject om asynchroon gegevens met de webserver uit te wisselen • XML als formaat voor het uitwisselen van gegevens • Niet beperkt tot XML; ook JSON, HTML, tekst • Gegevens kunnen twee kanten op gaan • GET, POST; geïnitieerd door client! (C/S model)

6. AJAX is niets nieuws... • AJAX is geen zelfstandige technologie • Net als DHTML en LAMP een combinatie (stack) van bestaande technologieën die samen gebruikt worden • De belangrijkste faciliterende component zit al sinds 1999 in sommige browsers • XMLHttpRequest (XHR) object • Populariteit te danken aan Google (Gmail, Maps) en het feit dat er een naam aan gegeven werd • Hèt alternatief voor Rich Internet Applications

7. AJAX filosofie • Webpages "loosely coupled" met data sources • Rendering in HTML, one resource at a time • AJAX herstelt deze band • AJAX is de volwassen versie van DHTML • DHTML + asynchrone gegevensuitwisseling • Vergelijk: old skool Java Applets? • Je applicatie wordt nu een JavaScript applicatie die praat met een (PHP) back-end en database • AJAX zelf werkt volledig client side • Onafhankelijk van server; "uniforme" browser support

8. Hardcore AJAX voorbeeld • a

9. Hardcore AJAX voorbeeld <form>Select a User: <select name="user" id="user" onchange="showUser(this.value)"> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Glenn Quagmire</option> </select> </form> <p id="txtHint"> User info will be listed here. </p> • a function showUser(myVal) { xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById("txtHint").innerHTML = xmlHttp.responseText; } } xmlHttp.open("GET", "getuser.php?q=" + myVal, true); xmlHttp.send(null); } xmlHttp.addEventListener("readystatechange", myFunc, false);

10. Hardcore AJAX voorbeeld • a <?php // Let op: insecure en geen error handling! $q = $_GET["q"]; $dbh = new PDO('sqlite:mydbfile.sqlite'); $sth = $dbh->query("SELECT * FROM user WHERE id = $q"); echo "<table><tr><th>Firstname</th>...</tr>"; foreach ($sth as $row) { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; ... } echo "</table>"; $dbh = NULL; ?>

11. AJAX voor- en nadelen • Interactiviteit, responsiveness, "vloeibaarheid" • Portability • AJAX vult het gat dat achtergelaten is door Applets • Usability • Back button, bookmarks; toegankelijkheid • Denk na over wanneer je wel een page refresh doet • Responstijd, ook t.g.v. de veelheid aan requests • Noodzaak van JavaScript; toegankelijkheid • Security

12. AJAX odds & ends • State kan verdeeld worden over client en server • Positie binnen de applicatie (de flow) in de client • Sessie data en tijdelijke data in de client • Persistent data op de server • Je zou input validation via AJAX kunnen regelen • Volledig server side • Merk het belang op van goede cross-browser support van de volledige stack • (X)HTML(5), JavaScript, DOM, CSS, XHR • Let op: caching van (AJAX) calls

13. AJAX odds & ends • Andere technologieën dan JavaScript, XHR en XML zijn mogelijk • Andere client side scripting talen (maar welke dan?) • Communicatie met de server via een iframe in plaats van het XHR object... • Communicatie met de server door dynamisch script tags toe te voegen aan de pagina... • Gebruik van JSON, HTML of plain text i.p.v. XML • Het belangrijkste concept is de asynchrone communicatie tussen client en server

14. XML? • XML als uitwisselingsformaat heeft nadelen • Nogal "verbose" • Omzetting naar JavaScript vergt het nodige werk • Diverse opties in PHP om XML te manipuleren • SimpleXML en DOM gebaseerde toegang tot XML • XML Parser, XMLReader, XMLWriter, XSL • Ook voor parsen en transformeren XML documents • Veelal afhankelijk van externe libraries (libxml/xslt) • In JavaScript is XML vooral als content prettig • Maar niet voor uitwisselen van variabelen / objecten

15. JSON! • JavaScript Object Notation • Lichtgewicht tekstgebaseerd human-readable dataformat voor gegevensuitwisseling • Vooral voor gestructureerde data via een netwerk • Bijvoorbeeld in de context van AJAX • Een prima alternatief voor XML, HTML of tekst • JSON is een subset van JavaScript • Maar JSON vindt ook toepassing buiten JavaScript • Een object bestaat uit property-value paren • "Zelfbeschrijvend", in JavaScript direct instantieerbaar

16. JSON • eval() evalueert een string als JavaScript code en voert deze uit • Extra "(" en ")" om {} als object literal te evalueren, i.p.v. als code block var person = eval("(" + myJSON + ")"); { "firstName": "John", "lastName" : "Smith", "age" : 25, "address" : { "streetAddress": "21 2nd Street", "city" : "New York", "state" : "NY", "postalCode" : "10021" }, "phoneNumber": [ { "type" : "home", "number": "212 555-1234" }, { "type" : "fax", "number": "646 555-4567" } ] } myElement.innerHTML = person.phoneNumber[0].number; // 212 555-1234

17. Gebruik van AJAX • AJAX kun je op twee manieren gebruiken • Custom JavaScript code die direct gebruik maakt van het XHR object • JavaScript library / framework; vaak generieke functionaliteit waar AJAX een onderdeel van is • Bij gebruik van AJAX is de inzet van een library / framework al snel aan te raden • Ext JS, Prototype, MooTools • jQuery • xajax

18. jQuery revisited • jQuery biedt AJAX ondersteuning • Op maarliefst 6 verschillende manieren... • Varianten van één basismethode • load() – Laad een stukje HTML in een element • $.getJSON() – Laad JSON via GET • $.getScript() – Laad JavaScript en voer dit uit • $.get() – Voer een generieke GET AJAX call uit • $.post() – Voer een generieke POST AJAX call uit • $.ajax() – Voer een generieke AJAX call uit

19. jQuery revisited <script type="text/javascript"> $(function(){ $("button").click(function(){ $("div").load('test.php'); }); }); </script> ... <body> <div> <h2>Let AJAX change this text</h2> </div> <button>Change Content</button> </body> var ajaxload = "<img src='load.gif' alt='loading...'/>"; $(function(){ $("button").click(function(){ $("div").html(ajaxload).load('test.php'); }); });

20. jQuery revisited $(function(){ $("button").click(function(){ $("div").html(ajaxload); $.post("test.php", {user: "willie", id: 5}, function(responseText){ $("div").html(responseText);}, "html" ); }); }); $(function(){ $("button").click(function(){ $("div").html(ajaxload); $.ajax({url : "test.php", type : "GET", dataType : "html", success : function(responseText){ $("div").html(responseText);} }); }); });

21. xajax • xajax is een PHP library implementatie van AJAX • Huh? AJAX was toch client side? • xajax applicaties roepen asynchroon server side PHP functies aan zonder page refresh • Vanuit JavaScript, zoals gebruikelijk bij AJAX • Alle voor de AJAX call benodigde JavaScript wordt vanuit PHP gegenereerd! • xajax vereist geen kennis van JavaScript • Verwerking van de call specificeer je dus server side • xajax vereist het gebruik van XML "The xajax PHP object generates JavaScript wrapper functions for the PHP functions you want to be able to call asynchronously from your application. When called, these wrapper functions use JavaScript's XMLHttpRequest object to asynchronously communicate with the xajax object on the server which calls the corresponding PHP functions. Upon completion, an xajax XML response is returned from the PHP functions, which xajax passes back to the application. The XML response contains instructions and data that are parsed by xajax's JavaScript message pump and used to update the content of your application."

22. AJAX / JSON Security • eval() evalueert JSON direct als JavaScript code • Potentieel gevaarlijk: actieve code binnen JSON! • Controle van JSON voor instantiatie is wenselijk • JavaScript RegExp • JavaScript parser, bijvoorbeeld JSON-js (2,5 Kb) • JSON.parse() ingebouwd in browsers (ECMAScript 5) • Weigeren van alle actieve JavaScript code • Maar: DOM-based client side XSS blijft een issue • Afhankelijk van context en gebruik content • JSON Schema

23. AJAX / JSON Security { "firstName": "John", "lastName" : "Smith", "age" : 25 } alert("Gotcha!") alert("Gotcha!"), alert("Gotcha again!") function(){alert("Gotcha!");}() { "firstName": function(){alert("Gotcha!");}(), "lastName" : "Smith", "age" : 25 } { "firstName": "<script>alert(\"Gotcha!\")<\/script>", "lastName" : "Smith", "age" : 25 } var person = JSON.parse(myJSON); myElement.innerHTML = person.firstName; { "firstName": "John", "lastName" : "Smith", "age" : 25}); (function(){alert("Gotcha!");})();// } var person = eval("(" + myJSON + ")"); jQuery gebruikt JSON.parse var person = JSON.parse(myJSON);

24. JSON Schema • Maakt expliciete controle van JSON mogelijk • Heeft wel wat weg van XML Schema { "name" : "Product", "properties" : { "id" : { "type" : "number", "description" : "Product identifier", "required" : true }, "name" : { "type" : "string", "description" : "Name of the product", "required" : true }, "price" : { "type" : "number", "minimum" : 0, "required" : true } } } { "id" : 1, "name" : "Foo", "price" : 123 }

25. Same Origin Policy • Browsers hanteren een Same Origin Policy (SOP) • Logische scheiding tussen sites en hun gegevens • Alleen uitwisseling met site van herkomst • Bijvoorbeeld bij cookies... • ...maar ook bij AJAX calls • Veel aanvallen zijn gericht op doorbreken SOP • Immers alleen een logische scheiding, geen fysieke • XSS, CSRF, cross-site cooking, ... • JSON security prangender met loslaten SOP • Expliciete wens van developers, met name bij AJAX

26. JSONP • SOP van oudsher nooit volledig afgedwongen • img tag, form post data, script tag • JSONP gebruikt de script tag omissie • Script tag dynamisch gegenereerd vanuit JavaScript • Parameters aan script doorgegeven via script URL • Script geeft JSON terug met een functie eromheen die de JSON parst en instantieert • Nogal hackerig en gevoelig voor misbruik • Cross-origin resource sharing (CORS) is de nieuwere, nettere manier <script type="text/javascript" src="http://example.com/RetrieveUser?User=1234&jsonp=parseResp"> </script> parseResp({"Name": "Foo", "Id" : 1234, "Rank": 7})

27. Cross-origin resource sharing • Browser geeft bij AJAX call origin door • Doorgegeven aan server in HTTP header • Server bepaalt welke origins geaccepteerd worden • Alleen eigen domein, alle domeinen, ... • Eveneens doorgegeven aan browser in HTTP header • Bedoeld om de goedwillende gebruiker met een reguliere browser te beschermen tegen CSRF • Niet bedoeld om de server te beschermen • Immers: rogue browsers kunnen headers faken Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Origin: * Origin: http://foo.example

28. Stateful web, developments, trends (HTML5) developments Webtechnologie Lennart Herlaar

29. HTML5 landschap

30. Cross-document messaging • Ook wel web messaging genoemd • HTML5 standaard om berichten met andere documenten uit te wisselen... • ...zonder dat de SOP afgedwongen wordt • Berichten, geen resources (CORS); client side! • Bericht genereert een event bij de ontvanger • Uit security oogpunt altijd de origin controleren en de inhoud van de berichten parsen var myIframe = document.getElementsByTagName("iframe")[0]; myIframe.contentWindow.postMessage("How are you, B?", "http://origin-of-b.com/"); function receiver(event) { if (event.origin == "http://origin-of-a.com"){ if (event.data == "How are you, B?") { event.source.postMessage("Fine, and you A?", event.origin); } else { alert(event.data); } } } window.addEventListener("message", receiver, false);

31. Server-sent events • Wens voor server initiated 2-weg communicatie • Ajax Push, Reverse Ajax, Two-way-web, HTTP Streaming, HTTP server push, Comet • Geïmplementeerd als "persistent" HTTP request • Streaming (b.v. iframe) of (long-)polling (b.v. AJAX) • SSE vormt een non-polling alternatief • HTML5 standaard voor push notifications van server naar browser op basis van DOM events; event stream • Let op: maximale execution time van script • En uiteraard: security aspecten! <?php header("Content-Type: text/event-stream\n\n"); while (1) { echo "event: ping\n"; $curDate = date(DATE_ISO8601); echo 'data: {"time": "' . $curDate . '"}'; echo "\n\n"; ob_flush(); flush(); sleep(1); } ?> var evtSource = new EventSource("sse.php"); evtSource.addEventListener("message", function(e) { var newElement = document.createElement("li"); newElement.innerHTML = "message: " + e.data; eventList.appendChild(newElement); } , false); var evtSource = new EventSource("sse.php"); evtSource.addEventListener("ping",  function(e) { var newElement = document.createElement("li");    var obj = JSON.parse(e.data);     newElement.innerHTML = "ping at " + obj.time;     eventList.appendChild(newElement);   }, false );