WooCommerce Shop SSL verschlüsseln

Wenn du einen Shop betreibst, muss mindestens der Bezahlvorgang per SSL verschlüsselt sein.

Auch sollten Kontaktformulare bzw. jegliche Form der Datenübertragung des Kunden verschlüsselt ablaufen.

Den Shop per SSL zu verschlüsseln ist also eine Notwendigkeit und gehört zu den Hygienefaktoren, also Dinge, die man als Kunde einfach erwartet (so wie ein sauberes Glas im Restaurant zu bekommen).

Heutzutage wird aber erwartet, dass der komplette Shop, bzw. die komplette Webseite verschlüsselt ist. Die Kunden werden immer sensibler für Themen wie Datenschutz und das ist gut so.

Da es inzwischen kostenlose Dienste wie Let’s Encrypt gibt, die moderne und sichere SSL Zertifikate kostenlos bereitstellen, gibt es also fast keine Ausrede mehr, SSL nicht anzubieten.

Egal, ob du gleich zu Beginn deiner Webseite SSL einsetzt oder erst später umsteigst:

diese Anleitung führt dich durch alle notwendigen Schritte und hilft dir, häufige Probleme zu lösen.

Im ersten Teil zeige ich, wie man am Beispiel von All-Inkl* ein Zertifikat von Let’s Encrypt installiert.

Im zweiten Teil geht es dann um die Umstellung von WordPress und

im dritten Teil um die Fehlerbeseitigung (sofern bei dir Fehler auftreten).

Voraussetzungen

Es wäre gut, wenn du ein paar Dinge bereits (installiert) hättest und ein wenig damit umgehen kannst:

  • FTP-Client (FlashFXP oder FileZilla)
  • Text-Editor (Notepad++)
  • Hosting wirst du ja haben, WordPress wird wohl auch installiert sein und das SSL Zertifikat bekommst du in Teil 1 weiter unten.

FlashFXP ist kostenpflichtig, aber jeden Pfennig wert. Einfach zu bedienen, umfangreiche Verwaltung von verschiedenen FTP Konten, erlaubt die direkte Übertragung von Dateien von Server zu Server und einiges mehr.

Notepad++ ist gut geeignet, um WordPress Dateien zu bearbeiten. Das wirst du in diesem Tutorial auch kurz tun müssen. Benutze um Himmels Willen kein Word dafür, wenn du deine Webseite nochmal benutzen möchtest. :)

1. Teil: SSL Zertifikat aktivieren

Wenn dein Webhost kein kostenloses Let’s Encrypt anbietet, dann überleg dir den Wechsel.

Wenn du bei 1&1 oder Strato bist (Links führen zu Bewertungen), dann tu dir selbst und allen, die du je wegen deiner Webseite um Rat fragen wirst, einen Gefallen und wechsel zu All-Inkl*. Ab dem Tarif Privat+ kannst du Let’s Encrypt nutzen. (keine Diskussionen in den Kommentaren wegen 1&1 oder Strato bitte. Von denen rate ich aus gutem Grund ab. Einfach mal die Links klicken.)

Ich werde am Beispiel von All-Inkl zeigen, wie schnell SSL für deinen Shop aktiviert ist.

All-Inkl Let's Encrpyt SSL Zertifikat einrichten
Im All-Inkl KAS unter Domains die entsprechende Domain zur Bearbeitung auswählen.
Let's Encrypt kostenloses SSL Zertifikat für deinen Shop
Das Symbol neben SSL-Schutz bearbeiten anklicken.
SSL Zertifikat in 5 Minuten bei All-Inkl einrichten
Auf „Let’s Encrypt“ klicken, den Haftungsausschluss akzeptieren und auf Installieren klicken.

Wie du siehst, ist die Einrichtung in wenigen Schritten und Minuten erledigt.

  1. Ins KAS einloggen.
  2. Domain im Menü links auswählen.
  3. Neben der Domain auf das Symbol zum bearbeiten klicken.
  4. Bei SSL-Schutz auf das Symbol neben bearbeiten klicken.
  5. Auf Let’s Encrypt klicken.
  6. Haftungsausschluss akzeptieren.
  7. Bestätigen.
  8. Fertig!

Das schöne hierbei ist, dass das Zertifikat kostenlos ist und vor Ablauf automatisch verlängert wird. Du musst dich also nicht mehr um das Zertifikat kümmern, solange du die Webseite am Laufen hast.

