Stranger Than Usual

Früher, noch zu Zeiten meines Rails-Blogs, hatte dieses Blog eine Kommentarfunktion. Die wurde allerdings nur am Anfang genutzt und recht schnell von Spambots gefunden und missbraucht. Ich habe die dann erst einmal abgeschaltet, um sie später, mit Honeypotfeldern für die Spambots, wieder zu aktivieren. Im selben Jahr allerdings noch bin ich auch meinen static site generator umgestiegen, und da war dann ein Kommentarfeld einfach nicht mehr möglich.

Ich hatte diese Funktion nie ernsthaft vermisst, aber ein kleiner Zweifel nagte doch an mir: Was ist, wenn jemand wirklich einen wichtigen Hinweis zu einem meiner Artikel hat? Was ist, wenn ich mangels Kommentarfunktion vielleicht die Lösung für das in einem Blogpost beschriebene Problem verpasse? Was, wenn ich einen Fehler gemacht habe, den ich unbedingt korrigieren muss? Eine Möglichkeit für Feedback oder eine Kontaktmöglichkeit wäre schon nicht schlecht. Ich könnte meine Emailadresse hinterlegen, aber dann kriege ich vielleicht wieder Unmengen an Spam (Die Phishing-Mail vom Freitag war übrigens Zufall und hat nichts mit diesem Post hier zu tun. Trotzdem ist sie ein gutes Beispiel).

Email-Obfuscation to the rescue

Jetzt bin ich im März über einen Blogpost zur Email-Obfuscation auf Websites gestoßen. Der Autor stellt hier viele Obfuscation-Techniken vor, sowohl für die Emailadresse im Text als auch für die Adresse in einer email:-URL in einem <a>-Tag. Er hat auch untersucht, wie viele Scraper er mit einer jeweiligen Technik abwehren konnte. Das war selbst bei simplen Techniken immer erstaunlich viel.

Nun habe ich aber ein paar Bedingungen an eine Email-Obfuscation auf meiner Website:

1. kein Javascript – damit fallen die wirksamsten Methoden weg
2. keine Server-Interkation: dadurch kann ich zum Beispiel keine Weiterleitung auf eine Emailadresse machen
3. die Methode muss barrierefrei sein: ich will keine „irgendwas ÄT example.com“-Adressen, die meine Nutzer dann selber zusammensetzen dürfen. Ich möchte auch keiner Bilder meine Emailadresse verwenden, die die Leute dann selber abtippen müssen.

Ich habe mich für eine Kombination aus zwei Techniken entschieden: erstens habe ich die Emailadresse URL-encodiert (das heißt die Bytefolge der Adresse durch %xy ersetzt, wobei xy eine zweistellige Hexadezimalzahl ist). Zum anderen habe ich die ganze URL als HTML-Entitäten der Form &#<unicode-number>; ersetzt. So wird zum Beispiel aus der Adresse some+one@example.com zunächst

%73%6f%6d%65%2b%6f%6e%65%40%65%78%61%6d%70%6c%65%2e%63%6f%6d

Ich habe noch einen Betreff hinzugefügt, die komplette URL sähe dann so aus:

mailto:%73%6f%6d%65%2b%6f%6e%65%40%65%78%61%6d%70%6c%65%2e%63%6f%6d?subject=%f0%9f%92%a4

Das dann noch in HTML-Entitäten encodiert, sieht so aus:

mailto:%73%6f%6d%65%2b%6f%6e%65%40%65%78%61%6d%70%6c%65%2e%63%6f%6d?subject=%f0%9f%92%a4

Jetzt sollte man meinen: Das ist doch keine große Sache, das wird doch sicher ein einfacher HTML-Parser auflösen. Nun, grundsätzlich ja. Das ist, warum so eine URL im Browser wunderbar funktioniert. Anscheinend sind die meisten Scraper jedoch sehr simpel aufgebaut und machen so etwas nicht. Absolut sicher ist das natürlich nicht, aber meine Spamfilter können den Rest hoffentlich erträglich klein halten. Die Adresse, die ich hier im Blog nutze, ist ein Alias zu meiner Posteo-Adresse und ich verwende sie nur hier. Wenn der Spam zu viel wird, lösche ich die Adresse einfach und füge hier eine neue ein, so dass die Scraper von Vorne beginnen können.

