zurück zum Artikel

Ich zeig dir, dass du was nicht siehst

| Johannes Endres

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.

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. ()


URL dieses Artikels:
https://www.heise.de/-1153404