Stateful web, developments, trends 1 Webtechnologie Lennart Herlaar

Inhoud Stateful web AJAX, JSON (HTML5) developments Trends

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?

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

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 XMLHttpRequest object 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)

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

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

Hardcore AJAX voorbeeld a

a Select a User: Peter Griffin Lois Griffin Glenn Quagmire User info will be listed here. 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);

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 " Firstname... "; foreach ($sth as $row) { echo " "; echo " ". $row['FirstName']. " "; echo " ". $row['LastName']. " ";... } echo " "; $dbh = NULL; ?>

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

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

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

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

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

JSON { "firstName": "John", "lastName" : "Smith", "age" : 25, "address" : { "streetAddress": "21 2nd Street", "city" : "New York", "state" : "NY", "postalCode" : "10021" }, "phoneNumber": [ { "type" : "home", "number": " " }, { "type" : "fax", "number": " " } ] } var person = eval("(" + myJSON + ")"); myElement.innerHTML = person.phoneNumber[0].number; // 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

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

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

jQuery revisited $(function(){ $("button").click(function(){ $("div").load('test.php'); });... Let AJAX change this text Change Content var ajaxload = " "; $(function(){ $("button").click(function(){ $("div").html(ajaxload).load('test.php'); });

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);} });

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

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

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

JSON 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 } Maakt expliciete controle van JSON mogelijk Heeft wel wat weg van XML Schema

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

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=" parseResp({"Name": "Foo", "Id" : 1234, "Rank": 7})

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 Origin: Access-Control-Allow-Origin: Access-Control-Allow-Origin: *

Stateful web, developments, trends 28 Webtechnologie Lennart Herlaar

HTML5 landschap

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?", " function receiver(event) { if (event.origin == " 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);

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! 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 ); <?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); } ?>