Der Nachteil: die URL ist so deutlich länger, was auch meine HTML-Dateien größer macht. Bei einer niedrigen zweistelligen Anzahl sowohl auf der Startseite als auch auf der Archivseite ist das aber ertragbar.

Kommentiert!

So, jetzt hoffe ich dass ich auch gelegentlich Kommentare bekomme. Die werde ich dann in irgendeiner Form hier einfügen (wenn ich möchte). Vielleicht bringe ich auch dediziertes HTML für die Kommentare zurück. Die alten Kommentare sind nämlich nicht gelöscht, sondern liegen hier noch im Repo und warten darauf, wieder angezeigt zu werden. Vorerst werde ich aber Kommentare wohl einfach in einem Update des Blogposts verwursten.

Ich habe bei den Email-Links immer einen Betreff eingefügt. Den könnt ihr wenn ihr Kommentieren wollte gerne nach belieben Ändern, ich wollte nur vermeiden, Emails ohne Betreff zu bekommen.

Ich plane auch, irgendwann so etwas wie eine Kontaktseite und vielleicht ein paar andere statische Seiten einzuführen. Aber einfach Kommentarlinks unter meine Blogposts zu hauen war jetzt erst einmal die einfachste Option.

Tim Güneysu ist Professor für Security Engineering an der Ruhr-Universität Bochum (RUB). Offiziell war ich mal eine Zeit bei seinem Lehrstuhl angestellt, bis meine damalige Professorin auch an die RUB gekommen ist. Ich hatte nie viel mit ihm zu run. Trotzdem kriegte ich am letzten Freitag eine Email:

Hello,

I need your assistance with a remote task and would appreciate a prompt response.

Kindest regards,

Prof. Dr.-Ing. Tim Güneysu
Head of Chair
Chair of Security Engineering
Faculty of Computer Science
Ruhr University Bochum

Ich arbeite nicht mehr dort. Kein Name in der Mail. Nichts Spezifisches, wofür die andere Seite meine Hilfe braucht. Aber es ist natürlich dringend und von einer Person mit einer gewissen Autorität.

Nein, ist es natürlich nicht. Der Absender ist chairlead<vierstellige Zahl>@greenmail.net. Ganz unverdächtig.

Mal im Ernst: Die Phisher haben sich die Mühe gegeben, den Mailfooter ordentlich zu machen. Sie haben wohl explizit im akademischen Bereich gephisht. Und sind dabei nicht auf die Idee gekommen, dass ein Lehrstuhl für Systemsicherheit wohl der falsche Anlaufpunkt für Phishingversuche ist oder sich auch nur die Mühe gemacht, meinen Namen aus meiner Emailadresse zu extrahieren.

Sorry, aber wer sich so wenig Mühe gibt, kriegt keine Hilfe von mir bei irgendwelchen finsteren Machenschaften.

Das Favicon meines Blogs ist irgendwie langweilig:

Ich habe es erst recht spät hinzugefügt. Wenn ich git log richtig lese, dann erst 2020, nur wenige Monate bevor ich auf den neuen static site generator umgestiegen bin. Ich wollte damals vor allem ein Favicon, besser als keins, und habe also etwas sehr Einfaches genommen.

Die PNG-Datei des Favicons ist auch nur 212 Byte groß, das ist weniger als der Overhead, den der HTTP-Request erzeugt, um diese Datei zu laden. Dafür ist das Icon auch nur 64×64 Pixel groß. Ausreichend für ein kleines Icon im Browser, aber an vielen Stellen werden ja heutzutage größere Icons verwendet. Ideal wäre also eine SVG-Datei.

Aber wie schon gesagt, das Icon selber ist langweilig. Wenn ich es schon ändere, kann ich es ja auch direkt interessanter machen. Ich meine, im Ernst: „S“? Ich bin doch nicht Supermann (und auch nicht Syndrome, aus The Incredibles). Also vielleicht irgendwas, was zu diesem Blog passt. Aber was passt denn? Keine Ahnung.

