WordPress mit Zwei-Faktor-Authentifizierung schützen

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!

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

Zwei-Faktor-Authentifizierung | Verfahren in WordPress

Anmeldung:

  1. Melden Sie sich jetzt mit Benutzernamen und Passwort für Ihre Website an.
  2. Verbinden Sie Ihren Hardware-Token mit Ihrem Rechner.
  3. Ü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

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.

<div id=“kalender“>
<img src=“PFAD BILD 1″>
<img src=“PFAD BILD 2″>
<img src=“PFAD BILD 3″>
</div>

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:

Webwiese Logo

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

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.

Website Ernährung

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

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

  1. 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.
  2. 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.
  3. Die Bilder könnt ihr ganz einfach über die WordPress-Funktion Dateien hinzufügen als Galerie auf eure Seite stellen. Wenn ihr da noch nicht so sicher seid, können wir euch den Artikel von Elmastudio empfehlen.
  4. Medien hinzufügen

    Medien hinzufügen

  5. Die Bilder einer Bildergalerie können in WordPress nicht standardmässig mit eigenen Links versehen werden. Das ist aber notwendig, wenn ihr eine Galerie zu einem Adventskalender umbauen wollt. Hierfür empfehle ich euch das Plugin Gallery-Customn-Link. Das Plugin ergänzt ein Feld zur benutzerdefinierten Verlinkung und so könnt ihr genau festlegen, wohin jedes einzelne Bild verlinkt wird. Die Alternative wäre, die Bilder einzeln auf die Seite zu stellen. Dann müsst ihr aber die Formatierung über html und css anpassen.
  6. Installiert das Plugin und aktiviert es. Jetzt könnt ihr eine Galerie mit euren Bildern für den Adventskalender erstellen. Gebt unter Custom Link die Adresse der vorher erstellten Noch-nicht-Seite an. Später könnt ihr ihn durch den Link der Beitragsseite ersetzen, indem ihr das Bild über die Medienfunktion von WordPress bearbeitet.
  7. Damit WordPress die benutzerdefinierten Links auch verwendet, ändert ihr in der Textansicht eurer Adventskalenderseite den Code der Galerie in link=“custom“. Habt ihr zuvor keine Verlinkung ausgewählt steht dort nämlich link=“none“. Das wollen wir überschreiben.
  8. Shortcode ändern

    Shortcode ändern

  9. Prima, das Grundgerüst ist nun fertig! Für die Überraschungen in eurem Adventskalender braucht ihr nun nur noch 24 gute Ideen. Dafür könnt ihr wie gewohnt Beiträge erstellen, die dann 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.

Gerne könnt ihr euch inspirieren lassen. Im Adventskalender unseres Fotografen Dennis sind jeden Tag interessante Beiträge rund um das Thema Fotografie versteckt. Etwas verspielter ist der Kita Adventskalender, den wir für einen unserer Kunden realisieren.

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!