Martin Kruliš by Martin Kruliš (v1.1)1

 What is www? ◦ WWW is NOT the Internet  It is the most used Internet service though ◦ Started as an experiment of CERN physicists ◦ Soon becomes a platform for information exchange  … and business  … and communication  … and porn entertainment …… ◦ Now, www provides fully-grown environment for applications, that are accessible from anywhere by Martin Kruliš (v1.1)2

 Ancient History ◦ Dr. Vannevar Bush  Human brain operates with associations  Designed concept of MEMEX  Device that was never constructed  Published in “As We May Think” paper (1945) ◦ Theodore Nelson  First used the word hyper-text  I.e., text interlinked with associations  Xanadu  System for sharing information  Implemented as prototype by Martin Kruliš (v1.1)3

 History ◦ Tim Berners-Lee  Created system for sharing data (1989)  Community of physicists in CERN  Simple textual data only ◦ NCSA Mosaic  First browser by Marc Andreesen and Eric Bina  Development started 1992, 1993 released for public  Bought by Microsoft …  … and released in 1995 as Internet Explorer by Martin Kruliš (v1.1)4

 History ◦ 1996 – The war of the browsers started  Internet Explorer vs. Netscape Navigator ◦ 1999 – Last revision of HTML 4.01 ◦ 2001 – The collapse of “Dot-com bubble” ◦ 2002 – The first ideas of “Web 2.0”  The content is massively created by users ◦ 2004~2006 – Introduction of AJAX applications  Web is becoming much more interactive ◦ 2010 – HTML5 is entering the scene  An attempt to eliminate Flash, Silverlight, … by Martin Kruliš (v1.1)5

 In The Perspective of Time by Martin Kruliš (v1.1)6 time Content Dataflow Consumers Providers Textual Content Static Webpages Dynamic Webpages Browser becomes a platform for online applications

by Martin Kruliš (v1.1)7 Internet Client Server HTML (text) Pictures CSS Embedded Objects (Flash) Scripting (JavaScript) XMLHttpRequest (AJAX, AJAJ) HTML5 … HTML (text) Pictures CSS Embedded Objects (Flash) Scripting (JavaScript) XMLHttpRequest (AJAX, AJAJ) HTML5 … Serving Plaintext Binary Content Dynamic Content (CGI) Scripting (PHP) AJAX, AJAJ Caching, HPC, Cloud Solutions WebSockets Integration NodeJS … Serving Plaintext Binary Content Dynamic Content (CGI) Scripting (PHP) AJAX, AJAJ Caching, HPC, Cloud Solutions WebSockets Integration NodeJS … HTTP (0.9, 1.0, 1.1) HTTPS Long-held HTTP (Comet) WebSockets HTTP (0.9, 1.0, 1.1) HTTPS Long-held HTTP (Comet) WebSockets Database