Zwei Hinweise aber:

  1. All-Inkl leistet keinen besonderen Support für das kostenlose Zertifikat, was nachvollziehbar ist. Es ist aber derart wartungsfrei, dass es hier keine Probleme geben wird.
  2. Let’s Encrypt ist nur für die ganz normale Verschlüsselung gedacht. Ein erweitertes Zertifikat, wie bei Banken (grüne Adresszeile mit Information zur / Name der Firma) geht nicht.

2. Teil: WordPress auf SSL umstellen

SSL ist jetzt also für deine Domain verfügbar/eingerichtet, aber noch wird WordPress nicht über die verschlüsselte Verbindung aufgerufen. Dafür sind die nächsten Schritte.

WordPress muss jetzt noch wissen, dass es nur noch auf sicheren Wegen genutzt werden darf. Und das geht so:

1. WordPress Einstellungen ändern

Geh in dein WordPress im Menü unter EINSTELLUNGEN – ALLGEMEIN.

Dort findest du deine WordPress-Adresse (wo es installiert ist) und die Seiten-Adresse (die Domain).

WordPress SSL Einstellungen
http zu https ändern

Ändere das http in https und speichere.

Nicht wundern – du wirst aus WordPress abgemeldet. Das ist ganz normal.

Du kannst die Einstellungen übrigens jederzeit wieder ändern – auch, wenn du dich nicht mehr anmelden können solltest. (wie steht im nächsten Tipp)

Mit etwas Glück ist deine Seite jetzt schon fehlerfrei komplett mit SSL unterwegs. Aber nicht immer. Und dafür sind die folgenden Einstellungen.

2. Anpassen der wp-config.php

Falls du unter 1. nicht die Änderungen hast durchführen können, weil die WordPress-Adresse und die Seiten-Adresse ausgegraut war und du nicht hineinklicken konntest, liegt das daran, dass diese Einstellungen in der wp-config.php stehen.

Und dort können wir sie auch ändern.

Du kannst auch Schritt 1 überspringen und nur die wp-config.php nutzen. Das mache ich persönlich am liebsten.

Mit einem FTP-Programm wie FlashFXP (nutze ich) oder FileZilla (gratis) kannst du mit deinen FTP Zugangsdaten auf deinen Server verbinden. Die Daten findest du in der Willkommensmail von All-Inkl.

Hier findest du direkt im Hauptverzeichnis deiner Domain die wp-config.php, auf die du doppelt klickst, um sie zu öffnen und zu bearbeiten.

Wenn du gefragt wirst, mit welchem Programm du die Datei bearbeiten willst, nutze am besten Notepad++ (gratis). Alternativ auch den Editor oder das normale Notepad. Beide sind auf deinem PC installiert, aber nicht wirklich empfehlenswert für diese Art Arbeiten.

Ist die wp-config.php einmal offen, schau mal nach, ob du diese Informationen oder Teile davon schon irgendwo findest.

Wenn du unter 1. die WordPress Einstellungen nicht hast ändern können, sind die Zeilen 3 und 4 auf jeden Fall in deiner wp-config.php enthalten.

/** Umstellung auf SSL */
define('WP_CONTENT_URL', 'https://www.newslettervergleich.de/wp-content');
define('WP_SITEURL', 'https://www.newslettervergleich.de');
define('WP_HOME', 'https://www.newslettervergleich.de');

Wahrscheinlich findest du aber keine der Angaben in deiner Datei.

In dem Fall ändern wir das jetzt und kopieren diese Codezeilen einfach ganz oben an den Beginn deiner wp-config.php. Mach ein paar Leerzeilen und kopiere das Beispiel oben hinein.

Dann änderst du natürlich bitte die Domain www.newslettervergleich.de zu deiner Domain.

Achte darauf, ob du bisher www. verwendest oder nicht! Wenn nicht, dann lasse das auch hier heraus.

Gut, fertig. Datei schließen und hochladen.

Hinweise:

Mit der zweiten Zeile „wp_content_url“ weiß WordPress zukünftig, dass alle Inhalte (Bilder, Audios, PDFs etc.) ebenfalls nur noch über die sichere https Variante geladen werden.

Die Zeilen 3 und 4 brauchst du übrigens auch nicht zwingend! Wenn du die mit in die wp-config.php schreibst, dann kannst du in den WordPress Einstellungen im WordPress Backend die WordPress-Adresse und Seiten-Adresse nicht mehr ändern, sondern nur über die wp-config.php.

