Meine Checkliste, wie du mit https deinen Blog absicherst – ohne Mixed Content

von | 11.02.2017 | 12 Kommentare

SSL-Verschlüsselung, HTTPS, sichere Websites und Blogs – als Blogger hast du bestimmt schon einmal von diesen Begriffen gehört! Ist dein Blog noch nicht umgestellt und hast du „Angst“ davor, weil viel Arbeit, kryptischer „Technik-Kauderwelsch“ oder andere Nachteile dich erwarten könnten? Ich will dir mit diesem Beitrag und meiner Erfahrung durch die Umstellung von Willkommen Fernweh helfen!
Sicher – Willkommen Fernweh nach der Umstellung

Schon Ende 2016 machte eine Ankündigung des Entwicklerteams von Google Chrome Schlagzeilen, dass der Browser ab Version 56 eine Warnung ausgeben würde, wenn eine normale HTTP-Website (die also nicht durch SSL verschlüsselt ist) angesurft würde.

Nun schlägt zwar manche Meldung zu hohe Wellen und Dinge werden auch mal falsch dargestellt, aber meine Aufmerksamkeit war spätestens ab dem Zeitpunkt auf das Thema gerichtet, als auch in Blogger-Gruppen auf Facebook über diese Ankündigung und dadurch empfohlene SSL-Umstellungen diskutiert wurde.

Was macht Chrome nun wirklich? Und sollte ich mir den Zeitaufwand antun, Willkommen Fernweh auf HTTPS umzustellen, die Verbindung also zu verschlüsseln?

Wirklich interessant wurde es für mich, als ich erfuhr, dass mein Hosting-Provider, all-inkl.com, eine einfache und kostenlose Möglichkeit anbietet, ein SSL-Zertifikat zu implementieren. Aber alles der Reihe nach.

Bei diesem Beitrag handelt es sich – ausnahmsweise – nicht um einen Reisebericht oder Artikel, der in anderer Weise ans Thema Reisen anknüpft. Ich richte mich mit diesem Ratgeber an meine Blogger-Kollegen mit auftretenden Fragestellungen und Problemen rund ums Thema Bloggen & Technik. Denn jeder Blogger, der seine Website alleine betreibt und betreut, weiß, dass er/sie ein Multitalent sein muss – Leidenschaft, Schreiben und Fotografieren alleine reicht nicht.

Die „Nicht sicher“-Warnung – was Chrome wirklich macht

Wenn man sich die Ankündigung von Google zur Warnung von Chrome vor unsicheren Websites genauer anschaut, stellt man fest, dass dies zunächst nur Shops und andere Seiten betrifft, bei denen Kreditkartendaten und andere Passwörter abgefragt werden. Und das macht ja auch Sinn, schon lange wird davor gewarnt, diese Daten in unsicheren Formularen einzugeben. „Normale“ Blogs betrifft das nicht.

Google lässt aber auch durchblicken, wie es in zukünftigen Versionen von Chrome aussehen könnte – nämlich so, dass dann womöglich vor allen HTTP-Websites gewarnt wird, indem neben der Adresse der Hinweis „Nicht sicher“ (evtl. in roter Schrift) erscheint. Da ist zwar noch nichts entschieden, aber das würde dann auch jeden Blog betreffen und vermutlich würden andere Browser wie Firefox, Internet Explorer und Safari nachziehen.

So eine plakative Warnung könnte natürlich Leser abschrecken und wäre für jeden Blogger schädlich – außer der Blog läuft bereits auf SSL/TLS.

Diese voraussichtliche Entwicklung hat zu meiner Entscheidung geführt, lieber früher als später auf SSL umzustellen. Es kommen aber auch andere Aspekte hinzu, z.B. dass Google https-Seiten einen geringen Rankingvorteil einräumt und dass ein verschlüsseltes WordPress-Backend einfach sicherer ist.

SSL • HTTPS • TLS – Alles klar?