Auf der anderen Seite: Ich mag Katzen, und Katzen gehen im Internet immer gut. Und ich hätte auch eine Idee. Ich habe nämlich dieses Foto unseres 2020 verstorbenen Katers:

Dieses Foto eignet sich hervorragend, um davon ein Binärbild zu machen, nur schwarz und weiß. Das habe ich schon vor Jahren mal aus Spaß gemacht:

Als Favicon sollte es transparent und quadratisch sein. Also noch ein bisschen croppen…

Schön, das sind um die 700×700 Pixel, als WEBP nur ungefähr 1,4 kiB groß. Eigentlich bräuchte ich nicht einmal eine SVG-Datei, denn das hier ist schon klein genug. Aber irgendwie wäre eine SVG-Datei schon einfacher zu handhaben und würde die durch den Binärfilter eckig gewordenen Kanten abrunden. Also habe ich mir Inkscape geschnappt, alle Regler auf ein möglichst kleines Ergebnis eingestellt und eine SVG-Datei erstellt, die ich dann mal wieder mit svgo und von Hand optimiert habe.

Zunächst nur ein bisschen komprimiert:

Dumm nur: Die Datei ist mit 4,7 kiB deutlich größer als die Rastergrafik. Selbst komprimiert kommt sie noch auf 1,9 kiB (gz) bzw. 1,7 kiB (Brotli). Aber für das Favicon kann ich noch ein bisschen Qualität schleifen lassen. Das war jetzt mit zwei Nachkommastellen Präzision. Ohne Nachkommastellen sieht es auch noch passabel aus. Die Datei ist dann kleiner als die Webp-Datei, und komprimiert kommt sie auf unter 1 kiB. Analog zum bisherigen Favicon grün gefärbt, sähe das dann so aus:

Ich habe das dann als Favicon ausprobiert und musste feststellen: Es passt nicht. Wenn das in der typischen Icongröße des Browsers gerendert ist, erkennt man nur einen grünen Blob, bestenfalls etwas, das ein Fuß sein könnte. Aber die Katze erkenne zumindest ich nicht darin.

Ich habe dann stattdessen erst einmal wieder das alte Favicon genommen, allerdings in einer SVG-Version. Die ist mit knapp 943 Byte (467 gz, 439 brotli) zwar größer als das bisherige Favicon, sieht herunterskaliert noch gut aus und lässt sich auch hochskalieren.

Also viel Arbeit, wenig Ergebnis. Und ich habe immer noch kein nicht-langweiliges Favicon.

Im Rahmen der aktuell laufenden Artemis 2-Mission und deren Umkreisung des Monds habe ich mich gefragt, ob es auch für den Mond ein Äquivalent des geostationären Orbits gibt. Also quasi ein lunastationärer Orbit. Ich dachte mir schon, dass das schwierig wird.

Tatsächlich ist ein lunastationärer Orbit nicht möglich. Der verlinkte Blogpost erklärt das schön anschaulich. Grob gesagt: Der Radius des lunastationären Orbits müsste so groß sein, dass die Schwerkraft der Erde überwiegt und der Satellit sich stattdessen direkt in einem Orbit um die Erde bewegen würde.

In diesem Zusammenhang habe ich auch den Begriff der Hill-Sphäre kennengelernt.

Meine steuerbare Winkekatze hat immer noch einen lahmen Arm, trotz aller Bemühungen, das zu ändern. Also schreibe ich statt über die Fertigstellung dieser von Unglück verfolgten Katze darüber, wie ich ein paar Kleinigkeiten an der Website verbessert habe.

Die Winkekatzenwebsite gibt es schon eine Weile. Als ich auf sie gestoßen bin, sind mir sofort ein paar Sachen aufgefallen, die ich verbessern wollte: viel zu große Bilddateien, übergroßes CSS und Javascript und vor allem ungültiges HTML. Also habe ich gefragt, und die Leute haben mich an den Code der Seite gelassen. Ich finde so etwas relativ entspannend, weil ja kein beruflicher Druck dahintersteht und ich niemandem Rechenschaft schuldig bin, warum ich gerade zwei Stunden investiert habe, um die Hierarchie der Überschriften zu korrigieren.

