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

 Hyper-Text Transfer Protocol ◦ Simple textual-based protocol ◦ Designed for data retrieval  Also allows data uploads and modification requests ◦ Completely stateless  Each request treated independently  Cookies extension allows limited session management ◦ Client initiated  Server cannot push data to the clients by Martin Kruliš (v1.0)2

 Asynchronous JavaScript and XML ◦ A technique that combines three technologies  JavaScript  Asynchronous HTTP client API integrated in browser  XML or other semi-structured data format ◦ Script invokes HTTP transfer and provide callbacks  Both GET and POST requests are supported ◦ The callback is invoked asynchronously  At the conclusion of the HTTP transfer  It may process the returned data (e.g., update the contents of the web page) by Martin Kruliš (v1.0)3

 XMLHttpRequest Object var httpReq = new XMLHttpRequest(); httpReq.open("GET", "index.php?ajax=1", true); httpReq.onreadystatechange = function() { if (httpReq.readyState != 4) return; if (httpReq.status == 200) processResponse(httpReq.responseText); else handleError(httpReq.status); } httpReq.send(); by Martin Kruliš (v1.0)4

 More Advanced Features ◦ Managing headers  setRequestHeader(), getResponseHeader() ◦ Advanced response representation  Support for array buffers, blobs, and JSON data ◦ Easier way to send request content  Support for blobs  Special FormData API  Assembling a form-like request (including file uploads) ◦ Events  onload, onerror, onabort, ontimeout, onloadend, … by Martin Kruliš (v1.0)5

 Same Origin Security Policy ◦ Safety precaution implemented by browsers  AJAX requests must target the same domain ◦ Sometimes accessing other domains is required  Cross-Origin Requests ◦ Browser adds Origin header to the request ◦ If the request is allowed, the server adds header Access-Control-Allow-Origin in response by Martin Kruliš (v1.0)6

 Comet by Martin Kruliš (v1.0)7 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 …

 Server Messages ◦ Extension of the idea implemented by Comet ◦ Special protocol  HTTP response with text/event-stream content type  Continuous stream containing separate events data: transmitted data event: custom-event data: data for the custom event ◦ Simple client API var evSource = new EventSource("msg.php"); evtSource.onmessage = function(e) { e.data … } by Martin Kruliš (v1.0)8 Example 1

 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.0)9

 Handshake ◦ The connection is initiated by a HTTP request, which is a HTTP-upgrade request GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: by Martin Kruliš (v1.0)10 The “upgrade” request Security things WebSocket specific information

 Handshake ◦ The server may respond by any HTTP-valid code  E.g. 404 if the URI is not valid or by 3xx redirection  It may also include things like auth-tokens, cookies… ◦ Upgrade acceptation looks as follows HTTP/ Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGz... Sec-WebSocket-Protocol: chat by Martin Kruliš (v1.0)11 Upgrade confirmation Security verification Accepted subprotocol

 Frame Format by Martin Kruliš (v1.0)12 Ctrl. bitsOp. Code LengthExtended Length (if length > 125) Payload Data Mask Extended Length (if length == 127) Masking Key (if mask == 1) Masking Key (continuation)

 Frame Format by Martin Kruliš (v1.0)13 Ctrl. bitsOp. Code LengthExtended Length (if length > 125) Payload Data Mask Extended Length (if length == 127) Masking Key (if mask == 1) Masking Key (continuation) Control Bits 0. – Final fragment of a message Reserved (set to 0) Control Bits 0. – Final fragment of a message Reserved (set to 0) Opcode (type of payload) x0 – Continuation frame x1 - Text Frame (UTF8) x2 – Binary Frame x3-x7 – Reserved (non control) x8 – Connection Close x9 – Ping xA – Pong xB-xF – Reserved (control) Opcode (type of payload) x0 – Continuation frame x1 - Text Frame (UTF8) x2 – Binary Frame x3-x7 – Reserved (non control) x8 – Connection Close x9 – Ping xA – Pong xB-xF – Reserved (control)

 Frame Format by Martin Kruliš (v1.0)14 Ctrl. bitsOp. Code LengthExtended Length (if length > 125) Payload Data Mask Extended Length (if length == 127) Masking Key (if mask == 1) Masking Key (continuation) Whether payload is masked Payload length (in bytes). If length == 126/127, extended 16/64 bit length is used. Payload length (in bytes). If length == 126/127, extended 16/64 bit length is used. Randomly selected 32 bit key used for XOR masking of the payload.

 Data Frames ◦ Messages may be fragmented  First frame defines the type, other frames are defined as continuation frames  Last frame has the appropriate control bit set ◦ Text messages must be in UTF8, binary messages are interpreted only by the application  Control Frames ◦ Close frame initiates graceful connection shutdown ◦ Ping/pong frames verify the connection is still alive by Martin Kruliš (v1.0)15

 Security ◦ The connection may be established on a SSL/TLS channel instead of TCP  In the same way HTTP and HTTPS works ◦ The client sends an origin that refers to a domain from which the client script was downloaded ◦ The server must correctly transform given security key to verify it is really a WebSocket server ◦ The client may use frame masking to defend against a specific cache-poisoning attack  When the attacker constructs frames that look like a HTTP request by Martin Kruliš (v1.0)16

 Client Side (JavaScript) ◦ Encapsulated in window.WebSocket object ◦ We can check the functionality by if (!"WebSocket" in window) { // Do plan B; we do not have WebSockets } ◦ A new connection is initiated by constructing new WebSocket object var ws = new WebSocket('ws://domain/', 'proto'); by Martin Kruliš (v1.0)17

 WebSocket Object ◦ Properties  readyState – state of the connection (0 – connecting, 1 – connnected, 2 – closing, 3 – closed)  protocol – selected subprotocol  bufferedAmmount – number of bytes buffered by send but not yet transmitted over the network ◦ Methods  send(data) – send a data message (the type of the message is selected by the type of the data object)  close([code, [reason]]) – gracefully terminate the connection by Martin Kruliš (v1.0)18

 WebSocket Object ◦ Events  onopen() – when the connection is established  onmessage(e) – reports an incoming message (defragmented) in e.data field (string for text and Blob or ArrayBuffer for binary messages)  onerror() – if connection was terminated by an error  onclose(e) – when the connection is terminated  e.wasClean – whether the shutdown was graceful  e.code – termination code  e.reason – string with termination reason by Martin Kruliš (v1.0)19

 Server Side ◦ Current HTTP servers (e.g., Apache) do not natively support WebSockets  Similar problem as with Comet and Server Events  Applications often use two servers (HTTP and WS) ◦ Alternatives  Standalone application/script that implements HTTP and WS on its own  Specialized solutions like Node.js  Contains ready to use libraries for HTTP and WS which embrace event based programming by Martin Kruliš (v1.0)20 Example 2

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

 Web RTC API ◦ MediaStream  API that exposes camera or microphone as streams of multimedia data ◦ RTCPeerConnection  Manages the established connection  Multiple channels may be attached ◦ RTCDataChannel  Special channel type for script-managed data transfers  Channel API is based on WebSocket API by Martin Kruliš (v1.0)22

by Martin Kruliš (v1.0)23