Das Betreiben Deiner WordPress-Site über HTTPS ist heute nicht mehr nur optional. 🔒 Es ist nicht nur sicherer (alles ist verschlüsselt, nichts wird in einfachem Text übermittelt), sondern baut auch Vertrauen auf, ist ein SEO-Rankingfaktor, und liefert genauere Verweisdaten. Mit der Verschlüsselung verknüpfte Performance-Probleme wurden größtenteils dank HTTP/2 behoben. Let´s Encrypt hat die gesamte Branche verändert und bietet Dir eine einfache Möglichkeit, kostenlose SSL-Zertifikate zu erhalten.

Für einige Unternehmen ist jedoch einer der wichtigsten Gründe jener, dass Webbrowser wie Chrome und Firefox hart gegen diejenigen vorgehen, die nicht über HTTPS laufen, und hier strengere Warnungen anzeigen. Das ist das Letzte, was Deine Besucher sehen sollen!

Wir haben eine ausführliche Anleitung zum Migrieren von HTTP zu HTTPS. Ein sehr häufig auftretendes Problem, worauf Websitebesitzer danach stoßen, sind „Mixed Content-Warnungen“. Heute zeigen wir Dir einige verschiedene Möglichkeiten, wie Du diese auf Deiner WordPress-Site beheben kannst.

Was ist eine Mixed Content-Warnung?

Eine Mixed Content-Warnung erscheint im Browser eines Nutzers, wenn auf der WordPress-Site gleichzeitig HTTPS- und HTTP-Scripts oder -Inhalte geladen werden. Man kann nicht beide laden, da es sich um vollkommen separate Protokolle handelt. Wenn Du zu HTTPS migrierst, muss alles über HTTPS laufen.

Tatsächlich dokumentierte das Technik-Magazin Wired seinen Übergang von HTTP zu HTTPS und eine Mixed Content-Warnung, der es begegnete:

„„[…] eine der größten Herausforderungen bei der Umstellung auf HTTPS besteht darin, alle unsere Inhalte/unseren gesamten Content dafür vorzubereiten, über sichere Verbindungen bereitgestellt zu werden. Wenn eine Seite über HTTPS geladen wird, müssen alle anderen Assets (wie Bilder und Javascript-Dateien) auch über HTTPS geladen werden. Es wird vielfach über diese Probleme mit „Mixed Content“ oder über Ereignisse, bei denen ein unsicheres HTTP-Asset im Kontext einer sicheren HTTPS-Seite geladen wird, berichtet. Um unser Rollout richtig durchführen zu können, müssen wir sicherstellen, dass wir weniger Probleme mit Mixed Content haben – dass wir so viel Inhalt von WIRED.com bereitstellen, wie auf eine sichere Art und Weise möglich ist. „

Im Folgenden findest Du einige Beispiele dafür, was in den Browsern passiert, wenn Du diese Warnungen nicht behebst.

Beispiel für eine Chrome Mixed Content-Warnung

Hier ist ein Beispiel, was in Chrome passiert, wenn auf einer WordPress-Site eine Mixed Content-Warnung ausgelöst wird. Laut NetMarketShare ist Chrome derzeit führend in Bezug auf den Marktanteil von Browsern und wird von über 60% des Webs genutzt. Daher ist die folgende Warnung wahrscheinlich das, was die meisten Deiner Besucher sehen würden.

Chrome Mixed Content-Warnung

Chrome Mixed Content-Warnung

Beispiel für eine Firefox Mixed Content-Warnung

Hier ist ein Beispiel, was in Firefox passiert, wenn auf einer WordPress-Site eine Mixed Content-Warnung ausgelöst wird.

Firefox Mixed Content-Warnung

Firefox Mixed Content-Warnung

Beispiel für eine Microsoft Edge Mixed Content-Warnung

Hier ist ein Beispiel, was in Microsofts Edge Browser passiert, wenn auf einer WordPress-Site eine Mixed Content-Warnung ausgelöst wird.

