Kommunikation mit JavaScript war lange Zeit sehr überschaubar: HTTP-Anfragen waren dank Ajax möglich, aber auch nur an den Ursprungsserver und mit weiteren Einschränkungen. Dies hat sich mittlerweile geändert: JavaScript-Code kann jetzt auch mit fremden Browsertabs und Servern reden, sofern diese mögen; ebenfalls ist eine bidirektionale Kommunikation anstelle des altbackenen Pull-Modells möglich. Auch Zugriff auf Kamera und Mikrofon sind (nach Nutzerbestätigung) möglich. Diese Session zeigt zahlreiche bekannte und weniger bekannte Kommunikationsmöglichkeiten mit JavaScript und HTML5 auf und beleuchtet Vor- und Nachteile aus dem Projektalltag.

1. Christian Wenz | Arrabiata Solutions GmbH
@chwenz
Kommunikations-APIs von
JavaScript und HTML5

2. Agenda
• Wider der Same-Origin Policy
– CORS
• Kommunikation im Browser
– Messaging API
– Worker
• Performante Kommunikation
– SSE, WebSockets, WebRTC, …

3. Status Quo
• GET-Requests mit src-Attribut möglich
– Ohne Einschränkungen
– Kein Zugriff auf Rückgabe
• Jedes (vom Browser unterstützte) HTTP-
Verb via XMLHttpRequest
– HTTP-Header und -Body können angegeben
werden
– Beschränkt durch SOP (Same-Origin Policy)
• Protokoll, Domain, Port
• Verwendet immer noch HTTP

4. Same-Origin Policy (SOP)
• Origin: vgl.
http://tools.ietf.org/html/rfc6454
• Protokoll, Domain, Port
• Ausgenommen: src-Attribut – etwa bei
<script>!

5. Same-Origin Policy (SOP) (2)
• http://example.com/
• http://example.com:80/
• http://example.com/path/file
• http://example.com/
• http://example.com:8080/
• http://www.example.com/
• https://example.com:80/
• https://example.com/
• http://example.org/
• http://webtechcon.de/

6. CORS
• Cross-Origin Resource Sharing
• Umgeht die Same Origin Policy
• Es gibt allerdings Einschränkungen
– Spezifischer Content-type-Header
(teilweise)
– Origin-Header wird automatisch gesetzt
– Server verwendet den Header Access-
Control-Allow-Origin (Wert muss * sein
oder der des Origin-Headers)

7. Lessons Learned
Opfer
(Client)
Angreifer
(Website)
Andere
Website
1) HTTP-Anfrage
2) Schickt JavaScript
3) HTTP-Anfrage

8. CORS (2)
• Fortgeschrittener Ansatz: Preflighted
Requests (z.B. für POST-Anfragen, um
CSRF zu vermeiden)
• Nettes Flussdiagramm bei
HTML5Rocks:
http://www.html5rocks.com/static/images
/cors_server_flowchart.png

9. Messaging API
• Einfacher Cross-Domain-Mechanismus,
um Daten zu senden und zu empfangen
• Funktioniert überall ab IE8+
• Senden:
– Auf anderes Fenster zugreifen (z.B.
contentWindow-Eigenschaft eines Iframes)
– Daten senden mit der Methode postMessage()
– Aus Sicherheitsgründen muss der Ursprung
der Zielsite als zweiter Parameter angegeben
werden

10. Messaging API (2)
• Empfangen:
– Auf das message-Ereignis warten.
– Eventparameter enthält die gesendeten
Daten (Eigenschaft data) und denn
Ursprung des Senders (Eigenschaft origin)
– Mit postMessage() können Daten zurück
an den Sender geschickt werden
– Dort analog auf das Ereignis message
lauschen

11. Shared Worker
• Client:
– new SharedWorker
– port.start()
– port.postMessage()
• Worker:
– self.onconnect = function(e) {
var port = e.ports[0];
}
• Aktuell nur Firefox/Chrome

12. Service Worker
• Worker als Basis für Push-Notifications,
Background-Sync und mehr
• Firefox und Chrome – bald Edge
• Aktueller Stand:
https://jakearchibald.github.io/
isserviceworkerready/