Ich habe auch einige Erfolge einfahren können, während ich noch auf ein Micro-USB-Kabel wartete und bevor mir die Lust vorrübergehend vergangen ist. Ich habe

• das fehlerhafte HTML korrigiert
• die Bilddateien verkleinert bzw. besser komprimiert
• Abhängigkeiten aktualisiert
• ein paar Styles verbessert
• opengraph-tags eingeführt (aktuell gemerged, aber nicht deployed)
• unnützes Javascript entfernt
• Favicons eingebaut

Was ich noch vor mir habe: bootstrap aus dem Style der Seite entfernen, was (CSS und Javascript zusammen) mehrere hundert kiB einsparen würde. Aber dafür muss ich ein bisschen Arbeit dort reinstecken (speziell: damit das Menü noch so funktioniert wie bisher), dass ich das erst einmal vertagt habe. Ganz klein werde ich das Javascript auch nicht kriege, weildie MQTT-Bibliothek alleine recht groß ist.

Alles schön. Aber die Sache mit dem Favicon war echt nicht einfach:

Das Favicon-Drama

Bis dahin hatte die Seite kein Favicon. Ich habe gefragt, ob wir eins wollen und direkt einen Vorschlag gemacht. Ich habe einfach eine gemeinfreie SVG-Datei einer Winkekatze genommen, ihr magentafarbene Augen gegeben (analog zu der Katze auf dem Foto auf der Seite) und das als Vorschlag eingereicht:

Das ist erst einmal gut angekommen. Die Sache hatte nur einen Haken: Der Hintergrund ist transparent, und der schwarze Teil der Winkekatze ist ein einzelner Pfad mit Aussparungen. Innere Ohren, Pfoten, Schnauze und Halsband sind also auch transparent. Positiv: Das machte es sehr einfach, die Augen zu färben (einfach ein farbiges Rechteck hinter die Augen gesteckt). Bei Menschen mit dunklem Theme / Dark Mode hingegen sah man von dieser Katze nichts, außer zwei farbigen Augen.

Also habe ich der Katze einen kompletten weißen Hintergrund verpasst. Das gefiel dann auch nicht. Außerdem sah die Katze auf 16×16 Pixel herunterskaliert (Auflösung des Favicons im Browser) eher schlecht aus. Also habe ich erst einmal runterskalierte Varianten der Katze erstellt, indem ich die SVG-Datei gerendert und manuell nachkorrigiert habe, z.B. für 32×32 Pixel:

Besser, aber löst noch nicht das Problem mit dem transparenten bzw. weißen Hintergrund und ist nur für kleine Auflösungen gut. Für größere Auflösungen brauchten wir weiterhin die SVG-Datei. Oh, und Firefox for Android unterstützt als einziger halbwegs gängiger Browser keine SVG-Favicons. Ich benutze den zwar selber, dachte mir aber: Ein Favicon, das fast überall funktioniert ist besser als keins. Und irgendwann wird dieser Browser das ja auch unterstützen.

An diesem Punkt habe ich angefangen, eine kleine Showcase-Seite (die nicht mehr online ist) zu erstellen, die verschiedene Varianten des Favicons vor verschiedenen Hintergründen zeigt. Zunächst nur schwarz und weiß, später auch verschiedene Grauschattierungen. So bin ich auch auf die verschiedenen Merkwürdigkeiten mit CSS-grau gekommen.

Gut, also wenn der Hintergrund transparent bleiben soll, mache ich halt einen weißen Rahmen um die Katze und weiße Flächen für alle Aussparungen innerhalb der Katze:

Mist. Natürlich ist dann auch zu den Augen hin ein weißer Rand. Das sieht nicht gut aus. Also neuer Versuch: Ich nehme die Winkekatze, kopiere sie, entferne die Aussparungen aus dem Pfad, vergrößere sie ein bisschen und färbe sie weiß. Dann lege die die Augen und die schwarze Katze (zentriert) darüber:

