Eine Website ohne Cookie-Banner

Wenn du diese Seite öffnest, springt dir kein Banner ins Gesicht. Kein „Wir respektieren deine Privatsphäre“ mit drei Knöpfen, von denen nur einer leuchtet. Das ist kein Versehen, sondern Absicht. Hier erzähle ich, was dafür nötig war.

#Warum gibt es überhaupt Cookie-Banner?

Kurz gesagt: Eine Website darf ohne deine Einwilligung nichts auf deinem Gerät speichern oder auslesen, außer es ist für die Funktion, die du willst, unbedingt nötig. In Deutschland steht das in § 25 TDDDG. Sobald Daten an Dritte gehen, kommt dazu noch die DSGVO.

Das heißt im Umkehrschluss: Ein Banner braucht nur, wer Dinge tut, die eine Einwilligung brauchen. Tracking, Werbung, eingebettete Inhalte von fremden Servern. Wer das alles weglässt, braucht auch kein Banner.

Klingt banal. Die Arbeit steckt im Detail, denn viele Seiten laden Drittanbieter, ohne dass es dem Betreiber bewusst ist.

#1. Kein Tracking, keine Analyse

Der einfachste Schritt: Ich habe kein Google Analytics, kein Matomo, kein Plausible eingebaut. Ich weiß ehrlich gesagt nicht, wie viele Leute hier mitlesen. Und das ist okay.

Die Server-Logs gibt es trotzdem, weil ein Webserver ohne sie nicht vernünftig betrieben werden kann. Sie werden aber nicht ausgewertet und nach spätestens sieben Tagen gelöscht.

Es kann natürlich sein, dass ich mir irgendwann denke: „Ja komm, ich will schon wissen, wie viele hier mitlesen.“ Dann baue ich vielleicht Matomo oder etwas Ähnliches ein. Und dann bräuchte es wahrscheinlich auch wieder ein Banner.

#2. Schriften selbst hosten

Das ist der Klassiker. Google Fonts per <link> einzubinden ist bequem, aber dabei baut der Browser eine Verbindung zu Google auf und überträgt deine IP-Adresse. Genau das hat 2022 eine ganze Abmahnwelle ausgelöst.

Auf TheMace.de liegen alle Schriften auf dem eigenen Server. Ein kleines Skript im Build (lib/fonts.js) holt sich Archivo, Inter, JetBrains Mono und Fraunces aus den Fontsource-Paketen von npm, kopiert die Dateien nach dist/fonts/ und erzeugt eine passende fonts.css.

Dabei gleich ein paar Optimierungen:

• Nur Latin und Latin-Extended. Kyrillisch, Griechisch und Vietnamesisch brauche ich hier nicht, also werden sie gar nicht erst ausgeliefert.
• Variable Fonts. Eine Datei pro Schrift statt einer pro Schriftschnitt.
• Preload für die beiden Schriften, die sofort sichtbar sind, damit nichts flackert.

#3. Keine eingebetteten Inhalte

Kein YouTube-Video, keine Twitter-Timeline, kein Discord-Widget, keine Karten von Google Maps. Jedes dieser Embeds lädt Code von fremden Servern und braucht damit eine Einwilligung.

Stattdessen gibt es ganz normale Links. Auf GitHub, Discord und Co. landest du nur, wenn du selbst klickst. Erst ab dann gelten deren Regeln.

#4. Alles vom eigenen Server

Auch sonst kommt nichts von außen: Kein CDN für JavaScript, keine Icon-Fonts, keine externen Bilder. CSS wird im fertigen Build sogar direkt ins HTML eingebettet. Das ist gut für den Datenschutz und nebenbei auch schneller.

Prüfen kannst du das selbst: Öffne die Entwicklertools (F12), wechsle zum Tab Netzwerk und lade die Seite neu. Jede Anfrage sollte an themace.de gehen.

#5. Und was ist mit dem Dark Mode?

Eine Ausnahme gibt es: Wenn du oben zwischen hell und dunkel wechselst, merkt sich die Seite das im localStorage deines Browsers.

try { localStorage.setItem('theme', next); } catch (e) {}

Das ist erlaubt, weil es genau die Funktion ist, die du gerade angeklickt hast. Ohne Speichern würde die Seite deine Wahl beim nächsten Aufruf vergessen. Der Wert bleibt auf deinem Gerät und wird nie an den Server geschickt. Gespeichert wird übrigens nur, wenn du selbst umschaltest.

#Bonus: E-Mail-Adressen verstecken

Mit Cookies hat das nichts zu tun, aber es gehört zum selben Gedanken: Ich möchte dich nicht ausspionieren, und ich möchte selbst nicht zugespammt werden. Deshalb stehen E-Mail-Adressen nicht im Klartext im HTML. Ein Schritt im Build kodiert sie, und erst im Browser werden sie wieder zu einem klickbaren Link. Für Menschen ändert sich nichts, Bots, die nur den Quelltext durchsuchen, finden nichts.

#Fazit

Eine Seite ohne Cookie-Banner ist kein großes Projekt. Es ist eher eine Reihe von Dingen, die man nicht macht:

• kein Tracking
• keine Schriften, Skripte oder Bilder von fremden Servern
• keine Embeds

Was übrig bleibt, ist eine schnelle Seite, eine kurze Datenschutzerklärung und Besucher, die einfach lesen können, ohne vorher etwas wegzuklicken.