WordPress mit Zwei-Faktor-Authentifizierung schützen

2. Februar 201925. März 2019Webwiese

Die Zwei-Faktor-Authentifizierung (2FA) ist für WordPress eine relativ einfache Möglichkeit, um einen unerlaubten Zugriff auf Benutzer-Konten zu erschweren. Es existieren verschiedene Varianten dieses zusätzlichen Schutzes, die ich in diesem Beitrag vorstellen und vergleichen möchte.

Warum sollte ich WordPress vor Hackern schützen!

Immer mehr Websites verwenden WordPress. Damit wird diese Plattform für Hackerangriffe immer attraktiver. Der Code von WordPress ist offen. Schwachstellen und Sicherheitslücken sind mit entsprechendem Wissen leicht gefunden. Diese nutzen Hacker, um in das System von WordPress einzudringen. Ihr Ziel: Sie wollen in den Besitz von Benutzernamen und Passwörtern kommen! Damit das nicht so einfach ist, sollten Sie die Benutzer-Konten zusätzlich absichern.

Was ist eine Zwei-Faktor-Authentifizierung?

Die Zwei-Faktor-Authentifizierung lässt sich am besten mit einem Bild erklären. Stellen Sie sich vor WordPress wäre ein Haus. Dann sind die Benutzer-Konten Türen, durch die Sie ins Haus gelangen. Sie öffnen die Tür, indem Sie den Benutzernamen und das Passwort eingeben. Der Fachbegriff für diesen Anmeldevorgang ist Authentifizierung.

Wenn sie nun ihr WordPress-Haus zusätzlich schützen wollen, können Sie die Türen durch ein zweites Schloss sichern. Das wäre dann der zweite Faktor – also wie ein zweiter Schlüssel! Das Betreten des Systems ist dann nur möglich, wenn jemand im Besitz von beiden Schlüsseln ist.

Welche 2FA-Verfahren gibt es?

Grundsätzlich gibt es verschiedene Verfahren für die Zwei-Faktor-Authentifizierung. Ich beschränke mich hier auf die Möglichkeiten, die WordPress bietet.

Folgende Verfahren stehen als zweiter Faktor für den Schutz der WordPress-Konten zur Verfügung:

Sie erhalten einen Authentifizierungscode an eine E-Mail Adresse.
Ein Programm (App) auf Ihrem Smartphone generiert ein zeitlich begrenztes Einmalpasswort (z.B. Authy, Google Authenticator etc.)
Sie verwenden ein Hardware-Token (U2F) – z.B. ein USB-Gerät. Zugang zum System ist erst nach Bestätigung – z.B. Knopfdruck – möglich.

Alle Verfahren erfordern ein zusätzliches Gerät oder zumindest ein Email-Konto. Ein Zugang zum Konto ist ohne Gerät nicht möglich. Daher gibt es auch die Möglichkeit, sogenannte Backup-Verifizierungs-Codes zu verwenden. Das ist am besten vergleichbar mit einer TAN-Liste, wie sie im Online-Banking lange Zeit verwendet wurde. Diese Liste mit Einmalpasswörtern kommt im Notfall zum Einsatz.

Welches 2FA-Verfahren ist sicher?

Das sicherste Verfahren ist aktuell (Stand: Februar 2019) der Hardware-Token (U2F). Der Standard hierfür wurde von Google in Zusammenarbeit mit dem Hardware-Hersteller Yubico entwickelt. Die nichtkommerzielle FIDO-Allianz soll Offenheit des Standards garantieren. Sie können einen Hardware-Token für die Registrierung bei mehreren Systemen verwenden. Voraussetzung dafür ist, dass diese den U2F-Standard auch unterstützen.

Hier erfahren Sie, wer welche Verfahren der Zwei-Faktor-Authentifizierung unterstützt!

Die Zwei-Faktor-Authentifizierung in WordPress einrichten

Voraussetzungen:

WordPress-Plugin für die Einrichtung der 2F-Authentifizierung

wahlweise:

Email-Konto
Smartphone (Google Android / Apple IOS) und 2FA-App (z.B. Authy, Google Authenticator)
Hardware-Token (z.B. yubikey), verschlüsselte Website (SSL) und Browser Chrome / Firefox