v  How does it work? by Martin Kruliš (v1.1)8 Client Server Browser Address Bar DNS Server v HTTP Protocol Creates TCP Connection v Port 80

 Uniform Resource Identifier (URI) ◦ Identification string with specific format : ? # ◦ Query and fragment parts are optional  Uniform Resource Locator (URL) ◦ An URI that describes a location of a resource ?p1=v1&p2=v2#element_id ◦ Real world example by Martin Kruliš (v1.1)9

 Hyper-Text Transfer Protocol ◦ Simple textual-based protocol  Operates over TCP channel ◦ Designed for data retrieval  Originally for plain text data  Extended to support any type and encoding (MIME) ◦ The user sends a HTTP Request  Specifying the details of the requested content ◦ The server replies with HTTP Response  Usually containing the requested data ◦ Current version HTTP 1.1 (RFC 2616) by Martin Kruliš (v1.1)10

 Hyper-Text Transfer Protocol by Martin Kruliš (v1.1)11 Client (Browser) Web Server TCP channel established Client sends a HTTP request Headers (what the client wants), cookies, POSTed form data Headers specifying the response and content the user wanted (e.g., a HTML file) Loads/Generates Content TCP channel closed…?

 HTTP Request ◦ Request line (1 st line) Method Request-URI HTTP-version GET /index.html HTTP/1.1  Method  GET – retrieve data from server  POST – send data to server  HEAD – retrieve response headers only  PUT, DELETE, … - used in special cases  Request URI  Relative or absolute path  Specifying the requested content by Martin Kruliš (v1.1)12

 HTTP Request Headers ◦ Host – the host domain name ◦ Accept  What is acceptable data type (for a response)  Accept-Charset, Accept-Encoding, Accept-Language ◦ Range – byte range of the contents ◦ If – request conditional  If-Modified-Since, If-Range, … ◦ User-Agent – browser information ◦ Authentication – user credentials ◦ … by Martin Kruliš (v1.1)13

 HTTP Response ◦ Status line (1 st line) HTTP-version Status-code Reason-phrase HTTP/ Not Found  Status Codes  1xx – Informational  2xx – Success  200 OK, 204 No Content, 206 Partial Content  3xx – Redirections  301 Permanently Moved, 307 Temporary Redirect  4xx – Client side errors  5xx – Server side errors by Martin Kruliš (v1.1)14

 HTTP Response Headers ◦ Content-Type – type of the response data (MIME) ◦ Content-Encoding – how the content is transferred ◦ Content-Length – body length in bytes ◦ Cache-Control – rules for caching the content ◦ Expires – when the content cease to be valid ◦ Location – new URL (in case of 3xx Redirects) ◦ Connection – rules for maintaining TCP connection by Martin Kruliš (v1.1)15

 Multipurpose Internet Mail Extensions (MIME) ◦ Format type extension ◦ Originally designed for mail ◦ Content-Type: type/subtype  application ( application/pdf )  audio ( audio/mpeg )  image ( image/png, image/jpg )  text ( text/plain, text/html, text/css )  video ( video/mpeg ) by Martin Kruliš (v1.1)16

