Anleitung: Test-Seite mit .htaccess schützen

Dieser Artikel ist ursprünglich am 30. 07. 2014 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr aktuell.

Eine Webseite, die noch im Aufbau ist, soll nicht jeder sehen können. Erst wenn alles fertig ist, soll die Seite für alle Besucher und Suchmaschinen sichtbar werden. Auf diese Weise kann man in Ruhe arbeiten und sich mit Kunden und Kollegen abstimmen.

Eine einfach Möglichkeit, eine Seite mit einem „Sichtschutz“ zu verpassen, ist eine Coming-Soon-Seite davor zu schalten. Dafür gibt es viele gute Plugins bei wordpress.org.
Damit ist die Seite vor unbefugten Blicken abgeschirmt. Wer Zugangsdaten zum WordPress-Backend hat, kann sich anmelden, alle anderen sehen nur die Coming-Soon-Seite.

Nachteil: Der Umweg über das Backend

Die Coming-Soon-Seite hat jedoch einen Nachteil: Nach der Anmeldung landet man im Backend. Für Laien ist das sehr irritierend, sie verstehen nicht, wo sie sich befinden.
Update: Es sei denn, man kombiniert den Link zur Seite mit einem redirect Parameter. (s. Kommentar von Torsten)

Wenn es also nur darum geht, dass eine Seite vor fremden Blicken geschützt wird und die Besucher gleich im Frontend landen sollen (ohne Umweg übers Backend), dann bietet sich ein anderer, klassischer Weg an: Das Abschirmen der Seite per .htaccess.

Die Konfiguration von .htaccess-Dateien ist nicht ohne, man kann viel falsch machen. Gott sei Dank gibt es aber komfortable Tools, die einem die Arbeit erleichtern. Zum Beispiel die Seite von Andres Gehrke mit der URL www.htaccesstools.com

Schritt für Schritt zum .htaccess-Schutz

[white_box]Achtung: Ihr braucht für die folgenden Arbeiten einen FTP-Zugang zu Eurem Server und ein FTP-Programm. Ein WordPress-Zugang reicht nicht aus.[/white_box]

Um ein Verzeichnis – in unserem Fall die WordPress-Installation mit der Testseite – per .htaccess zu schützen, braucht man zwei Komponenten:

  1. eine .htaccess-Datei
  2. eine .htpasswd-Datei, in der das Passwort verschlüsselt wird

Schritt 1: Die Datei .htpasswd generieren

Als erstes legt Ihr bei www.htaccesstools.com einen Usernamen und ein Passwort fest. Das sind die Zugangsdaten, die Ihr an Eure Kollegen oder Kunden weitergeben könnt. Sie können sich damit anmelden und die Seite sehen.
Bitte notiert Euch das Passwort und den Username.

Bildschirmfoto 2014-07-30 um 10.39.36
Wenn Ihr auf den Button „Create .htpasswd file“ klickt, erscheint ein Fenster mit einer Codezeile. Diese Codezeile bitte in die Zwischenablage kopieren.

Danach öffnet Ihr einen Textdeditor (NICHT Word, sondern Textmate, Notepad o.ä.), erzeugt eine neue Datei und kopiert die Zeile in die leere Datei. Die Datai speichert Ihr anschließend unter dem Namen „htpasswd“ . Später kommt noch ein Punkt vor den Dateinamen, den lassen wir aber erst Mal weg, sonst wird die Datei unsichtbar.

Schritt 2: Die Datei htpasswd hochladen

Die Datei htpasswd ladet Ihr jetzt per FTP auf Euren Server. Die Datei muss in dem Verzeichnis liegen, das geschützt werden soll, also in unserem Fall in das das Root-Verzeichnis Eurer WordPress-Installation. Ist die Datei hochgeladen, setzt Ihr bitte einen Punkt vor den Dateinamen. Die Datei heißt jetzt also .htpasswd.

Schritt 3: Den Code für die .htaccess erzeugen

Dazu denkt Ihr Euch einen Namen für Eure Seite aus, ich habe mal Testseite in das erste Feld reingeschrieben:

Bildschirmfoto 2014-07-30 um 10.29.27

Jetzt wird es spannend, das Tool will nämlich den Pfad zur .htpasswd wissen.
Wer sich mit seinem Server auskennt, weiss den Pfad. Für alle anderen hat Andreas eine kleine Datei namens „fullpath.php“ geschrieben. Ich hab das mal in eine php-Datei gepackt, die Ihr hier herunterladen könnt: fullpath.php.