–> Achtung: nicht alle Browser unterstützen U2F!

Installation (U2F):

Im WordPress Codex befindet sich eine Auswahl von verfügbaren Plugins. Ich habe mich für das Plugin Two-Factor entschieden. Es unterstützt alle beschriebenen Verfahren. Leider ist ein Plugin gleichzeitig auch das grösste Risiko. Es gab bereits Sicherheitslücken in 2FA-Plugins. Daher ist es um so wichtiger, diese (wie alle anderen Plugins auch!) immer aktuell zu halten. Und der Support des Plugins muss garantiert sein.

Ich empfehle zwei Hardware-Schlüssel zu kaufen. So sind Sie bei Verlust nicht ausgesperrt!

Installieren Sie ein Plugin für die Zwei-Faktor-Authentifizierung.
Verbinden Sie Ihren Hardware-Token mit Ihrem Rechner.
Rufen Sie die Benutzer-Seite und wählen Sie bearbeiten für das gewünschte Benutzerkonto.
Klicken Sie am Seitenende auf Neuen Key registrieren.
Damit die Hardware registriert werden kann, müssen Sie jetzt den Vorgang mit Klick am Gerät bestätigen.
Ein neues Gerät erscheint in der Liste und kann mit einen eigenen Namen versehen werden.
Wiederholen Sie den Vorgang für den zweiten Hardware-Token.
Wählen Sie FIDO Universal 2nd Factor (2UF) aus.
Speichern Sie den Benutzer über Profil aktualisieren. Fertig!

Zwei-Faktor-Authentifizierung | Verfahren in WordPress

Anmeldung:

Melden Sie sich jetzt mit Benutzernamen und Passwort für Ihre Website an.
Verbinden Sie Ihren Hardware-Token mit Ihrem Rechner.
Über ein Klick am Gerät bestätigen Sie den Vorgang. Erst dann erscheint die Verwaltungsebene (Backend) von WordPress.

Sie haben noch Fragen? Gerne unterstütze ich Sie bei der Absicherung Ihrer Website! Kontaktieren Sie mich für eine kostenlose Beratung!

Mouseover-Effekte mit CSS

28. November 201420. März 2019Webwiese

Wir hatten Mouseover-Effekte in unserem Adventskalender verwendet und daraufhin mehrfach Anfragen zu deren Funktionsweise bekommen. Das wollen wir zum Anlass nehmen und heute eine kurze Anleitung für die Umsetzung bereitstellen.

Diese Animations-Effekte werden mit der CSS Eigenschaft transition realisiert, die leider im Internet Explorer erst ab der Version 10 unterstützt wird. In älteren Versionen des Internet Explorers werden die Transitions-Effekte ignoriert und die Mouseover-Effekte bleiben ohne Überblendung. Um auch die älteren Browser anzusprechen könnte der Effekt z.B. über jQuery realisiert werden:

$(‘#kalender’).fadeIn();

Mouseover-Effekt bei Bildern (img:hover)

Für unser Beispiel bauen wir uns ein kleines html-Gerüst mit einem div-Container, der unsere Bilder umschließt. Damit können wir den Effekt auf die Bilder im Container beschränken.

1. Nehmen wir an, ihr wollt ein Bild mit einem Mouse-over Effekt versehen. Dann ist der erste Schritt die entsprechenden Formatierungen festzulegen. In unserem Beispiel die Hintergrundfarbe (background-color) und die abgerundeten Ecken (border-radius).

#kalender img:hover {
background-color: #CDCBC7;
border-radius: 70px;
}

2. Damit das ganze ein- bzw. ausgeblendet wird, müssen wir außerdem für das Bild den Transition-Effekt definieren.

#kalender img {
transition-property: border-radius, background-color;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}

Unter transition-property tragen wir die Eigenschaften ein, die den Effekt erhalten. Über transition-duration können wir den Zeitraum bestimmen, in dem ein- bzw. ausgeblendet wird.

Das Verhalten während des Überblendzeitraums wird über die Zeitfunktion transition-timing-funcion gesteuert. Folgende Werte können bestimmt werden:

ease: Der Standardwert beginnt die Überblendung langsam, beschleunigt und endet langsam.
ease-in: Die Überblendung beginnt langsam und endet schnell.
ease-out: Die Überblendung startet schnell und endet langsam.
ease-in-out: Die Überblendung ist in der Mitte am schnellsteb und startet und endet langsam.
linear: Gleichmäßige Überblendung.
cubic-bezier:Die Überblendung wird über vier Werte (x1, y1, x2, y2) gesteuert. Die ersten beiden Angaben bestimmen die Geschwindigkeit am Anfang, der dritte und vierte Wert die Geschwindigkeit am Ende. Alle vier Werte müssen definiert werden.

Und so sieht der Mouseover-Effekt mit den Einstellungen oben aus:

Es lohnt sich mit den Einstellungen zu spielen, um das gewünschte Ergebnis zu erhalten.

Viel Spaß beim Ausprobieren!

Webwerkstatt: Website für Fitness & Ernährung

20. Oktober 2014Webwiese

Wir freuen uns über eine neue Website, die wir nach intensiver und erfolgreicher Arbeit ins Internet stellen konnten. Für unsere Kunden ist es immer ein ganz wichtiger Moment. Denn viel Zeit und Herzblut steckt in der eigene Internetpräsenz. Doch wenn die Internetpräsenz auch für Besucher öffentlich zugänglich ist, fängt die Arbeit erst richtig an.

Mit neuem Logo, Fotos und einem frischen Design ist die Internetseite jetzt auf Smartphones, Tablets und am Rechner zu bewundern. Und in Zukunft kann unser Kunde die Inhalte selbständig austauschen und neue Seiten anlegen. Die Besucher der Internetseite erhalten jetzt ganz viele Informationen rund um gesunde Ernährung und Fitness.

Eine lebendige Website ist eine Herausforderung

Gerade am Anfang sind die Inhalte einer Website eine richtige Herausforderung. Es gibt so viele Dinge zu tun und da bleibt die Aktualisierung der eigenen Website gerne liegen. Wir kennen das aus eigener Erfahrung. Unseren Kunden helfen wir dabei, im wöchentlichen Turnus neue Beiträge aus dem Alltag zu veröffentlichen. Und am Ende der Woche wird die Zeit für eigene Neuigkeiten knapp.

Bleibt nur, uns an die eigenen Regeln zu erinnern und einen festen Termin im Kalender zu verankern. Denn zu berichten gibt es eigentlich immer genug. Ihr seid euch da unsicher? Ihr wisst nicht, was ihr zu berichten habt?

Wie organisiere ich die Pflege an meiner Website?

Vielleicht hilft euch, wenn ihr während der Woche Stichpunkte notiert über Themen und Ereignisse, die euch beschäftigt haben. So kann aus einem interessanten Kundengespräch ein kleiner Beitrag werden, der auch andere Besucher der Website interessiert.

Die Pflege der Inhalte kann auch im Team organisiert werden. Hier braucht es im jedem Fall einen Verantwortlichen der den Hut auf hat und die Ideen und Beiträge aus dem Team sammeln und die Mitarbeiter zur Mitarbeit motiviert.

Ihr habt weitere Fragen zur Pflege der Inhalte der Website oder braucht Unterstützung bei der Gestaltung einer eigenen Webpräsenz? Dann sprecht uns doch einfach an!

Adventskalender mit WordPress erstellen

9. Dezember 20136. November 2022Webwiese

In diessem Beitrag zeige ich euch, wie ihr in sechs Schritten mit WordPress einen einfachen Adventskalender bauen könnt. In den letzten Jahren gab es dafür auch Plugins. Seit WordPress 5 und mit der Umstellung auf den Gutenberg-Editor sind die meisten Adventskalender-Plugins allerdings veraltet. Also habe ich mich hingesetzt und für euch diese Anleitung neu überarbeitet.

Ein Adventskalender bringt Leben auf die Website

Ein Adventskalender muss nicht immer mit Schokolade gefüllt sein. Das Prinzip eignet sich auch hervorragend, um in der Adventszeit die Besucher eurer Internetseiten mit kleinen Überraschungen zu erfreuen.