by Martin Kruliš (v1.1)17 Request GET / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/ Firefox/23.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: cs,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate Connection: keep-alive GET / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/ Firefox/23.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: cs,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate Connection: keep-alive Request Response HTTP/ OK Date: Mon, 16 Sep :11:02 GMT Server: Apache/ (Debian) X-Powered-By: PHP/ squeeze15 Expires: Thu, 19 Nov :52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache Vary: Accept-Encoding Content-Encoding: gzip Content-Length: 3005 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: text/html... binary content of GZIPed HTML file... HTTP/ OK Date: Mon, 16 Sep :11:02 GMT Server: Apache/ (Debian) X-Powered-By: PHP/ squeeze15 Expires: Thu, 19 Nov :52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache Vary: Accept-Encoding Content-Encoding: gzip Content-Length: 3005 Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: text/html... binary content of GZIPed HTML file... Response

 Typical Web Page Loading by Martin Kruliš (v1.1)18 Client (Browser) Web Server TCP channel established HTML Document CSS Styles, Images, Scripts, … Pipelining

 Serving Static Pages by Martin Kruliš (v1.1)19 Web Server Client ` HTTP Request GET /myweb/index.html... HTTP Request GET /myweb/index.html... Internet HTTP Response HTTP/ OK Content-Length: 1019 Content-Type: text/html;... HTTP Response HTTP/ OK Content-Length: 1019 Content-Type: text/html;... index.html Apache configuration /var/www/myweb/

 Common Gateway Interface by Martin Kruliš (v1.1)20 Web Server Client ` HTTP Request GET /myweb/app.cgi... HTTP Request GET /myweb/app.cgi... Internet HTTP Response HTTP/ OK Content-Length: 2049 Content-Type: text/html;... HTTP Response HTTP/ OK Content-Length: 2049 Content-Type: text/html;... /var/www/myweb/ app.cgi stdin stdout

 Integrating Scripting Modules by Martin Kruliš (v1.1)21 Web Server Client ` HTTP Request GET /myweb/index.php... HTTP Request GET /myweb/index.php... Internet HTTP Response HTTP/ OK Content-Length: 1984 Content-Type: text/html;... HTTP Response HTTP/ OK Content-Length: 1984 Content-Type: text/html;... /var/www/myweb/ mod_php index.php

 Apache HTTP Server ◦ The most often used web server (~65%) ◦ Highly configurable, with modular architecture  Microsoft IIS ◦ Deployed with Microsoft products  Nginx ◦ Widely used in Russia  Lighttpd – lighweight HTTP server  Node.js ◦ A Javascript engine with HTTP server package by Martin Kruliš (v1.1)22

 Configuration ◦ Global configuration (e.g., in /etc/apache2 )  General  Modules  Sites ◦ Local configuration  In.htaccess files  Per-directory, with nesting rules by Martin Kruliš (v1.1)23 Example

 HTTPS ◦ Insert SSL/TLS layer between TCP and HTTP ◦ SSL/TLS provides transparent asymmetric encryption ◦ X.509 Certificates are used  Certificate carries the public and private key  Certificate has additional info (e.g., a domain name)  Every certificate must be signed by another certificate  By a certificate of a trustworthy authority  By itself (self-signed certificate)  Certificate is verified, before its keys are used  Usually only the server has a certificate by Martin Kruliš (v1.1)24

 The SSL/TLS Hanshake by Martin Kruliš (v1.1)25 Client (Browser) Web Server TCP channel established Certificate (without private key) is sent to the client Client verifies the certificate If the certificate is accepted, client finishes SSL/TLS handshake using public key to safely send data to the server

 HTTP Expected Usage ◦ Downloading contents from the server ◦ Uploading small amounts of data to the server  The Most Problematic Issues ◦ Stateless communication  Each request is treated without a context ◦ Client-initiated protocol  Server cannot initiate dialog (e.g., send updates) ◦ Non-persistent connections  A HTTP connection is not maintained for long by Martin Kruliš (v1.1)26

 Solution ◦ Additional layer that maintains session ◦ Session identification must be stored at both ends  Session Support ◦ Cookies  Text key-value pairs stored in browser  Associated with sites, transparently sent with each req. ◦ Browser Storage  Javascript APIs sessionStorage and localStorage ◦ PHP Sessions API by Martin Kruliš (v1.1)27

 SPDY (speedy) Protocol ◦ Designed by Google (July 2012) ◦ Open protocol that improves web content transportation (especially latency)  Basically a modification of HTTP protocol ◦ Most important features  One TCP connection per client (advanced multiplexing)  Intensive compression (including headers)  Server may push content in advance  E.g., sending page-related data before the request  Focus on security (by TLS encryption) by Martin Kruliš (v1.1)28

 New Version of HTTP ◦ Based on SPDY protocol  Google abandoned SPDY in favor HTTP/2 in 2015  First draft was copy of SPDY specification ◦ Differences from SPDY  TLS optional (defined by URI http/https)  Faster and more secure compression  Multi-host multiplexing  Improved prioritization ◦ Implementation  Currently supported by major browsers and sites by Martin Kruliš (v1.1)29

 Comet by Martin Kruliš (v1.1)30 Client (Browser) Web Server timeout event Client starts asynchronous HTTP Request Server postpones the response if there is nothing to report After timeout, an empty response is sent Client immediately issues a new request Reportable event occurs Event notification is sent Client processes the event and issues another request …

 Extension of HTTP(S) Protocols ◦ Two way communication ◦ Persistent connections ◦ Layered over TCP or SSL/TLS connection  Protocol Properties ◦ Defined in detail in RFC 6455 ◦ Handshake is compatible with HTTP handshake ◦ Simple message-based communication  User can specify custom sub-protocols (i.e., the contents and semantics of the messages) by Martin Kruliš (v1.1)31

 WebSockets by Martin Kruliš (v1.1)32 Client (Browser) Web Server Client sends a HTTP “upgrade” request Server responds with 101 Switching Protocols WebSocket Protocol WebSocket message can be sent at any time by any party WebSocket protocol replaces HTTP protocol on the TCP channel Messages on the client side are sent/processed by a script

 Web Real-Time Communication ◦ API for direct p2p communication between browsers ◦ Originally designed for audiovisual data (videophone) by Martin Kruliš (v1.1)33 Signaling channel (AJAX, WS, …) is required for establishing the connection RTC data are then passed directly or via TURN servers

by Martin Kruliš (v1.1)34