Zumindest, solange du die Einstellung in der wp-config.php festlegst, wird die Möglichkeit zum Ändern in WordPress selbst blockiert. Dann sind die beiden Felder ausgegraut (siehe 1.).

Natürlich kannst du alle Einstellungen in der wp-config.php auch jederzeit rückgängig machen und die Zeilen 3 und 4 entsprechend löschen, so dass du in WordPress selbst wieder diese beiden Änderungen durchführen kannst. Aber das kommt im Regelfall sehr selten vor.

Ich mache die Änderung immer über die wp-config.php

Ein paar Tipps und Fehler zu diesem Schritt findest du weiter unten bei der Fehlerbehebung.

Wenn du aber der Anleitung einfach folgst, passieren keine Fehler. Die Hinweise sind eher dafür gedacht, wenn du mit einer anderen Anleitung keinen Erfolg hattest und nach möglichen Lösungen suchst.

3. Datenbankupdate

Jetzt kommt der unheimlichste Part, der aber ganz einfach ist.

Es ist wirklich nicht schlimm und jede Änderung kann auch immer rückgängig gemacht werden.

Zunächst musst du dich in phpMyAdmin anmelden, um auf deine Datenbank zugreifen zu können.

All-Inkl hat den Zugang zu phpMyAdmin hier versteckt: http://meinedomain.tld/mysqladmin/kaslogin.php (meinedomain.tld ist natürlich mit der eigenen Webadresse auszutauschen).

Mit den Zugangsdaten, die du auch für das KAS verwendest (Details in der Willkommensmail von All-Inkl), kommst du hinein.

 

SSL Umstellung Datenbankupdate
phpMyAdmin Loginmaske. Mit deinen Zugangsdaten einfach anmelden.

phpMyAdmin sieht ungewohnt aus, ist aber im Grunde ganz einfach.

Wir brauchen auch gar nicht viel und müssen nur links in der Baumansicht die Datenbank auswählen, die zu WordPress gehört.

Im Regelfall findest du hier nur eine Datenbank, die mit wp_ beginnt.

Falls deine Datenbank ein anderes Präfix hat (wie im Screenshot, deshalb auch geschwärzt), ist das okay. Es ist eine zusätzliche Sicherheitsmaßnahme.

In jedem Fall wählst du die Datenbank aus, bei der das Wort „Information“ nicht mit im Namen steht.

Wenn du hier sehr viele Datenbanken vorfinden solltest, musst du noch einmal in deine wp-config.php schauen, da ist der Datenbankname auch hinterlegt. Dann weißt du ganz sicher, wie sie heißt.

Wenn du die Datenbank dann ausgewählt hast (anklicken), klickst du als nächstes auf den im Bild gelb markierten Bereich SQL.

phpMyAdmin Datenbankauswahl
Die entsprechende Datenbank auswählen. Häufig beginnt diese mit wp_

Hier kopierst du dann nur noch diese Befehle rein und drückst dann rechts auf OK.

Bevor du OK drückst aber bitte zwingend die Webseitenadresse zu deiner Domain ändern. Also Newslettervergleich.de raus und deine Information rein. Und wenn du www. verwendest, dann auch hier berücksichtigen. Wenn nicht, dann nicht.

UPDATE wp_options SET option_value = replace(option_value, 'http://www.newslettervergleich.de', 'https://www.newslettervergleich.de') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://www.newslettervergleich.de','https://www.newslettervergleich.de');
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.newslettervergleich.de', 'https://www.newslettervergleich.de');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://www.newslettervergleich.de','https://www.newslettervergleich.de');
Datenbankupdate für SSL ausführen
Datenbankbefehl reinkopieren und ausführen lassen.

Achte unbedingt auf korrekte Schreibweise deiner Domain. Schreibfehler führen dazu, dass der Befehl dir einiges kaputt macht. Das kann nervig sein.

Wenn alles passt und du OK geklickt hast, werden die Datenbankbefehle in Windesweile ausgeführt und du bekommst einen Hinweis.

Wir sind hier fertig und können links oben auf das kleine grüne EXIT Symbol klicken.

4. .htaccess Einstellung ändern

Kopiere folgende Befehle in deine .htaccess – diese findest du (wie alle anderen Dateien hier auch) in deinem Stammverzeichnis (root) deiner WordPress Installation, wenn du über ein FTP Programm darauf zugreifst. Die FTP-Zugangsdaten sind nach wie vor in der Willkommensmail von All-Inkl.