Es würde diesen Artikel sprengen, genau zu erklären, was mit TLS bzw. dem umgangssprachlich immer noch gängigeren SSL gemeint ist. Nur kurz: Es handelt sich um eine Verschlüsselungsmethode, um die Verbindung zwischen Server im Internet und dem Browser des Nutzers/Lesers abzusichern. Würde jemand diese Verbindung belauschen, so könnte er mit den verschlüsselten Daten nichts anfangen.

Webseiten, die diese Technik einsetzen, beginnen mit einem „https“ in der Internetadresse, fehlt die Verschlüsselung, so steht dort nur ein „http“.

Für Weiteres verweise ich einfach auf den Wikipedia-Artikel zu HTTPS.

Eine Menge Arbeit und Zeitaufwand? JEIN!

Ich will nicht den Anschein erwecken, dass die SSL-Umstellung immer in einer Stunde zu erledigen ist und alles ist prima. Aber ich will dir auch die Angst vor der Umstellung nehmen. In den meisten Fällen (WordPress-Blog, Standard-Plugins) sollte die Umstellung wirklich in 1-2 Stunden zu machen sein. Probleme können aber immer auftauchen – je älter der Blog, umso eher – so ist das eben mit der Technik. Kalkuliere also ein, dass du schlimmstenfalls einen Tag oder sogar länger beschäftigt bist und mache unbedingt ein Backup, dass du zur Not zügig wiederherstellen könntest, wenn der worst case eintritt.

Ich kann mit meiner Vorgehensweise, dieser Anleitung und meiner Checkliste natürlich nicht garantieren, dass die Umstellung bei dir reibungslos verläuft und keine – mir vielleicht unbekannten – Probleme auftauchen.

Kostenlose Verschlüsselung mit dem „Let’s Encrypt“-Zertifikat und All-Inkl

Um deinen Blog absichern zu können, brauchst du zwingend ein SSL-Zertifikat – und genau daran scheiterte es früher meist. Denn so ein Zertifikat kann richtig teuer sein, sodass es sich nur Unternehmen, aber keine Blogger leisten konnten.

Mit dem kostenlosen Zertifikat von Let’s Encrypt hat sich da etwas geändert. Und noch besser, mein Hoster All-Inkl bietet seit 2016 sogar an, das Zertifikat mit zwei Mausklicks im KAS (der Benutzeroberfläche für die Webhosting-Verwaltung) zu aktivieren. Einfacher geht es kaum. Auch andere Provider bieten das an, teilweise verlangen sie allerdings einen (meist verschmerzbar geringen) Jahresbetrag für die SSL-Absicherung. Ich beschreibe hier meinen Fall mit all-inkl.com. (Hinweis: Du benötigst mindestens das Paket „Privat Plus“ bei all-inkl, um das Zertifikat nutzen zu können!)

Also los geht’s!

HALT!
Nicht so schnell. Ganz wichtig: Vor so einer Umstellung musst du unbedingt für ein frisches Backup deiner kompletten Blog-Installation sorgen (Dateien und Datenbank)!

Ich erschrecke immer wieder, wenn ich mitbekomme, wie stiefmütterlich teilweise das Thema Backup gehandhabt wird. Dein Blog ist deine Leidenschaft, vielleicht dein Herzblut – dann sichere dich ab. Nicht nur, weil mit der Technik etwas schief gehen kann, auch, weil das Internet „böse“ ist (Hacker usw.). Und sorge dafür, dass ein Backup auch wirklich ohne großen Aufwand wiederhergestellt werden kann (leider gibt es auch Backup-Plugins, die einen im Falle der Wiederherstellung alleine lassen).

Dann kann es aber wirklich losgehen. Das Zertifikat im KAS von All-Inkl zu aktivieren, ist schnell gemacht: Haftungsausschluss akzeptieren und den Button zum Einbinden anklicken. Für die weiteren Punkte möchte ich dir erst einmal meine Checkliste zeigen, nach der ich mich orientiert habe.

Aktivieren des Let’s Encrypt Zertifikats bei All-Inkl
Aktivieren des Let’s Encrypt Zertifikats bei All-Inkl

Meine Checkliste zur SSL-Umstellung

