push Nachrichten und ihre Verschlüsselung

Die Service Worker können auch Nachrichten entgegennehmen, wenn die zugehörige Webseite gar nicht offen ist. Das wollte ich als Nächstes ausprobieren. Der Anfang deutete schon an, dass das nicht die ganz einfache Sache war.

Zunächst wollte ich die Notification Funktion einbauen. Damit kann eine Webseite Nachrichten außerhalb des Browsers anzeigen. Anstelle eines Alerts wird eine Nachricht angezeigt. Für den Anfang schien das ein allererster Schritt, der dann Mut macht weiter zu gehen.

Auf dem localhost tippte ich die Javascript Befehle in das index.html. Nach Speichern und Laden staunte ich nicht schlecht über die Weigerung des Browsers. Er ignorierte die Befehle. Ich sah keine „Die Webseite möchten Ihnen Nachrichten schicken“ Mitteilung.

Sollte hier https erforderlich sein? Das sollte wohl doch so schwer nicht sein. Die beim Stackexchange gefundene Anleitung las sich gut. Ich brauchte Zertifikate, damit eine sichere Verbindung aufgebaut werden kann. Das konnte ich alles mit copy&paste erzeugen lassen. Mein Apache ließ sich auch um die nötigen Plugins erweitern, aber Chrome, mein Browser, prüfte die Zertifikate und lehnte sie ab. Sie seien nicht sicher genug sagte er.

Das traf mich dann doch sehr. Vielleicht lag es gar nicht an das https? Geschwind probierte ich die Befehle direkt auf https://www.gawehns.de/pwa aus. Ich wurde gefragt, ob die gawehns.de mir Neuigkeiten schicken durfte. Ich war erleichtert.

Schnell baute ich eine Hallo Welt Anzeige ein und wunderte mich, dass diese nicht zu sehen war. Im Document Root war die richtige Version, den Browsercache hatte ich geleert, aber trotzdem war im Browser die alte Anzeige. Die http Variante zeigte die geänderte Version. Bei https war die alte. Was tun?

Ich chattete mit Julia vom one.com Support. Sie sah bei http und https die gleiche Version. Ihre Frage, ob ich den Browsercache geleert hätte, nervte. Dann aber wies sie mich auf den „Varnish Cache“ hin. Ich sollte diesen ausschalten. So lernte ich, dass der Server noch einen Cache hat, in dem auch statische Daten gecacht werden. Ob das so sinnvoll ist?

Ich las den Hinweis, setze ihn um und freute mich über wenigstens diesen Erfolg. Dann machte ich mit meinen Erkundungen bzgl. der Notifications weiter. Ich lernte so einiges über Kryptographie, Schlüssel und Libs, die man dann einbauen muss, wenn man das kann.

Die in den google codelabs beschriebene Client Seite habe ich in mein pwa/index.html eingebaut. Die Seite ist nun ganz im Brutalismus Stil gehalten. Falls Sie es ausprobieren wollen:

• Erlaubnis zum Senden von Meldungen erteilen. Sonst geht gar nichts.
• Den Button „Testsenden vom Browser“ anwählen. Nun sollte eine Meldung zu sehen sein.
• Dann zum push companion gehen (sollte so heißen und in einem neuen Tab öffnen). Einen Server, der Meldungen schickt, habe ich noch nicht gebaut. Aber dazu unten mehr.
• Den public key kopieren und auf der Beispielseite eintragen.
• „subscribe push“ bedienen.
• Es wird dann die „Subscription“ mit Daten gefüllt.
• Diese Daten kann kopieren und im Push Companion eintragen.
• Von dort dann eine Nachricht schicken. Diese wird dann auch angezeigt.

Warum läuft das eigentlich so kompliziert ab? Der Browser könnte auch den Server direkt abfragen.

Der Push-Server

Der Browser bekommt alle push Nachrichten von einem Push-Server. Dieser wird vom Hersteller des Browsers, im Fall von Chrome ist das Google, zur Verfügung gestellt. Regelmäßig fragt der Browser bei diesem Server nach, ob Push-Nachrichten vorhanden sind. Der Benutzer will das so, wenn er nicht die Push-Nachrichten generell ausschaltet.

Hat der Benutzer der Webseite erlaubt Nachrichten zu senden, meldet diese sich beim Browser an und erhält die „Subscription“, die auf dem Webserver der Seite gespeichert wird. Dann kann der Betreiber der Webserver eine Nachricht für den Benutzer an den „endpoint“ der Subscription schicken. Dieser Endpoint liegt auf dem Push-Server. Dort holt der Browser die Nachrichten für den Benutzer ab.

Der Push-Server akzeptiert nicht jede Nachricht an den Endpoint. Die Nachricht ist speziell verschlüsselt und hat einen Header, mit dem überprüft wird, ob der Absender zu der Subscription passt.

An dieser Stelle wusste ich nicht so richtig, wie weitermachen. Deswegen habe ich mit dem Push Companion als Erstes die Webseite so weit gebaut, dass ich etwas probieren konnte, dass dann auch funktioniert.

Das web push protocol

Wenn ich dem  Server das Nachrichten schicken beibringen will, sollte ich zunächst das Protokoll verstehen. Zum Glück fand sich bei Googles Web Fundamentals eine Beschreibung. Ich las von Json Web Tokens und ihren Verschlüsselungen. Beim Web Push Protokoll wird in einem im Header Info.Data.Signatur geschrieben.

jwt info ist fest:

{
"typ": "JWT",
"alg": "ES256"
}

jwt data beschreibt die Nachricht:

{
"aud": "https://some-push-service.org",
"exp": "1469618703",
"sub": "mailto:example@web-push-book.org"
} 

Der Server wandelt die beiden Konstrukte in Strings um, kodiert URL konform und verschlüsselt das dann mit seinem privaten Schlüssel. Den öffentlichen Schlüssel schickt er in einem anderen Header mit.

Was das sollte war, mir nicht klar. Trotzdem versuchte ich mich an den Codeschnipseln. Das hätte ich nicht direkt machen sollen. So suchte ich förmlich nach Schwierigkeiten und es frustrierte ganz schön.

Immer fragte ich mich, wenn der Server den öffentlichen Schlüssel mit übertragt, dann kann jeder mithören. Wenn der Push Server aus dem Verschlüsselten und dem öffentlichen Schlüssel den privaten Schlüssel ableiten kann, dann das jeder Hacker doch auch.

Warum musste das ganze denn sein?

Ein Video erklärte mir das Ganze. Das hätte ich so nicht erwartet. Videos können etwas erklären. Bisher dachte ich immer mit Lesen besser zu fahren. Zu allem fand nicht ich das Video, sondern das Video fand mich. You-Tube war der Meinung es in „meinem Mix“ einspielen zu müssen. Welch eine wunderbare Welt, in der Browser weiß, dass ich viel in Verschlüsselungen unterwegs bin und mir dann sagt: „Keine Musik hören, schau mal hier, dann brauchst Du nicht mehr nach Kryptographie Texten zu suchen!“

Es sind nur 11 Minuten:

Das mit der Multiplikation, die nicht umgedreht werden kann, ist der Knackpunkt bei der Methode. Durch gemeinsame Parameter gibt es gemeinsame Kurve. Auf dieser liegen die Schlüssel. Wenn ein Partner etwas sowohl verschlüsselt, als auch unverschlüsselt überträgt, kann der andere diesen Punkt leicht finden. So ungefähr überzeugt mich das Verfahren nun.

Für die Umsetzung werde ich mir nun die nodejs Implementierung anschauen.