Diese Datei ladet Ihr per FTP in das Verzeichnis, in dem bereits die Datei .htpasswd liegt. Dann ruft Ihr die Datei über den Browser (www.name-eurer-seite.de/fullpath.php) auf und violà, es erscheint der Pfad, den Ihr eingeben müsst. Bitte diesen Pfad kopieren und in die Maske oben bei .htpasswd File Location einsetzen.

Wenn Ihr jetzt auf den Button Create .htaccess file klickt, erscheint wieder ein Code-Schnipsel. Den bitte in die Zwischenablage kopieren.

Schritt 4: Code in die .htaccess eintragen

Fast fertig, jetzt kommt der letzte Schritt.
Wenn Ihr mit WordPress arbeitet, findet Ihr in Eurem WordPress-Verzeichnis bereits eine .htaccess-Datei. Bei der Installation von WirdPress wird diese Datei automatisch angelegt.
Den Code, den Ihr in die Zwischenablage kopiert habt, müsst Ihr in die .htaccess- Datei eintragen.

Dazu öffnet Ihr in Eurem FTP-Programm die Datei .htaccess auf dem Server und kopiert den Code, den Ihr gerade erzeugt habt, dort hinein. Und zwar nach der Zeile #END WordPress.

Das sieht dann etwa so aus:

# BEGIN WordPress

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php
</IfModule>

# END WordPress

AuthType Basic
AuthName "Testseite"
AuthUserFile /xxxx/xxxxx/.htpasswd
Require valid-user

 

Geschafft!

Wenn Ihr jetzt die URL Eurer Testseite aufruft, müsste sich ein kleines Fenster öffnen, das nach den Zugangsdaten fragt.
Wenn Ihr Usernamen und Passwort eintragt, werdet Ihr auf die Seite weitergeleitet.
Niemand, der diese Zugangsdaten nicht kennt, kann die Seite sehen. Das gilt für menschliche Besucher genauso wie für die Robots von Suchmaschinen.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

5 Kommentare zu “Anleitung: Test-Seite mit .htaccess schützen

  • Nach der Anmeldung landet man im Backend.

    Nicht zwangsläufig. Mit dem „redirect_to“-Parameter kann man auch wieder auf die Startseite umleiten lassen:

    http://example.de/wp-login.php?redirect_to=http%3A%2F%2Fexample.de%2F

    Dann muss der Kunde nur dieses Lesezeichen benutzen.

    • Hm. Aber heisst das nicht, dass dann alle beim Frontend landen? Also wenn man admin ist, landet man auch dort, oder? Und müsste sich dann über den Umweg über die Statusleiste wieder ins Dashboard bewegen.
      Quatsch – es ist ja nur ein Link. *pling* Groschen gefallen

  • Das ist ein Weg. Es gibt aber einen Komfortableren. Ich richte für den Kunden einen Abonnenten-Zugang ein und nutze WPMaintence Mode. Der Kunde kann sich nun einloggen und wird auf das Frontend weitergeleitet ohne jemals mit dem Backend in Berührung zu kommen.

    • Elisabeth 3. August 2014

      Danke für Deinen Kommentar, es stimmt, das ist eine sehr einfache und effektive Methode.
      Den Gedanken hatte ich auch schon. Aber den WPMaintainence Mode kann man nicht beeinflussen, man muss Text und Gestaltung nehmen, wie’s ist. Deshalb hab ich nicht weiter in die Richtung gedacht.

      • Christian 11. August 2014

        > Aber den WPMaintainence Mode kann man nicht beeinflussen,
        > man muss Text und Gestaltung nehmen, wie’s ist.

        Das stimmt so aber nicht :)
        Es gibt ein Popup-Menu ‚CSS-Style‘. Darin kann man ein Dutzend vorgegebene Designs auswählen oder eine eigene CSS-Datei benennen.
        Zudem kann man in 4 Inputfeldern freie Texte eingeben. Und man kann für verschiedene Rollen (Admin, Abonnent, etc.) festlegen, wer ins Frontend und wer ins Backend darf.
        Das Plugin zusammen mit „Peter’s Login Redirect“ von Peter Keung – mehr braucht man nicht, um det janze sehr komfortabel und benutzerfreundlich einzurichten.

Die Kommentare sind geschlossen.