Dann musste ich noch das Firefox-for-Android-Problem lösen. Dafür habe ich eine gerenderte Version als Alternative hinzugefügt. Im HTML-Code verweise ich dann auf beide Varianten mit Größen- und Dateiformathinweisen:

<link rel="icon" type="image/webp" sizes="192x192" href="favicon_192.webp">
<link rel="icon" type="image/svg+xml" href="favicon.svg">

Das funktioniert, auf allen (getesteten) Browsern wird ein Favicon dargestellt. „Aber was ist mit den Pixelvarianten?“, höre ich euch fragen. Nun: Ich habe versucht, die Pixelvarianten auch hinzuzufügen. Das ist aber leichter gesagt als getan: Zwar kann ich einfach zwei weitere passende <link>-Elemente für die Pixelvarianten hinzufügen, aber die Browser… ignorieren die einfach. Sobald eine SVG-Datei da ist, wird immer die SVG-Datei genommen. Selbst wenn ich der explizit eine Größe zuordne. Der Browser sagt: „Hey, für die SVG-Variante muss ich dann insgesamt für alle Größen nur eine Datei laden, also nehme ich die“ und er nimmt sie. Auch wenn es für kleine größen handoptimierte Varianten gibt, die besser aussehen.

Immerhin hat diese Variante dann endlich alle zufrieden gestellt, der PR wurde gemerged und wir haben Favicons für die Winkekatzenseite.

Ich habe ja nicht mehr sooo viel übrig für Aprilscherze. Auf jeden Fall darf ein Aprilscherz keine ernsten Themen behandeln, die jemand für echte Informationen halten darf. Und in Online-Resourcen muss das spätestens am 2. April aufgeklärt werden, denn oft schaut man nicht, an welchem Datum ein Artikel veröffentlicht wurde. Früher habe ich mal Aprilscherze auf diesem Blog gemacht, aber habe das nie ganz durchgezogen. Meist war ich sowieso im Urlaub und konnte mich nicht darum kümmern.

Manche Aprilscherze finde ich hingegen ganz lustig. So wie zum Beispiel als Fefe eine simulierte Cloudflare-Seite vor sein Blog geschaltet hat (obwohl er doch immer so über Cloudflare schimpft). Ich selber habe schon einmal mein Blog verschmutzt. Und grundsätzlich mag ich visuelle Aprilscherze auf meinem Blog ganz gerne und falsche Artikel eher nicht.

Dieses Jahr habe ich mal wieder einen Aprilscherz geschaltet, beende ihn aber jetzt, gegen 21:00 Uhr wieder, weil er mein Blog einfach unbenutzbar macht. Ich glaube, ich hatte ihn vor ein paar Jahren (2020 oder 2021) schon einmal, hatte damals wenn dann aber nicht darüber geschrieben. Für die Zukunft: Mein Blog sah heute so aus:

Gemacht habe ich das mit diesem simplen CSS-Schnipsel:

@keyframes wiggle {
    from {
        transform: rotate(1deg);
    }
    to {
        transform: rotate(-1deg);
    }
}

