1. Advanced Communication in Web Technologies
Martin Kruliš
by Martin Kruliš (v1.1)

2. Revision 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.1)

3. Revision 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.1)

4. Revision 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();
- The third argument of open() is async flag. If false, the send() call will block (very unwise).
- XMLHttpRequest also has responseXML property, where the XML DOM is stored.
- readyState values: 0 = not initialized, 1 = connection established, 2 = headers received, 3 = downloading response, 4 = operation completed
More at
by Martin Kruliš (v1.1)

5. XMLHttpRequest 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, …
Example 1
The form data object may also import values from HTML forms easily. See FormData constructor specification.
by Martin Kruliš (v1.1)

6. Cross-Origin Requests
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.1)

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

8. Server Messages 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 … }
Example 2
by Martin Kruliš (v1.1)

9. WebSocket Protocol Extension of HTTP(S) Protocols Protocol Properties
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)

10. WebSocket specific information
WebSocket Protocol
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: 13
The “upgrade” request
Security things
WebSocket specific information
by Martin Kruliš (v1.1)

11. Security verification
WebSocket Protocol
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
Upgrade confirmation
Security verification
Accepted subprotocol
by Martin Kruliš (v1.1)

12. WebSocket Protocol Frame Format Length
Ctrl. bits
Op. Code
Length
Extended Length (if length > 125)
Payload Data 4 8 16 32
Mask
Extended Length (if length == 127)
Masking Key (if mask == 1)
Masking Key (continuation)
by Martin Kruliš (v1.1)

13. WebSocket Protocol Frame Format Opcode (type of payload)
Ctrl. bits
Op. Code
Length
Extended Length (if length > 125)
Payload Data 4 8 16 32
Mask
Extended Length (if length == 127)
Masking Key (if mask == 1)
Masking Key (continuation)
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)
Control Bits
0. – Final fragment of a message
1.-3. Reserved (set to 0)
by Martin Kruliš (v1.1)

14. WebSocket Protocol Frame Format Whether payload is masked
Ctrl. bits
Op. Code
Length
Extended Length (if length > 125)
Payload Data 4 8 16 32
Mask
Extended Length (if length == 127)
Masking Key (if mask == 1)
Masking Key (continuation)
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.
by Martin Kruliš (v1.1)

15. WebSocket Protocol Data Frames Control 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.1)

16. WebSocket Protocol 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 should use frame masking to defend against a specific cache-poisoning attack
When the attacker constructs frames that look like a HTTP request
The frame masking is used when the attacker gets hold of both client code and server code and the only thing we can trust is the browser.
The cache-poisoning attack aims at old (not-well-written) HTTP proxies. It tries to send seemingly legitimate HTTP request from the client and HTTP response from the server inside the web socket protocol (as strings). If a cache interprets the TCP content (despite the fact it is interleaved by Websocket headers), it might get polluted (possibly with malicious content).
The browser uses masking to scramble the requests (not cryptographically, just to fool proxies) by random XOR keys, so the attacker cannot prepare data that would seem like a HTTP request.
by Martin Kruliš (v1.1)

17. WebSocket API 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.1)

18. WebSocket API WebSocket Object Properties Methods
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.1)

19. WebSocket API 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.1)

20. WebSocket API 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
Actually, Apache now supports a proxy module for ws connections.
Example 3
by Martin Kruliš (v1.1)

21. RTC data are then passed directly or via TURN servers
Web RTC
Web Real-Time Communication
API for direct p2p communication between browsers
Originally designed for audiovisual data (videophone)
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)

22. Web RTC Web RTC API MediaStream RTCPeerConnection RTCDataChannel
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
See also (video lecture) and (videophone application using WebRTC).
A good tutorial can be found here:
by Martin Kruliš (v1.1)

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