Kopiere diesen Text einfach an den Anfang deiner .htaccess Datei. Nicht ans Ende!

Wenn du die .htaccess in deinem Verzeichnis nicht siehst, musst du wahrscheinlich in deinem FTP Programm die Einstellung setzen, dass auch versteckte Dateien angezeigt werden sollen. Wie das geht, findest du auf der Webseite deines FTP Programms.

RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}/$1 [R=301,L]

Kopieren (hier musst du diesmal nichts ändern), einfügen, speichern.

Spätestens jetzt läuft deine Seite über SSL und du hast die Internetwelt ein Stück sicherer für deine Kunden gemacht.

Wenn aber irgendwo etwas nicht ganz läuft, du Fehler hast oder Mixed Content oder zu viele Umleitungen, dann schau mal hier in die Fehlerbehebung.

3. Teil: Fehlerbehebung

Fehler in der wp-config.php

  • Achte darauf, dass keine unnötigen Leerzeichen in der wp-config.php stehen. D.h. vor und zwischen dem define sollten keine Leerzeichen sein und auch nach dem <php am Anfang der Datei keine Leerzeichen!
  • Die Einträge oben kommen in eine neue Zeile, z. B. sofort nach dem <php am Anfang der Datei. <php ist in Zeile 1, deine Ergänzungen von oben stehen in Zeile 2-5 (wenn du alles übernimmst)
  • Achte darauf, dass am Ende jeder Zeile ein ; steht.
  • Achte darauf, dass die Hochkommas einzelne, gerade Striche sind, so ‚ und nicht z. B. ` oder ´. Schau oben ins Beispiel.
  • Wenn dein CSS zerschossen ist, deine Seite also praktisch völlig unformatiert ist, dann schau mal, ob du die WP_CONTENT_URL richtig angepasst hast. Vorne steht ein https://, dann dein Domainname, dann /wp-content und kein abschließender / Schrägstrich.
  • Kopiere die Einstellungen nicht ganz an das Ende der wp-config.php
  • Falls deine Seite ein vorangestelltes www. hat, trage das oben auch so ein.
  • Du verwendest zum Bearbeiten keinen Texteditor wie Notepad++ (das solltest du aber).

Fehler beim Datenbankupdate

  • In jeder Zeile steht wp_options, wp_posts etc. Das wp_ bezieht sich dabei auf das Tabellen-Präfix deiner Datenbank. Wenn du bei der Installation von WordPress das Präfix nicht geändert hast oder WordPress über eine 1-Klick-Installation hast installieren lassen, passt das im Regelfall. Du kannst in deiner wp-config.php oder auch in deiner Datenbank sehen (im Screenshot schwarz), wie dein Tabellenpräfix lautet. In jedem Fall werden die obigen Befehle nur ausgeführt werden können, wenn du das richtige Präfix verwendest. Ansonsten ändert sich nichts.
  • Vorne steht die Version mit http:// und hinten die Variante mit https:// – wenn du den umgekehrten Weg gehen willst, also von https:// auf http:// wechseln wolltest, tauschst du das aus.
  • Du solltest darauf achten, ob deine WordPress Seite ein vorangestelltes www. hat oder nicht und es entsprechend oben ergänzen.
  • Achte auf den ; am Ende jeder Zeile. Wenn du es hier einfach kopierst, wirst du kein Problem haben.
  • Achte darauf, dass die Hochkommas einzelne, gerade Striche sind, so ‚ und nicht z. B. ` oder ´.
  • Du verwendest zum Bearbeiten keinen Texteditor wie Notepad++
  • Du hast einen Schreibfehler beim Datenbankupdate gemacht. In dem Fall in dem Codebeispiel oben die fehlerhafte Version vorne stehen haben (wo die alte nicht-SSL Variante war) und hintendran nach wie vor die korrekte Version. Updaten, diesmal sollte alles passen.

Mixed Content (kein grünes Schloß!)

Du hast deine Webseite nach Anleitung umgestellt, aber erhältst noch kein grünes Schloß?

Das ist natürlich doof, aber häufig leicht zu beseitigen.

Du hast grundsätzlich schon alles richtig, aber da gibt es wohl bei deiner Seite noch ein paar Altlasten, die von den Änderungen nicht mit abgefangen werden.

Diese werden wir jetzt suchen und ändern. Und das geht so:

In Google Chrome drückst du F12 auf der Tastatur und klickst dann auf den Reiter „Console„.

