Ich zeig dir, dass du was nicht siehst

Im nächsten Jahr steht für die meisten Webseiten die Einführung von IPv6 an. Doch ausgerechnet der zusätzliche Kommunikationsweg kann dazu führen, dass einige wenige Internet-Surfer die Seite gar nicht mehr erreichen. Eine automatische Warnung an die Betroffenen tut not. Und der dabei nötige kleine Webdesign-Trick lässt sich auch für ganz andere Dinge nutzen.

In Pocket speichern vorlesen Druckansicht 25 Kommentare lesen
Lesezeit: 6 Min.
Von
  • Johannes Endres

Die Deutsche Telekom und einige weitere Provider führen 2011 IPv6 für ihre Internetzugänge ein. Für die Betreiber von Webseiten wird es daher Zeit, sich Gedanken zu machen, wie sie ihre Server darauf einstellen. Vorläufig bedeutet das den Parallelbetrieb mit dem alten IPv4 und dem etwas neueren IPv6. Dummerweise kann dieser Dual-Stack-Betrieb einige Nutzer von der Webseite ausschließen. Denn durch Fehler in Programmen, Betriebssystemen und Routern kann es sein, dass der PC eine IPv6-Verbindung versucht, obwohl er nur per IPv4 ins Netz kommt. Obwohl der Webmaster also nichts dafür kann, fällt das Problem auf ihn zurück, wenn seine Seite für manche unsichtbar bleibt.

Denn das Tückische ist, dass die betroffenen User eine Dual-Stack-Seite gar nicht mehr erreichen, man also als Betreiber auch keine hilfreiche Fehlermeldung zeigen kann. Es empfiehlt sich daher, schon einige Zeit vor dem Aufschalten von IPv6 eine Warnung zu zeigen und zu erklären, was zu tun ist, nämlich IPv6 auf dem PC abschalten. Doch diese Meldung sollten nur die wenigen Betroffenen zu sehen bekommen, um die anderen nicht mit technischen Details zu verunsichern, die sie nicht interessieren müssen.

Der nötige Webdesign-Trick ist ganz einfach: Man baut die Warnung immer in die per IPv4 erreichbare Seite ein und blendet sie dann mit Hilfe eines Elements wieder aus, das von einem Dual-Stack-Server kommt. Die User mit Dual-Stack-Problemen erreichen diesen Server nicht und bekommen daher auch das Ausblendelement nicht – die Warnung bleibt sichtbar.

Unser Server www.heise.de läuft seit Oktober 2010 im Dual-Stack-Betrieb, sodass PCs mit Dual-Stack-Problemen ihn nicht erreichen. Die in den folgenden HTML-Schnipseln vorkommenden URLs funktionieren genau wie abgedruckt, weil wir die nötigen drei Dateien auf www.heise.de bereitstellen.

Für die Umsetzung gibt es verschiedene Möglichkeiten, von denen wir hier drei vorstellen. Die einfachste Methode ist, ein vom Dual-Stack-Server geladenes Bild mit einem Alternativ-Text zu versehen. Den folgenden Schnipsel bauen Sie dazu in die nur per IPv4 erreichbare Seite ein:

<img src= "http://www.heise.de/extras/netze/heise-dual-stack-test.gif" 
alt="Sie werden ab dem 1.4.2011 Probleme bekommen, uns zu erreichen."
width= "500" height= "100">

Betroffene erreichen zwar die IPv4-Seite, die diesen Code enthält, aber nicht www.heise.de. Damit fehlt ihnen das eingebundene Bild und stattdessen bleibt der Alt-Text stehen. Die Größenangaben sind nötig, weil Webkit-Browser wie Safari und Chrome den Alt-Text nur zeigen, wenn dafür genügend Platz ist.

Ein kleiner Webdesign-Trick blendet eine Warnung ein, wenn durch Netzwerkfehler Elemente einer Seite fehlen.

Das ist sehr einfach und funktioniert sogar für Browser, die weder JavaScript ausführen noch CSS interpretieren. Allerdings kann der Alt-Text kein HTML enthalten, sodass er sich nicht gestalten oder verlinken lässt. Für einen echten Warnhinweis ist das wohl zu wenig.

Daher setzt die zweite Methode auf CSS. Dabei kommt die Warnung in ein div-Element, das durch ein bisschen nachgeladenes CSS ausgeblendet wird. In der HTML-Datei sieht das ungefähr so aus:

<head>
<link rel="stylesheet" type="text/css"
href="http://www.heise.de/extras/netze/heise-dual-stack-test.css">
</head>
<body>
<div class="heise-dual-stack-test">
Sie haben ein IPv6-Problem,
lesen Sie <a href="...">hier</a> mehr dazu.
</div>

Die nachgeladene CSS-Datei, die eventuell einem Dual-Stack-Problem zum Opfer fällt, enthält nur die Formatierung zum Ausblenden aller Elemente der CSS-Klasse heise-dual-stack-test:

.heise-dual-stack-test {
display:none;
}

Diese Lösung funktioniert in den meisten Browsern und kommt ohne JavaScript aus. Allerdings erlaubt JavaScript wesentlich dramatischere Warnungen. Die JavaScript-Datei auf dem Dual-Stack-Server enthält diesmal nur eine Variablendefinition:

var heise-dual-stack-test = true; 

In der Seite prüft nun eine einfache Abfrage, ob diese Definition geladen wurde. Wenn das nicht der Fall ist, ist der Typ der Variable nicht definiert.

<script type="text/JavaScript"
src="http://www.heise.de/extras/netze/heise-dual-stack-test.js">
</script>
<script type="text/JavaScript">
if( typeof( heise-dual-stack-test) == "undefined"){
window.location.href = '/dual-stack-erklaerung.html';
}

Die Umleitung auf eine erklärende Seite ist eine sehr heftige Maßnahme. Aber dank JavaScript stehen Ihnen alle anderen Möglichkeiten des Webdesigns offen.

Dieselbe Technik lässt sich auch für ganz andere Einblendungen nutzen. Wer seine Site mit Werbung finanziert, möchte vielleicht die Benutzer von Adblockern auf die dadurch entstehende Lücke im Portemonnaie hinweisen. Dazu legt er das JavaScriptchen unter einer URL ab, auf die Adblocker ansprechen, etwa /ads/advert.js. Erfahrungsgemäß blockieren viele Filterlisten das Nachladen von CSS nicht, sondern ändern nur nachträglich das Layout. Bei solchen Filtern verschwindet der Hinweis trotz aktiven Adblockers. JavaScript-Dateien haben daher die beste Chance, wirklich blockiert zu werden.

In segmentierten Netzen sollen oft die Buchhalter nicht an die Produktionsserver kommen oder umgekehrt. Firewalls versperren dann den Weg zu den Servern der anderen Abteilungen. Da ist es ein netter Service für die Anwender, auf der Intranet-Startseite die Links auszublenden, die sie ohnehin nicht erreichen können. Dazu legt man ein CSS- oder JavaScript-Schnipselchen auf den eventuell blockierten Server. Es sollte dann andersherum funktionieren, also diejenigen Elemente einblenden, die nur sinnvoll sind, wenn der Server erreichbar ist. Das ist natürlich kein Sicherheits-Feature, sondern verbessert nur die Benutzbarkeit der Seite, die auf diese Weise keine scheinbar toten Links mehr enthält. ()