Hier also meine Checkliste, die ich dir nicht vorenthalten will. Beachte jedoch, dass sie auf meine Bedürfnisse zugeschnitten ist. Sehr individuelle Themen lasse ich hier raus, bestimmte Dinge, die nur deine Installation betreffen, wirst du hinzufügen müssen.

Es ist einfach so, dass WordPress sehr variabel ist – individuelle Anpassungen können sich aus deinem Theme, den von dir verwendeten Plugins und von dir eingebundenem Code ergeben, der dann zu Mixed Content führen kann – dazu später mehr. Als Grundgerüst für deine eigene Checkliste sollte meine aber brauchbar sein.

  • Backup erstellen.
  • Pingdom Test durchführen (Performance-Test zum Vorher-Nachher-Vergleich).
  • Let’s Encrypt Zertifikat im KAS von all-inkl aktivieren.
  • Im WordPress-Backend -> Einstellungen -> Allgemein – URLs ändern (https statt http).
  • Plugin Better Search Replace installieren (kann nach erfolgreicher Umstellung wieder deinstalliert werden), alte Website-URL (http://blogadresse.de) durch neue ersetzen (https://blogadresse.de). (Evtl. kommt noch ein www. hinzu, je nachdem, was deine Hauptadresse ist.)
  • In der Datei wp-config.php (befindet sich im Stammverzeichnis deiner WordPress-Installation) ganz unten in einer neuen Zeile hinzufügen:
    define( 'WP_CONTENT_URL', 'https://deine webseite/wp-content' );
    („deine webseite“ durch die Adresse deines Blogs ersetzen).
  • Neu einloggen, Backend mit https aufrufen (für das Backend sollte Chrome bereits ein grünes Schloss und „Sicher“ anzeigen).
  • Falls du ein Cache-Plugin verwendest: Cache löschen.
  • Weiterleitungen von zusätzlichen Domänen (falls vorhanden) auf https Ziel ändern (ich habe z.B. ein Redirect von willkommen-fernweh.de auf willkommenfernweh.de – das Weiterleistungsziel nun auf https ändern).
  • Plugins kontrollieren – in meinem Fall musste ich im Prosodia VG Wort Plugin die Einstellung auf https ändern.
  • Überprüfen, ob der Blog (Frontend) nun grundsätzlich über https erreichbar ist und läuft (vorher am besten Browsercache löschen).
  • Test der SSL- bzw. TLS-Verbindung: https://www.ssllabs.com/ssltest/
  • „SSL erzwingen“ im KAS (entspricht 301er Redirect in htaccess).
  • Weiterleitungen kontrollieren: z.B. mit http://web-sniffer.net (Funktioniert die Weiterleitung (Statuscode 301) von http://blogadresse.de zu https://blogadresse.de (mit und ohne „www“ kontrollieren!).
  • Sitemap auf https kontrollieren (Plugin wie Google XML Sitemaps und Adresse in der robots.txt) und neu einreichen.
  • Canonical Tags kontrollieren (sollten die Adresse nur noch mit https anzeigen).
  • Neue Sites in Google Search Console (Webmaster Tools) hinzufügen (https – mit und ohne www).
  • Piwik bzw. Google Analytics umstellen (das Tool sollte selbst auch über https laufen!).
  • Falls noch Mixed Content: Analysieren, z.B. mit Hilfe der Seite https://www.whynopadlock.com bzw. Chrome Entwicklertools verwenden. Nicht nur die Startseite kontrollieren, auch Blogbeiträge.
  • Mixed Content Probleme beheben, bis in Chrome das grüne Schloss („Sicher“) angezeigt wird.
  • Pingdom Performance-Test erneut ausführen und vergleichen.
  • Website-Adresse auf Facebook, Twitter, Pinterest etc. aktualisieren (und wo sonst noch nötig).
  • Freuen! 🙂
Santander 1plus Visa Kreditkarte

Zum Ratgeber-Beitrag

Wir empfehlen dir die kostenlose Santander 1plus Visa für deine Reise!

  • Kostenlos weltweit Bargeld abheben
  • Keine Auslandseinsatz-Gebühr uvm.

Du brauchst mehr Infos? Dann lies den Ratgeber-Artikel.

Auf einzelne Punkte meiner Checkliste möchte ich nun noch eingehen:

URLs auf https anpassen

Nach der Aktivierung des Zertifikats musst du WordPress noch beibringen, dass es nun über eine verschlüsselte Verbindung läuft. Der erste Schritt besteht darin, im Backend unter Einstellungen -> Allgemein ein „s“ hinter das http einzufügen. Das allein reicht aber nicht aus, denn es gibt ja bestimmt noch eine Menge interner Links und Verweise auf deinem Blog, die in der Regel auf die Adresse ohne https zeigen.

Natürlich könntest du es dir leicht machen und das so bestehen lassen, denn später wird ja noch eine permanente Weiterleitung deines Blogs auf https eingerichtet. Allerdings kostet jede Weiterleitung Ladezeit beim Aufrufen und Google soll ebenfalls nur noch korrekten internen Links folgen.

Bevor du die Links händisch umstellst, was je nach Umfang sehr viel Arbeit bedeuten wird, solltest du das Plugin Better Search Replace verwenden. Es gibt zwar auch andere Plugins, die versprechen, die nötigen Änderungen automatisch und dynamisch durchzuführen (ohne Veränderung der Datenbank), aber das hat meines Erachtens einen Nachteil: Du bist auf so ein Plugin dauerhaft angewiesen, deaktivierst du es oder gibt es ein Problem, so hast du wieder die alten Links auf der Seite.

Ich habe mich deshalb für Better Search and Replace entschieden, dieses Plugin führt permanente Änderungen in der WordPress-Datenbank durch. Da du vor der Umstellung ein Backup gemacht hast, sollte das ungefährlich sein und die Datenbankänderung hat den Vorteil, dass du das Plugin nach erfolgreicher Umstellung wieder löschen kannst (kein unnötiger Ballast).

Test der HTTPS-Verbindung und dauerhafte Weiterleitung

Der Blog sollte inzwischen über https in der URL aufrufbar sein und alle Inhalte normal geladen werden. Ob die TLS-Verbindung in Ordnung ist, kannst du hier testen: https://www.ssllabs.com/ssltest/ Bei mir war das Overall Rating „A“ (alles grün), außerdem „Chain Issues: None“.

Auch wenn der Browser noch kein Schloss-Symbol anzeigen sollte, können wir eine permanente Weiterleitung (Redirect Statuscode 301) von der Domäne mit http auf https einrichten, denn um Mixed Content kümmern wir uns noch. Hauptsache, die Seite läuft! Die Weiterleitung ist nötig, weil es bestimmt genug Links im Internet gibt, die noch auf deinen Blog mit http verweisen – z.B. Backlinks auf anderen Blogs, in sozialen Medien und auch Seiten im Google-Index. Wenn jemand so einem Link folgt, soll er/sie ja auf deinem HTTPS-Blog landen. Die umverschlüsselte Variante wird also komplett deaktiviert.

Falls du All-Inkl.com als Webhoster verwenden solltest, so hast du nun einen Vorteil: Das Einrichten der Weiterleitung in der htaccess-Datei entfällt! All-Inkl bietet seinen Kunden an, im KAS den Haken bei Domain -> bearbeiten -> „SSL-Schutz bearbeiten“ -> „SSL erzwingen“ zu setzen. Dies nun auf „Ja“ stellen, speichern und die serverseitige 301-Weiterleitung ist im Nu gemacht, einfacher geht es kaum.

Permanente Weiterleitung (Redirect 301) durch "SSL erzwingen“ bei All-Inkl
Permanente Weiterleitung (Redirect 301) durch „SSL erzwingen“ bei All-Inkl
Andere Hoster bieten das meist nicht an, hier musst du die Weiterleitung in der htaccess einbinden (bitte mache das nicht doppelt – wenn du bei All-Inkl bist, benötigst du das nicht!). Kopiere den folgenden Code und füge ihn (z.B. ganz zu Anfang) in die htaccess ein:
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Kein grünes Schloss: Mixed Content

https / SSL Mixed-Content-Warnung

Mixed-Content-Warnung

Nach einigen weiteren Kontrollpunkten meiner Checkliste kommst du nun zur Prüfung, ob dein Blog auch wirklich als sicher eingestuft wird. Häufig ist es nun trotzdem noch so, dass der Browser kein Schloss-Symbol in der Adressleiste anzeigt (Chrome zeigt ein grünes Schloss und „Sicher“, anderenfalls nur ein graues „i“ für weitere Informationen). Das liegt daran, dass sogenannter Mixed Content vorliegt, was bedeutet, dass beim Laden deiner Website nicht alle Inhalte über eine sichere HTTPS-Verbindung geliefert werden.

Du musst dir vorstellen, dass dein Blog meist nicht nur aus Quellen besteht, die sich auf deiner eigenen, inzwischen TLS-abgesicherten Domäne befinden. So werden z.B. Schriftarten, Grafiken, Skripte und andere Codes geladen, die du früher mal über dein Theme, Plugins oder auch händisch eingebunden hast. Werden solche externen Quellen beim Laden deiner Seite nun nicht über https, sondern über http aufgerufen, so wird die komplette Seite als nicht sicher eingestuft.

Das Beheben dieser Mixed Content Problematik kann mitunter mehr Zeit beanspruchen als die gesamte eigentliche SSL-Implementierung, ist aber unbedingt nötig. Um zu erkennen, worin das Problem liegt, hast du verschiedene Möglichkeiten:

  • Du kannst die Analyse von Whynopadlock verwenden, damit siehst du zumindest auf einen Blick, welche Quellen noch über eine unsichere Verbindung geladen werden.
  • Mit den Entwicklertools von Chrome (andere Browser bieten ähnliche Konsolen) kannst du dir ebenfalls unsichere Ressourcen anzeigen lassen. Hier hast du dann auch die Möglichkeit, die Warnungen und Fehler in der Konsole detaillierter darstellen zu lassen.
Mixed Content Anzeige in den Chrome Entwicklertools
Mixed Content Anzeige in den Chrome Entwicklertools

Nun heißt es: Jedem Problem auf den Grund gehen und die Quelle auf https korrigieren. Im simpelsten Fall genügt ein Häkchen z.B. in Plugin-Einstellungen, vielleicht musst du externen Code (z.B. für Grafiken und Banner) auch neu generieren oder in Dateien des Themes ändern (hier kann auch der Entwickler-Support nützlich sein).

In der Regel solltest du ohne allzu große Schwierigkeiten zum Ziel kommen und dich über ein grünes Schloss und eine abgesicherte Seite freuen können. Ich empfehle dir übrigens, nicht nur die Startseite zu analysieren, sondern auch weitere Seiten und Blog-Beiträge, auf denen es unter Umständen weitere unsichere Quellen gibt.

Anzeige Sichere Website in Chrome
Anzeige Sichere Website in Chrome

Weitere Aufgaben

Wie es meiner Checkliste zu entnehmen ist, solltest du ein paar weitere Aufgaben erledigen, die dazu dienen, dass wirklich nur noch https verlinkt ist oder dein Statistik-Tool korrekt auswerten kann.

Dazu gehört z.B. die Kontrolle der https-Adresse für die Sitemap, aber auch, dass dein Blog nun auch mit der neuen https-URL in den Google Webmaster Tools angelegt wird. Denn auch wenn es für den Leser nicht so aussieht, für den Google-Bot erscheint der Blog durch https nun wie eine neue Website, für die du deine Inhaberschaft bestätigen solltest.

Dafür, dass Google den (scheinbar neuen) Inhalt des https-Blogs nun nicht für „bösen“ Duplicate Content hält, sorgt das „Canonical Tag“. Dieses solltest du sowieso aktiviert haben, in meinem Fall wird das durch das Plugin „wpseo“ erledigt, viele verwenden YOAST. Eine Anpassung nach der Umstellung war nicht nötig, wpseo hatte die Änderung automatisch vorgenommen – kontrollieren solltest du den canonical aber auf jeden Fall!

Gefällt dir Willkommen Fernweh?

Dann melde dich bei unserem Newsletter an und du verpasst keinen neuen Beitrag mehr! Weitere Infos

Wir lehnen Spam ab und versenden deshalb auch keinen!

Wer schreibt hier?

Wir sind Kerstin und Klaus. Wir lieben es die Welt zu erkunden und dir Anregungen und Tipps für deine eigene Reise zu geben!

Mehr über uns

Beliebt:

Fotoparade 1. Halbjahr 2017 – die schönsten Bilder

Es ist wieder Zeit für eine neue Fotoparade, bereits die dritte, an der wir teilnehmen und auf die wir uns schon im Vorfeld gefreut haben! Unsere Fotos sind während unserer Reisen in die Vogesen und nach Island entstanden – es erwarten dich also traumhafte Bilder mit winterlicher Stimmung.

Gullfoss, Þingvellir und Geysir – der Golden Circle im Schnee

Die Golden Circle Route mit Gullfoss, Geysir und Þingvellir gehört wohl zu den „Must sees“ einer Island-Reise, und wie wir finden auch zu Recht. Hier kann man relativ nah beieinander liegend Wasserfälle, geothermale Aktivitäten und den Übergang zweier Kontinentalplatten bewundern. Mehr in unserem Beitrag!

Bye bye Winter – Hallo Sommer!

Der Mai ist da und wir haben inzwischen auch richtig Lust auf Sommer, draußen sein, die Terrasse benutzen, Eis essen, den Grill anschmeißen. Geht es dir auch so? Dann kommt diese Sommer-Fotoparade genau richtig. Der Winter ist passé, es lebe der Sommer! • Sonnenuntergang • Beachlife • Getrunken uvm.

Alles über Layover: Schlaflos in Seattle und anderswo

Viele Reisende bevorzugen Nonstop-Flüge, oft ist dieser jedoch nicht verfügbar oder unverhältnismäßig teuer. Ich erkläre dir alles Wissenswerte zu Zwischenlandungen und wie du diesen Layover sogar für einen richtig schönen Ausflug nutzen kannst, inkl. mehrerer Beispielberichte!

Fazit

Ich hatte gehörigen Respekt vor der Umstellung und hätte sie so zeitnah bestimmt nicht durchgeführt, wenn ich nicht von der Google-Chrome-Ankündigung gelesen hätte.

Im Nachhinein bin ich froh, das Willkommen Fernweh nun über eine abgesicherte Verbindung läuft und ich das nicht weiter aufgeschoben habe. Nach ein wenig Selbststudium konnte ich die Umstellung ohne große Probleme meistern und hoffe, dir mit diesem Artikel zu helfen und Mut zu machen.

Der Nachteil einer längeren Seitenladezeit durch den SSL-Handshake fällt bei mir mit unter 0,1 Sekunde übrigens vertretbar gering aus.

Mein Angebot an dich als Blogger

Hast du Fragen zur Vorgehensweise, ist dir noch etwas unklar?

Oder hast du nach der SSL-Umstellung noch Probleme, z.B. mit Mixed Content?

Ich bin zwar in erster Linie Blogger, aber durchaus technisch versiert. Deshalb biete ich dir gerne an, dir zu helfen und mir ein paar Minuten Zeit zu nehmen, um einen Blick auf deinen Blog zu werfen.

Schreibe einfach einen Kommentar zu diesem Beitrag, um mit mir in Verbindung zu treten. Bei Bedarf antworte ich nicht nur auf den Kommentar, sondern schicke eine Antwort auch an die beim Kommentieren hinterlegte Mailadresse.

Ich kann natürlich nicht versprechen, immer zeitnah reagieren oder jedes Problem erkennen und lösen zu können, gebe mir aber Mühe. 🙂

Zusätzliche Lektüre:

Inka von Blickgewinkelt hat einen empfehlenswerten Artikel zum selben Thema verfasst, wobei sie sich stärker auf solche Blogs fokussiert, die über einen eigenen Webserver (und kein Shared Hosting wie bei mir) verfügen.

Zur von mir nur kurz angerissenen Performance-Analyse mit Pingdom hat Thomas von Reisen-Fotografie einen sehr hilfreichen Artikel geschrieben, der dir bei der Optimierung hilft.