Hier siehst du dann, welche Inhalte von unsicheren (nicht-SSL) Seiten geladen werden.

Das können z. B. Schriftarten sein, die in der style.css deines Themes oder Childthemes hinterlegt sind, z. B. von Google Fonts. Dort einfach das http:// zu https:// machen und alles sollte passen.

Häufig sind auch Logos, Hintergründe oder Bilder die Übeltäter und müssen über DESIGN – ANPASSUNGEN im WordPress Backend einfach nochmal neu ausgewählt werden.

Wichtig ist auch, die Widgets deines WordPress anzupassen – wenn du hier auf Bilder verlinkst (z. B. in der Form <img src=“http://www.meinedomain.de/wp-content/uploads/2018/03/meintollesbild.jpg“>) musst du hier natürlich auch das „s“ bei https:// ergänzen. Besser ist es, hier einfach für das Einbinden von Bildern die Form <img scr=“/wp-content/uploads/2018/03/meintollesbild.jpg“> zu nutzen, also ohne die Domain vorne dran. Dann entsteht dieser Fehler gar nicht.

Zu viele Umleitungen

Wenn du iThemes Security im Einsatz hast, kann es sein, dass du die Meldung „zu viele Umleitungen“ erhältst.

In den Einstellungen von iThemes Security sollte bei Front End SSL Mode OFF stehen. Wenn du hier ON hast, gibt es Probleme. Die Einstellung einfach auf OFF stellen und das Problem mit den Umleitungen ist in diesem Fall gelöst.

Kurzversion für Eilige

In der wp-config.php die zu deiner Seite passende URL eintragen (mit oder ohne www. und dein Domainname statt meiner):

/** Umstellung auf SSL */
define('WP_CONTENT_URL', 'https://www.newslettervergleich.de/wp-content');
define('WP_SITEURL', 'https://www.newslettervergleich.de');
define('WP_HOME', 'https://www.newslettervergleich.de');

In phpMyAdmin das Datenbankupdate durchführen (wieder meine URL durch deine ersetzen):

UPDATE wp_options SET option_value = replace(option_value, 'http://www.newslettervergleich.de', 'https://www.newslettervergleich.de') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://www.newslettervergleich.de','https://www.newslettervergleich.de');
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.newslettervergleich.de', 'https://www.newslettervergleich.de');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://www.newslettervergleich.de','https://www.newslettervergleich.de');

Das hier an den Anfang deiner .htaccess kopieren:

RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule (.*) https://%{HTTP_HOST}/$1 [R=301,L]

Done!

2 Gedanken zu “WooCommerce Shop SSL verschlüsseln

  1. Hallo, vielen Dank für diese ausführliche und verständliche Anleitung. Ich habe soweit alles umgesetzt (Seite gehostet bei All-Inkl) und im WP-Backend die Links auf https umgestellt. Nun ist es so, dass man bei Eingabe der „alten“ http://www.xy.de immer noch die unverschlüsselte Seite aufruft. Nur bei direktem Aufruf über https://xy.de erreiche ich die verschlüsselte Variante.

    Habe ich noch etwas vergessen oder nicht verstanden? Vielen Dank!

    • Hi Uwe!
      Du hast also auch die .htaccess entsprechend bearbeitet? Normalerweise sollte, wenn alle Punkte umgesetzt sind, die Anfrage an die unverschlüsselte Webseite abgefangen und auf die verschlüsselte umgeleitet werden.
      Da ich selbst bei All-Inkl bin und immer nach der Anleitung vorgehe, müsste das klappen.
      Hast du die .htaccess Datei tatsächlich bearbeiten und speichern können? Aufgrund der Dateirechte bei All-Inkl kann es sein, dass sie nicht wirklich hochgeladen wurde und du erst einmal die .htaccess mit Rechtsklick und CHMOD auf 755 setzt, bearbeitest, speicherst/hoch lädst und danach wieder auf den alten Wert zurücksetzt (bei mir ist die .htaccess auf 400 gesetzt – vergewissere dich vorher, was bei dir eingestellt ist).
      Evtl sollte ich die Anleitung noch um Details zu dem Schritt ergänzen.
      Check doch bitte noch einmal deine .htaccess, wenn du dich neu per FTP auf deinen Server verbindest und schau, ob die Änderung gespeichert wurde.
      Wenn es dann immer noch nicht geht, schick mir doch ruhig mal deine Seite per Kontaktformular.
      Gruß

Schreibe einen Kommentar