Poor Man Push I – das Frontend

Wie mache ich Push Nachrichten ohne eigenen Webserver? Wenn ich den hätte, könnte ich einfach die Libs verwenden und schon kann ich meine Leser per Push über neue Artikel informieren. Ich bin so arm, daß ich meine Webpräsenz bei one.com miete. Damit verfüge ich nur über das php, das alle anderen Mieter auch haben.

Bei WordPress gibt es Plugins, die ich einbauen könnte. Aber die kostenlosen Plugins sammeln Daten per Cookies und machen so ihr Geschäft. In jedem Fall wird das Javascript per importscript(‚xyz‘) geladen. Damit kontrolliert ein anderer, was auf meinen Seiten passiert. In dem Beitrag über die Push Trojaner habe ich untersucht, was damit alles möglich ist. Kann das ein normaler Blogger verstehen, was bei diesen Plugins genau passiert? Immerhin muss er das in seiner Datenschutzseite beschreiben.

Das geht auch einfacher:

1. Minimales Javascript zum Einbetten in Webseiten
2. Anmeldungen in die Datenbank auf dem Server
3. Skript zum Versenden der Push Nachrichten auf meinem Mac

Das Frontend ist so klein, dass ich an dieser Stelle auch ein wenig auf Besonderheiten von Javascript aus Sicht eines Programmierers mit C/Pascal/C++ Background eingehen kann.

Das Html

Unter gawehns.de/pmp/index.html ist eine minimale html Seite für An- und Abmeldung von Pushnachrichten. In vier Divs werden die Zustände einer Webseite in Bezug auf Pushnachrichten dargestellt:

• Startup
• Der Browser kennt kein Push
• Nachrichten sind abonniert

• Nachrichten sind nicht abonniert

Das Div Startup ist zunächst sichtbar. Falls ein Push unterstützt wird, kann der Leser der Webseite Pushnachrichten abonnieren und abbestellen.

Im echten Einsatz wären die ersten beiden Divs leer und der Zustand des Abonnements wäre durch Icons dargestellt.

Zwei Funktionen muss das javascript realisieren:

1. subscribe()
2. unsubscribe()

Wer hätte das gedacht?

Das Javascript

In gawehns.de/pmp/index.js sind diese zwei Funktionen implementiert. Was zunächst aussieht, als wäre es noch nicht fertig:

var subscribe = function () { console.log("subscribe  nicht implementiert")};
var unsubscribe = function () { console.log("unsubscribe  nicht implementiert")};

kann jemanden mit C/C++/C#/Java/Pascal Background auf einen Holzweg schicken. Es ist in Javascript nicht so, daß die Funktionen hier und die Daten dort sind. Bei Javascript gibt es keinen Unterschied zwischen Daten und Funktionen gemacht.

Deswegen gibt es zunächst die Platzhalter für die Funktionen, die dann fertig implementiert werden, wenn alles vorhanden ist:

unsubscribe = async function()
{
     await subst.unsubscribe();
     setVisible("unsubscribed");
}
subscribe = async function()
{
     if(Notification.permisssion === "denied")
          await Notification.requestPermission();
     if(Notification.permission === "denied")
          return;
     subst = await reg.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: urlBase64ToUint8Array(public_key),
     });
     setVisible("subscribed");
     displayTextArea('subscription', JSON.stringify(subst));
}

Was passiert hier genau? Ein paar Groschen müssen fallen:

• Solange etwas gebraucht wird, wird es nicht gelöscht. Das betrifft auch die Parameter in den Funktionsaufrufen.
• Funktionen können anonym sein. Dann sind alle lokal definierten Symbole nur innerhalb der Funktion sichtbar.

Das Symbole reg und subst sind Parameter der anonymen Funktionen, die im Erfolgsfall ausgeführt werden. Da die erzeugten Funktionen globalen Variablen zugewiesen werden, werden die Werte dieser Parameter nicht freigegeben.

Die Schlüssel

Ich wollte mit diesem Abschnitt nicht anfangen, da er ganz weit von Javascript und Html weg führt. Trotzdem steht die Erzeugung der Schlüssel am Anfang.

Die open source Software Openssl macht das. Beim aktuell Mac ist das mit dabei. Der Aufruf ist:

openssl ecparam -name prime256v1 -genkey -noout -out private_key.pem

Im aktuellen Verzeichnis ist die Datei private_key.pem mit dem privaten, geheim zu haltenden, Schlüssel. Für das javascript generiert man den öffentlichen Schlüssel in der richtigen Kodierung mit:

printf 'public_key="'
openssl ec -in private_key.pem -outform DER -pubout 2>/dev/null | tail -c 65 | base64 | tr -d '=' | tr '+/' '-_' | sed 's/$/"/'

Die Ausgabe ist dann die javascript Deklaration:
public_key="BIXJ0IAerBeW3Brxd28wvADY-EJr744bO3I5TYEAoU3UdvfG9i1PQ5gGuPIZlSzseSITnEuWh4TkWknG8gMD3mE"

Das kommt in ein public_key.js und mehr braucht man über die Schlüssel nicht zu wissen.