Email-Adressen per CSS vor Spam schützen

Verfasst am 15. September 2010, mittags.

Wer seine E-Mail-Adresse öffentlich ins Internet setzt, muss nicht lange auf ersten Werbemüll im Postfach warten. Manchmal ist man jedoch gezwungen, es trotzdem zu tun.

Ein simples, aber recht effektives Mittel ist es dann, die Adresse zu verfremden: meinname{bei}andwil{punkt}de dürfte bereits von den meisten Adress-Crawlern nicht mehr als Email-Adresse erkannt werden.

Weil’s doof aussieht, kann man {bei} und {punkt} per CSS durch ihre normalen Zeichen ersetzen. Dies wird dann nur im Browser gerendert; Bots kriegen lediglich die verfremdete Adresse zu Gesicht.

Hier der HTML-Schnipsel:

<span class="email">meinname<span class="at">{bei}</span><span class="domain">andwil</span><span class="dot">{punkt}</span>de</span>

Sieht etwas wuchtig aus, ist aber keine große Sache. Hinzu kommt dann CSS:

.email .at, .email .dot {
  display: none}

.email .domain:before {
  content: "@"}

.email .domain:after {
  content: "."}

Damit werden {bei} und {punkt} ausgeblendet; vor und hinter den Domain-Abschnitt (hier: „andwil“) werden @ und Punkt gesetzt.

Zur Verdeutlichung habe ich mal eine kleine Demo-Seite gebaut. Dort dürfte man erkennen, wie simpel das Ganze ist.

Kleines Problem: Der InternetExplorer unterstützt erst seit Version 8 die Pseudo-Elemente :before und :after. Per Conditional Comments sorgen wir dafür, dass {bei} und {punkt} einfach normal dargestellt werden:

<!--[if lt IE 8]>
  <style type="text/css">
    .at, .dot { display: inline }
  </style>
<![endif]-->

Kryptische Email-Adressen findet man überall im Netz, deshalb dürfte der Workaround kein Problem darstellen.

Der einzige Nachteil, der mir neben der <span>-Suppe bisher aufgefallen ist: Bei Copy&Paste werden {bei} und {punkt} in die Zwischenablage übernommen. Das kann möglicherweise für Verwirrungen sorgen.

Wem diese Anleitung nicht präzise genug ist, mag vielleicht einfach einen Blick in den Quellcode der genannten Demo-Seite werfen.

Schlagwörter: codeschnipsel, css, html, nützliches

Außerdem: kommentieren | weitersagen

Firefox-Entwickler stopfen altes CSS-Leck

Verfasst am 31. März 2010, abends.

Das Aus für mein History-Schnüffel-Skript ist besiegelt. :-(

… zumindest für Firefox-Benutzer. Wie heise berichtet, haben sich die Entwickler um das Datenleck gekümmert, das durch CSS besteht und jedem Webseitenbetreiber theoretisch Rückschlüsse auf zuvor vom Nutzer besuchte Seiten erlaubt.

Wie der Trick funktioniert(e), erklärte ich bereits in der Beschreibung für die oben genannte Schnüffelseite. Ich fasse dennoch kurz zusammen:
Der neugierige Webseitenbetreiber präpariert eine Internetseite mit Links auf verschiedene Internetseiten. Browser sind dabei in der Lage, bereits besuchte Links anders zu formatieren; häufig werden nicht geklickte Links blau und besuchte Links violett dargestellt – Gestalter können diese aber ganz nach Belieben formatieren. So ist es auch möglich, eigene Hintergrundbilder nur für besuchte Links einzubinden und genau da liegt das Problem: Man muss als Hintergrundbild nicht zwingend ein .png, .jpg oder .gif angeben, es tut auch bspw. eine präparierte PHP-Datei, die beim Laden etwa einen Eintrag in die Datenbank des „Datendiebs“ schreibt.

Die Firefox-Entwickler schieben dieser gestalterischen Freiheit jetzt jedoch einen Riegel vor. Auszug aus dem Mozilla Security Blog:

Visited links can only be different in color: foreground, background, outline, border, SVG stroke and fill colors. All other style changes either leak the visitedness of the link by loading a resource or changing position or size of the styled content in the document, which can be detected and used to identify visited links.

Es beruhigt mich durchaus ein wenig, dass man sich um diese Problematik kümmert. Heise berichtete bereits 2007 darüber und im Bug-Tracker von Mozilla wurde schon im Jahr 2000 erstmals auf das Problem hingewiesen.

Ich werde die Sache mal weiterhin beobachten und wieder testen, wenn der angepasste Firefox in Repositories von Arch Linux aufgetaucht ist. Außerdem bin ich gespannt, wie vielen Internetseiten man diese neue gestalterische Einschränkung ansehen wird und ob andere Browser nachziehen.

Schlagwörter: css, datenschutz, firefox, projekte

Außerdem: kommentieren | weitersagen

Neues Projekt online

Verfasst am 30. Januar 2010, zur Kaffeezeit.

„Ich weiß, was du letzten Sommer getan hast!“ – oder zumindest, wo du dich im Internet herumgetrieben hast.

In den letzten Tagen habe ich kein kleines PHP-Skript geschrieben, das anhand der Seitenbesuche eines Benutzers ihm dazu passende Eigenschaften verpasst:

Besuche auf „Social Networks“ werden genauso erkannt, wie Zugriffe auf Schmuddelseiten. Wie das Ganze genau funktioniert, kann man in der Projekt-Beschreibung nachlesen. Ausprobieren kann man’s hier:

http://stalker.andwil.de

Keine Sorge, mir liegt Datenschutz sehr am Herzen – deshalb wird auch nichts dauerhaft protokolliert.

Mit einer frisch geleerten Browser-Chronik ist die Ausgabe des Skripts recht übersichtlich, bitte nicht wundern. Außerdem macht die Firefox-Erweiterung NoScript in ihrer aktuellen Version etwas Probleme: Der Button, um das Skript aufzurufen, ist ausgegraut und lässt sich daher nicht klicken. Warum das so ist, ist mir noch nicht ganz klar – vermutlich sehe ich nur wieder den Wald vor lauter Bäumen nicht. ;-)

Vorsichtige NoScript-Nutzer können sich das Projekt allerdings mit einem anderen Browser und deaktiviertem JavaScript problemlos ansehen. Alternativ kann man sich natürlich mit einem Blick in den übersichtlichen Quelltext davon überzeugen, dass kein schadhafter JS-Code ausgeführt wird.

Die grundsätzliche Funktion des Skripts wird ohnehin allein durch PHP und CSS realisiert. Wie das genau funktioniert, findet sich wie gesagt in der Projekt-Beschreibung.

Für Anmerkungen und verbesserungsvorschläge bin ich wie immer offen!

Schlagwörter: browser, css, datenschutz, php, projekte

Außerdem: kommentieren | weitersagen