p, h1, h2, h3, h4, h5, h6, ol, ul, pre, article footer {
    animation-duration: 0.25s;
    animation-name: wiggle;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

Ich wohne jetzt seit gut zwei Jahren in Witten, und über eine Sache wollte ich schon länger mal schreiben. In Witten stehen nämlich Figuren wie diese hier herum:

Speziell diese beiden stehen am Eingang zum Park an der Ruhrstraße. Und solche Figuren sieht man hier an verschiedenen Stellen. Keine heroischen Kaiser zu Ross, keine berühmten Menschen, nicht einmal so etwas für das Ruhrgebiet Markantes wie die Bergleute in der Waschkaue auf dem Kaiser-Otto-Platz in Steele. Nein, einfach ganz generische Menschen. Aber in Farbe.

Es handelt sich um Alltagsmenschen, Betonfiguren aus einem Wittener Atelier. Die Künstlerinnen machen das jetzt wohl schon seit dreißig Jahren und stellen die überall in Deutschland aus, aber in Witten sieht man sie natürlich besonders häufig. Also habe ich mich auf den Weg gemacht, um noch ein paar von ihnen zu fotografieren. An der ersten Stelle, an die ich mich erinnern konnte, wo Figuren standen, fand ich aber nur das hier:

Das war vor der Sparkasse. Hier standen früher immer eine ganze Warteschlange von Alltagsmenschen. Immerhin: In der Sparkasse stand noch eine Figur. Während die meisten der Figuren annähernd lebensgroß sind, ist diese hier größer:

Gegenüber der Sparkasse steht dann noch ein Paar:

Und vor der Polizei steht dann natürlich ein Polizist, in der alten Uniform (ich fand die alten Uniformen irgendwie schöner).

Das erste Mal habe ich im Podcast „Methodisch Inkorrekt“ von IKEAs „Skådis“-System gehört. Das ist ein System bestehend aus einer Wandplatte mir senkrechten Schlitzen und einem großen Angebot an verschiedenen Elementen, die man in die Schlitze einhängen kann. Was mich aber besonders interessiert hat: Es gibt in er Makerszene eine gewissen Fangemeinde, und man findet bei den üblichen Seiten für 3D-Druck-Vorlagen eine Menge zusätzlicher Elemente, die man dort einhängen kann.

Ich habe das System auch bei einem Freund in der Küche gesehen. Als ich mir dann letztes Jahr einen Hobbyarbeitstisch mit Lötstation eingerichtet habe, schien mir das das richtige System, um Werkzeuge, die man häufiger mal braucht, unterzubringen. Ich habe mir ein Starterpaket bersorgt und mir auf dem 3D-Drucker meiner damaligen Professorin ein paar zusätzliche Teile ausgedruckt. Einige davon leuchten sogar im Dunkeln:

Da ist noch Luft nach oben für mehr. Wie komme ich jetzt darauf? Hier hat jemand eine Garderobe mit Skådis gebastelt, auch mit selbstgedruckten Haken.

Heute beim Brötchenholen entdeckt: In einem Lichtschacht zu einem Kellerfenster wachsen nicht nur irgendwelche Pflanzen, sondern tatsächlich kleine Bäume:

Die Bäume sind knapp über dem Lichtschachtgitter abgetrennt, vermutlich, weil da ständig Leute herlaufen. Ich habe auch noch eine Nahaufnahme, weil man auf dem ersten Bild nicht sieht, dass es wirklich ein Bäumchen ist:

Ich war heute nach etwa 15 Jahren mal wieder im Labor. Irgendwie ist das gegen Ende meines Studiums eingeschlafen, dann bin ich nach Hamburg gezogen… jetzt bin ich schon seit zwei Jahren wieder in der Gegend, aber erst heute habe ich mich mal dazu aufraffen können, in das Labor zu gehen. Zur Erinnerung: Das Labor e.V. ist ein Hackspace in Bochum.

Ich habe mich irgendwie vorher nicht getraut, zurückzugehen. Heute war aber Internationaler Tag des offenen Hackspace und spring(); break;. Also ein guter Anlass mal zurückzukehren und daraus hoffentlich wieder eine Gewohnheit werden zu lassen.

Ich habe mich mit ein paar Leuten nett unterhalten. Ein Laborant hat mir geholfen, den losen Draht an der Spule meiner Winkekatze festzulöten (der Arm lahmt aber immer noch). Außerdem gab es einen kleinen Workshop zum Spleißen von Glasfasern (nicht, dass ich erwarte, das jemals zu machen) und einen Vortrag von jemandem, der anhand einer Veröffentlichung des Bundesamts für Verfassungsschutz herausfinden konnte, welchen Instragram-Account der Verfassungsschutz verwendet, um linken Gruppen zu folgen.

Alles in allem ein schöner Nachmittag, und ich nehme mir fest vor, mal wieder häufiger zum Labor zu gehen.