13. Lebenszyklus
• https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

14. Push API
• Senden von Informationen an eine
Webanwendung
• Auch wenn Seite nicht im Vordergrund (oder
gar nicht geladen)
• Basiert auf Service Worker
• Firefox/Chrome (jeweils Desktop)

15. Notification API
• „Toast“-Anzeige einer Meldung
• Bestimmte, aber eingeschränkte
Layoutmöglichkeiten
• Häufig mit zugehörigem Service Worker
• Demo:
https://github.com/chrisdavidmills/push-
api-demo

16. Server-Sent Events
• JavaScript-API für Long Polling Requests
• Server schickt dauernd Daten, der Browser
verarbeitet sie sukzessive
• Schritt 1: Datenquelle abonnieren
– var es = new EventSource("polling.ext");
• Schritt 2: auf das Ereignis message lauschen
– es.onmessage = function(ev) {
console.log(ev.data);
};
• Klappt überall – außer im IE 

17. Stream-Format
• Content-type: text/event-stream
• Felder: id, data, event, retry (alle optional!)
• Format: <field>: <value>
• Leerzeilen zwischen Feldern
• id: 123
data: abc
id: 456
event: def

18. Wiederaufbau der Verbindung
• Browser verbindet sich alle paar
Sekunden neu (außer der Streamwert
retry gibt etwas anderes an)
• Browser schickt den HTTP-Header
Last-Event-ID falls der Server zuvor
eine ID verschickt hatte
• Ermöglicht es dem Server nur neue
Daten zu schicken

19. Web Sockets
• Full-Duplex-Kommunikation
• Umgeht ein paar der Nachteile von
HTTP (Metadaten werden mit jeder
Anfrage verschickt, Neuaufbau der
Verbindung, etc.)
• Klappt in allen modernen Browsern (IE
ab Version 10)

20. HTTP-Handshake
• Request:
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
• Response:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

21. API für Web Sockets
• Server: hängt von der jeweiligen Technologie ab
• Client:
– var w = new WebSocket("ws://server:1234");
– w.onopen = function(ev) {
w.send("Hi!");
}
w.onmessage = function(ev) {
console.log(ev.data);
}

22. Websocket-Server mit node.js
var webSocketServer = require("websocket").server;
server.listen(webSocketsServerPort);
var wsServer = new webSocketServer({
httpServer: server
});
wsServer.on('request', function(request) {
…
});

23. Socket.IO
• Es gibt zahlreiche Protokollversionen von Web
Sockets
• In dem Fall bietet es sich an eine Abstraktionsschicht
zu nutzen, die auch Polyfills für ältere Browser bietet,
z.B. Socket.IO (http://socket.io/).
• Server:
– var io = require("socket.io").listen(1234);
• Client:
– var ws = io.connect("http://127.0.0.1:1234");

24. WebRTC
• http://www.webrtc.org/
• Ursprünglich Open-Source-Projekt von
Google
• Mittlerweile im W3C-
Standardisierungsprozess
(http://www.w3.org/2011/04/webrtc/)
• Anwendungsfälle: Sprach- und
Videokommunikation, P2P

25. WebRTC-APIs
• MediaStream/getUserMedia(): Zugriff
auf Daten-Streams
• RTCDataChannel: Datenkanal
• RTCPeerConnection: P2P-Verbindung
für Audio und Video

26. getUserMedia()
• Beispiel Video:
navigator.getUserMedia(
{ video: true }),
function(stream) {
videoElement.src =
window.URL.createObjectURL(stream);
// oder: srcObject
},
function (error) {});

27. Screenshots
• Aktueller Video-Frame kann in Canvas
„gezeichnet“ werden
• ctx.drawImage(video, 0, 0,
video.clientWidth, video.clientHeight);

28. WebRTC-Beispiele
• Firefox Hello
• http://apprtc.appspot.com/
• Plugin-basierte Dienste (Skype
innerhalb von Facebook, Google
Hangouts)

29. Danke!
• Email: christian.wenz@arrabiata.de
• Twitter: @chwenz