Für den Adventskalender braucht ihr 24 nette kleine Beiträge, mit denen ihr eure Besucher überraschen wollt. Ihr werdet merken, dass macht riesig Spaß und bringt eure Internetseite auf einfache Weise ins Gespräch. Ganz einfach lässt sich der Adventskalender mit WordPress realisieren.

So erstellt ihr einen Adventskalender mit WordPress

Seite für den Adventskalender

Zuerst braucht ihr die Seite für den eigentlichen Adventskalender. Hier werden 24 kleine Bilder eingebunden, die nachher eure Türchen zum Inhalt des Kalenders sind.

Seite für die geschlossenen Türchen

Als nächstes erstellt ihr eine Seite, die immer dann geöffnet wird, wenn ein Besucher zu neugierig war und in die Zukunft schauen möchte. Schließlich wollt ihr jeden Tag einen neuen Beitrag bereit stellen, den noch niemand kennt. So könnte eine solche Seite aussehen.

Bilder für den Adventskalender

Die Bilder eures Adventskalenders könnt ihr im Gutenberg-Editor von WordPress ganz einfach über den Galerie-Block auf eure Seite stellen.

mit ENTER-Taste neuen Absatz-Block anlegen
auf das Plus-Symbol klicken
Galerie-Block auswählen
Bilder hochladen

Bilder für euren Adventskalender könnt ihr auf Portalen mit unter der Creative-Commons-Lizenz (CC0) freigegebenen Bildern suchen.

Adventskalender - Seite für die geschlossene Türchen — Seite für die noch nicht veröffentlichten Beiträge

Beiträge für den Adventskalender

Prima, das Grundgerüst ist nun fertig! Für die Überraschungen in eurem Adventskalender braucht ihr nun 24 gute Ideen. Dafür könnt ihr wie gewohnt Beiträge erstellen, die dann danach mit den Bildern verlinkt werden.

Ganz einfach geht das, wenn ihr einen Termin zur Veröffentlichung plant. So ist eure Überraschung immer pünktlich um 24 Uhr für alle Besucher verfügbar.

Veröffentlichung von Beiträgen planen | WordPress

Bilder der Galerie verlinken

Alle Bilder erhalten jetzt die Links der geplanten aber noch nicht veröffentlichten Beiträge.

Bild anklicken
Kettensymbol anklicken
URL des Beitrags kopieren (am besten in einem zweiten TAB oder Fenster im Browser)
Seite aktualisieren

Bilder in Galerie verlinken — Bilder in Galerie auf Beitrag verlinken

Weiterleitungen einrichten

Damit das Türchen geschlossen bleibt, wird für alle noch nicht veröffentlichten Beiträge eine Weiterleitung eingerichtet.

Dafür benötigen wir das Redirection Plugin. Sind die Beiträge noch nicht veröffentlicht, soll nicht die Standard Fehler-Seite (404), sondern unsere Seite für die geschlossenen Türchen angezeigt werden.

Redirection Plugin installieren
Einrichtung des Plugins
Anlegen von 24 Weiterleitungen für alle Beiträge

Ist der Beitrag noch nicht veröffentlicht, wird der Server-Status 404 ausgegeben. Normalerweise lädt WordPress dann das im Theme enthaltene Template 404.php. Wir richten für die Beiträge eine eigene Weiterleitung ein. Für unsere Beiträge geben wir als Ziel die vorher angelegte Seite an.

Ich habe für euch eine Beschreibung wie ihr das Plugin einrichtet heraus gesucht.

Beispiel Einstellungen redirection – Quell-URL(Beitrag) | Ziel-URL (Seite)

Design-Regeln in CSS (optional):

In einem anderen Beitrag habe ich auf Nachfrage beschrieben, wie ihr euren Adventskalender individuell gestalten könnt. So könnt ihr zum Beispiel die Bilder bei Berührung mit der Maus animieren, farbige Passepartouts anlegen und vieles mehr.

Wir wünschen euch viel Spaß mit eurem eigenen Adventskalender. Und wenn es für dieses Jahr schon zu spät ist: Weihnachten kommt wieder – ganz bestimmt!

Und wenn ihr lieber Unterstützung haben wollt, können wir euch auch einen individuellen Adventskalender für eure Website erstellen!

Webwiese | Text - Konzept - Webdesign

Wordpress