Microsoft Edge Mixed Content-Warnung

Microsoft Edge Mixed Content-Warnung

Beispiel für eine Internet Explorer Mixed Content-Warnung

Hier ist ein Beispiel, was im Internet Explorer passiert, wenn auf einer WordPress-Site eine Mixed Content-Warnung ausgelöst wird. Wie Du sehen kannst, zeigt sich IE hier als einer der Schlechtesten, da er das Rendering der Seite tatsächlich unterbricht, bis das Popup angeklickt wird. Glücklicherweise besitzt Internet Explorer nicht mehr so ​​viel Marktanteil im Browsersegment.

Internet Explorer Content-Warnung

Internet Explorer Content-Warnung

Was verursacht Mixed Content-Warnungen?

Wir haben festgestellt, dass Mixed Content-Warnungen meistens dann angezeigt werden, wenn jemand seine WordPress-Site gerade von HTTP zu HTTPS migriert hat. HTTP-Links werden einfach übertragen, wodurch Mixed Content-Warnungen ausgelöst werden. Ein weiterer Grund könnte sein, dass Du gerade einen neuen Dienst oder ein neues Plugin hinzugefügt hast.

Hier sind einige zusätzliche Beispiele dafür, was sonst noch eine Warnung auslösen könnte:

  • Plugin-Entwickler verwenden in ihren Plugins oder Designs manchmal absolute Pfade (http://yourdomain.com/style.css), um an CSS und JavaScript anzuknüpfen, anstatt relative Pfade (/style.css) zu verwenden.
  • Bilder haben hardcoded URLs (http://yourdomain.com/image.png), die auf HTTP verweisen. Diese könnten innerhalb eines Beitrags, einer Seite oder sogar eines Widgets vorliegen.
  • Deine Verknüpfung zu HTTP-Versionen externer Skripte. (Gehostete jQuery, Font Awesome usw.)
  • Du hast Videoskripts eingebettet, die HTTP anstelle von HTTPS verwenden.

Wie Mixed Content-Warnungen behoben werden können

Um Deine WordPress Mixed Content-Warnungen zu beheben, folge einfach den simplen Schritten unten. Voraussetzung dafür ist, dass Du Folgendes bereits erledigt hast:

In den Beispielen werden wir unsere Entwicklungsseite (wpdev.ink) verwenden.

Schritt 1

Das Erste, was du tun musst, ist, herauszufinden, welche Ressourcen immer noch über HTTP geladen werden. Navigiere zu der Seite, auf der dies passiert, und starte Chrome DevTools. Denk daran, dass es vielleicht nur in bestimmten Bereichen Deiner Webseite und nicht global geschieht.

  • Windows: F12 oder CTRL + Shift + I
  •  MAC: Cmd + Opt + I)

Du kannst Chrome DevTools auch über das Tools-Menü öffnen.

Chrome DevTools starten

Chrome DevTools starten

Schritt 2

Es gibt einige Stellen, an denen Du überprüfen kannst, welche Ressourcen nicht über HTTPS geladen werden. Die erste ist die Registerkarte „Console„. Hinweis: Möglicherweise musst Du die Seite aktualisieren, nachdem Du Chrome DevTools geöffnet hast, damit alles ordnungsgemäß geladen werden kann.

Nachfolgend können wir leicht erkennen, dass ein unsicheres Bild mit einer HTTP-Version der Site verknüpft ist und ein Link auf eine von HTTP gehostete Version von jQuery verweist.

Chrome DevTools Mixed Content in Console

Chrome DevTools Mixed Content in Console

Du kannst auch im „Security„-Tab nachsehen. Hier werden die nicht-sicheren Ursprünge angezeigt und Du kannst auf  „View the request in the network panel“ klicken, um die Anforderung im Netzwerkbereich zu sehen. Hinweis: Möglicherweise musst Du die Seite aktualisieren, nachdem Du Chrome DevTools geöffnet hast, damit alles ordnungsgemäß geladen werden kann.

Chrome DevTools Security

Chrome DevTools Security

Zu guter Letzt kannst Du die Anforderungen auch in der Registerkarte „Network“ ansehen. Hinweis: Möglicherweise musst Du die Seite aktualisieren, nachdem Du Chrome DevTools geöffnet hast, damit alles ordnungsgemäß geladen werden kann.

Chrome DevTools Network

Chrome DevTools Network

Wenn Du nicht Chrome verwendest oder nur eine kurze Zusammenfassung der Fehler wünschst, kannst Du auch ein kostenloses Tool wie Why No Padlock verwenden. Es scannt eine einzelne Seite und zeigt Dir alle unsicheren Ressourcen an.

Why No Padlock?

Why No Padlock?

HTTPS-Warnungen in Massen prüfen

Wenn Du Dir Sorgen um den Rest Deiner Webseite machst, möchtest Du sie möglicherweise im Ganzen überprüfen. Hier sind einige empfohlene Optionen.

  • Es gibt ein kostenloses kleines Tool namens SSL Check von JitBit, mit dem Du Deine HTTPS WordPress-Site crawlen und nach unsicheren Bildern und Skripten durchsuchen kannst, die eine Warnmeldung in Browsern auslösen. Die Anzahl der gecrawlten Seiten ist auf 200 pro Website begrenzt.
  • Das Ahrefs Audit Tool kann jetzt gemischte HTTPS / HTTP-Inhalte erkennen. Wenn Du oder jemand aus Deinem Marketingteam bereits Zugriff darauf hat, kann dies ein guter Weg sein, gründlich zu sein.
  • HTTPS Checker ist eine Desktop-Software, die Du installieren kannst, um Deine Seite zu scannen. Es kann Dir helfen, nach großen Änderungen nach „nicht sicheren“ Warnungen und Inhalten zu suchen. Es ist unter Windows, Mac und Ubuntu verfügbar. Mit der kostenlosen Version kannst Du bis zu 100 Seiten prüfen.

Schritt 3

Der nächste Schritt besteht darin, zu bestätigen, dass die Ressourcen, die über HTTP geladen werden, über HTTPS zugänglich sind. Das sind sie sehr wahrscheinlich und Du musst nur die Links aktualisieren. Aus unserem obigen Beispiel werden wir das unsichere Bild und die gehostete jQuery verwenden.

  • http://wpdev.ink/wp-content/uploads/2018/06/website-never-done.jpg
  • http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

Wenn wir beide URLs verwenden, sie in die Adressleiste unseres Browsers eingeben und HTTPS an den Anfang anhängen, können wir feststellen, dass sie gut geladen werden. Daher müssen wir einfach damit weitermachen, ein „Search and Replace“ auf unserer Webseite durchzuführen.

Schritt 4

Es gibt viele verschiedene Möglichkeiten, ein WordPress-Search and Replace durchzuführen. In diesem Beitrag führen wir Dich durch zwei verschiedene empfohlene Optionen.

Wenn Du neugierig bist, raten wir von der Verwendung des Really Simple SSL-Plugins ab. Es ist zwar ein großartiges Plugin, aber Du solltest Dich nicht langfristig auf ein Plugin dieser Art verlassen. Du wirst später nicht mehr zurück auf HTTP migrieren, also geh es richtig an und aktualisiere Deine HTTP-URLs in Deiner Datenbank (wie unten gezeigt).

Wenn Du ein Kinsta-Kunde bist, kannst Du unser Search and Replace-Tool verwenden, das direkt im MyKinsta-Dashboard verfügbar ist. Klicke unter Sites auf „Manage“, neben der Site, auf der Du ein Search and Replace durchführen möchtest. Klicke dann auf „Tools“ und Du findest das Search and Replace-Tool unten.

Kinsta Search and Replace-Tool

Kinsta Search and Replace-Tool

  1. Gib in das Search-Feld den Wert ein, nach dem Du in der Datenbank suchen möchtest, in diesem Fall unsere HTTP-Domäne: http://wpdev.ink.
  2. Gib in das Replace-Feld den neuen Wert ein, der verwendet werden soll, um den gesuchten Wert zu ersetzen. In diesem Fall handelt es sich um unsere HTTPS-Domäne: https://wpdev.ink.
  3. Vergewissere Dich, dass zuerst die Option „Dry Run“ ausgewählt ist. Dadurch wird gezählt, wie viele Ersetzungen vorgenommen werden, ohne dass tatsächlich Ersetzungen vorgenommen werden. Klicke dann auf „Replace“.

Wichtig: Stelle sicher, dass Du in keinem der Felder einen vor-/nachgestellten Leerraum eingibst, da dies zu unerwünschten Ergebnissen führen kann.

HTTP zu HTTPS Search and Replace

HTTP zu HTTPS Search and Replace

Es wird eine Warnung angezeigt, die sichergeht, ob Du den Befehl ausführen möchtest, die Anzahl der Ersetzungen zu berechnen. Klicke zur Bestätigung auf „Replace“. Hinweis: Im „Dry Run“-Modus werden keine Datenbankänderungen vorgenommen.

Search and Replace berechnet Ersetzungen

Search and Replace berechnet Ersetzungen

Daraufhin wird Dir die Anzahl der Ersetzungen, die insgesamt durchgeführt werden, angezeigt.

Anzahl der Ersetzungen

Anzahl der Ersetzungen

Du kannst dann die Auswahl von „Dry Run“ aufheben und erneut auf „Replace“ klicken, um das Search and Replace durchzuführen und Änderungen in Deiner Datenbank vorzunehmen. Hinweis: Ein Backup wird automatisch erstellt, wenn dies ausgeführt wird (Backup Identifier: beforesearchandreplace). So kannst Du es bei Bedarf jederzeit rückgängig machen.

Haben Sie mit Ausfallzeiten und WordPress-Problemen zu kämpfen? Kinsta ist die Hosting-Lösung, die Ihnen Zeit spart! Sieh dir unsere Features an
Live Search and Replace

Live Search and Replace

Dann siehst Du eine endgültige Bestätigung der Anzahl der durchgeführten Ersetzungen.

Bestätigung der Live Search and Replace

Bestätigung der Live Search and Replace

Wenn Du kein Kinsta-Kunde bist, kannst Du dieselbe Aufgabe mit dem kostenlosen Better Search Replace Plugin erledigen und das Plugin einfach wieder löschen, nachdem Du fertig bist.

Better Search Replace Plugin

Better Search Replace Plugin

Herunterladen kannst Du es aus dem WordPress-Repository oder durch Suchen in Deinem WordPress-Dashboard unter „Add New“ -Plugins. Suche nach der Aktivierung einfach nach Deiner HTTP-Domäne (http://yourdomain.com) und ersetze diese durch Deine HTTPS-Domäne (https://yourdomain.com).

Better Search Replace Optionen

Better Search Replace Optionen

Alternativ kannst Du auch mit dem Interconnect/it Search Replace DB PHP Script oder WP-CLI ein Search and Replace durchführen.

Schritt 5

Nachdem Du das Search and Replace abgeschlossen hast, solltest Du Deine Webseite noch einmal überprüfen, um zu bestätigen, dass die Mixed Content-Warnungen verschwunden sind. Wir empfehlen, einfach nur Deine Webseite zu besuchen und einige Seiten aufzurufen, während Du die Statusanzeige des Browsers in der Adressleiste im Blick behältst.

Auf unserer Webseite können wir feststellen, dass das unsichere Bild jetzt repariert ist, aber die gehostete jQuery-Warnung immer noch bestehen bleibt. Der Grund dafür ist, dass wir ein Search and Replace auf jene Ressourcen, die von unserer eigenen Domain geladen werden, angewendet haben. Dies ist jedoch ein externes Skript, das manuell aktualisiert werden muss.

Mixed Content-Warnung

Mixed Content-Warnung

In diesem Fall wurde das Skript manuell in unseren WordPress-Header (header.php) eingefügt. Das Skript dürfte eine relative URL verwenden. Daher haben wir es aktualisiert zu: //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

HTTP external script

HTTP external script

Für die meisten von Euch wird das Search and Replace wahrscheinlich bereits alle Eure Probleme beheben. Es sind wohl nur diejenigen unter Euch, die etwas auf Ihrer WordPress-Site fest codiert haben, die zusätzlichen Problemen begegnen könnten. Wenn Du glaubst, dass ein externes Skript in einem Deiner Plugins oder Designs fest codiert ist und Probleme hast, es zu finden, wende Dich ruhig an den Entwickler um Unterstützung zu erhalten.

Beispiel für Chrome: Keine Mixed Content-Warnungen

Hier ein Beispiel, was in Chrome passiert, wenn alles ordnungsgemäß über HTTPS geladen wird und keine Mixed Content-Warnungen auftreten.

Chrome: Keine Mixed Content-Warnungen

Chrome: Keine Mixed Content-Warnungen

Beispiel für Firefox: Keine Mixed Content-Warnungen

Hier ein Beispiel, was in Firefox passiert, wenn alles ordnungsgemäß über HTTPS geladen wird und keine Mixed Content-Warnungen auftreten.

Firefox: Keine Mixed Content-Warnungen

Firefox: Keine Mixed Content-Warnungen

Beispiel für Microsoft Edge: keine Mixed Content-Warnungen

Hier ein Beispiel, was in Microsoft Edge passiert, wenn alles ordnungsgemäß über HTTPS geladen wird und keine Mixed Content-Warnungen auftreten.

Microsoft Edge: Keine Mixed Content-Warnungen

Microsoft Edge: Keine Mixed Content-Warnungen

Was ist mit HSTS?

Einige von Euch fragen sich vielleicht, warum Ihr nicht einfach HSTS (HTTP Strict Transport Security) verwenden könnt, um diese Probleme zu beheben. HSTS wurde erstellt, um den Browser zu zwingen, sichere Verbindungen zu verwenden, wenn eine Seite über HTTPS läuft. Es handelt sich um einen Sicherheits-Header, den Du Deinem Webserver hinzufügst. Er wird im Antwort-Header als Strict-Transport-Security angezeigt.

HSTS ist keine schnelle Lösung für alle Mixed Content-Warnungen. HSTS behandelt lediglich Weiterleitungen, während die Mixed Content-Warnung eine Funktion des Browsers selbst ist. Du hast auch keinerlei Kontrolle über Websites Dritter, die HSTS ermöglichen. Daher musst Du http://-URLs immer aktualisieren.

Esa Jokinen geht tiefer auf die Gründe dieser Serverfehler-Diskussion ein.

Zusätzliche Empfehlungen (Sonderfälle)

  • Wenn Du den Elementor Page Builder verwendest, musst Du auch die Elementor-Einstellungen aufrufen und die URL Deiner Webseite dort aktualisieren, damit die CSS-Dateien mit der neuen URL regeneriert werden. Wenn Du dies getan hast, sollten durch das Löschen des Cache alle unsicheren Warnungen, die mit Elementor zusammenhängen, gelöscht werden.
  • Wenn Du Kinsta-CDN verwendest, wird empfohlen, auch die CDN-Zone zu säubern.

Zusammenfassung

Für die meisten von Euch sollte ein einfaches Search and Replace Deine Mixed Content-Warnungen schnell beseitigen und Deine Webseite in nur wenigen Minuten wieder normalisieren. Wenn nicht alles korrigiert wird, werden höchstwahrscheinlich ein oder zwei Skripts übergeblieben sein, die hart codiert sind. Diese musst Du finden und manuell aktualisieren.

Falls Du uns Feedback geben willst oder auf Probleme stoßen solltest, teile uns dies unten in den Kommentaren mit.