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

2.  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 03.10.2016 by Martin Kruliš (v1.1)2

3.  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 03.10.2016 by Martin Kruliš (v1.1)3

4.  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 03.10.2016 by Martin Kruliš (v1.1)4

5.  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, … 03.10.2016 by Martin Kruliš (v1.1)5

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

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

8. v  How does it work? 03.10.2016 by Martin Kruliš (v1.1)8 Client Server 195.113.20.128 Browser http://www.ksi.mff.cuni.cz/cs/lide.php Address Bar DNS Server v 195.113.20.128 HTTP Protocol Creates TCP Connection v Port 80

9.  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 protocol://username:password@domain:port/path ?p1=v1&p2=v2#element_id ◦ Real world example http://webik.ms.mff.cuni.cz/~krulis#last_part 03.10.2016 by Martin Kruliš (v1.1)9

10.  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) 03.10.2016 by Martin Kruliš (v1.1)10

11.  Hyper-Text Transfer Protocol 03.10.2016 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…?

12.  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 03.10.2016 by Martin Kruliš (v1.1)12

13.  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 ◦ … 03.10.2016 by Martin Kruliš (v1.1)13

14.  HTTP Response ◦ Status line (1 st line) HTTP-version Status-code Reason-phrase HTTP/1.1 404 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 03.10.2016 by Martin Kruliš (v1.1)14

15.  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 03.10.2016 by Martin Kruliš (v1.1)15

16.  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 ) 03.10.2016 by Martin Kruliš (v1.1)16

17. 03.10.2016 by Martin Kruliš (v1.1)17 Request GET / HTTP/1.1 Host: www.ksi.mff.cuni.cz User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 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: www.ksi.mff.cuni.cz User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 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/1.1 200 OK Date: Mon, 16 Sep 2013 16:11:02 GMT Server: Apache/2.2.16 (Debian) X-Powered-By: PHP/5.3.3-7+squeeze15 Expires: Thu, 19 Nov 1981 08: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/1.1 200 OK Date: Mon, 16 Sep 2013 16:11:02 GMT Server: Apache/2.2.16 (Debian) X-Powered-By: PHP/5.3.3-7+squeeze15 Expires: Thu, 19 Nov 1981 08: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

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

19.  Serving Static Pages 03.10.2016 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/1.1 200 OK Content-Length: 1019 Content-Type: text/html;... HTTP Response HTTP/1.1 200 OK Content-Length: 1019 Content-Type: text/html;... index.html Apache configuration /var/www/myweb/

20.  Common Gateway Interface 03.10.2016 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/1.1 200 OK Content-Length: 2049 Content-Type: text/html;... HTTP Response HTTP/1.1 200 OK Content-Length: 2049 Content-Type: text/html;... /var/www/myweb/ app.cgi stdin stdout

21.  Integrating Scripting Modules 03.10.2016 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/1.1 200 OK Content-Length: 1984 Content-Type: text/html;... HTTP Response HTTP/1.1 200 OK Content-Length: 1984 Content-Type: text/html;... /var/www/myweb/ mod_php index.php

22.  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 03.10.2016 by Martin Kruliš (v1.1)22

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

24.  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 03.10.2016 by Martin Kruliš (v1.1)24

25.  The SSL/TLS Hanshake 03.10.2016 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

26.  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 03.10.2016 by Martin Kruliš (v1.1)26

27.  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 03.10.2016 by Martin Kruliš (v1.1)27

28.  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) 03.10.2016 by Martin Kruliš (v1.1)28

29.  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 03.10.2016 by Martin Kruliš (v1.1)29

30.  Comet 03.10.2016 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 …

31.  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) 03.10.2016 by Martin Kruliš (v1.1)31

32.  WebSockets 03.10.2016 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

33.  Web Real-Time Communication ◦ API for direct p2p communication between browsers ◦ Originally designed for audiovisual data (videophone) 03.10.2016 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

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