Das Betreiben deiner WordPress Seite über HTTPS ist nicht mehr optional. Es ist nicht nur sicherer (alles ist verschlüsselt, nichts wird im Klartext übertragen), sondern es schafft auch Vertrauen, ist ein Ranking-Faktor für Suchmaschinen und liefert genauere Empfehlungsdaten. Leider können Betreiber von Webseiten bei der Migration von HTTP zu HTTPS auf verschiedene Probleme stoßen. Eines davon sind ‚Warnungen bei gemischten Inhalten‘.
Leistungsprobleme, die mit der Verschlüsselung zusammenhängen, wurden größtenteils dank HTTP/2 behoben, und Let’s Encrypt hat die gesamte Branche verändert, indem es dir eine einfache Möglichkeit bietet, kostenlose SSL-Zertifikate zu erhalten.
Am wichtigsten für Online-Unternehmen ist, dass Webbrowser wie Google Chrome und Mozilla Firefox bei Webseiten, die nicht über HTTPS laufen, hart durchgreifen und strengere Warnungen an potenzielle Besucher anzeigen. Wenn du zum Beispiel ältere TLS-Versionen verwendest, kannst du in Chrome auf ERR_SSL_OBSOLETE_VERSION-Benachrichtigungen stoßen. Warnungen sind das Letzte, was deine Besucher sehen sollen.
Um dir zu helfen, diese Probleme zu vermeiden, haben wir eine ausführliche Anleitung, wie du von HTTP zu HTTPS migrieren kannst. Nachdem du diesen Prozess befolgt hast, kannst du jedoch immer noch Warnungen mit gemischten Inhalten sehen.
Heute zeigen wir dir ein paar verschiedene Möglichkeiten, wie du dieses Problem auf deiner Webseite beheben kannst.
Willst du lieber die Video-Version sehen?
Was ist eine „Mixed Content Warnung“?
Eine Mixed Content Warnung erscheint im Browser eines Benutzers, wenn die zu besuchende WordPress Seite HTTPS und HTTP Skripte oder Inhalte zur gleichen Zeit lädt. Dies kann Probleme verursachen, da HTTP und HTTPS völlig getrennte Protokolle sind.
Wenn du auf HTTPS umsteigst, muss alles über dieses Protokoll laufen, einschließlich deiner Bilder, JavaScript-Dateien und so weiter. Unten sind einige Beispiele dafür, was passieren kann, wenn einige deiner Inhalte stattdessen immer noch über HTTP geladen werden.
Beispiele für Mixed Content Warnung
Chrome ist derzeit der Top-Browser, der von über 77% des Internets benutzt wird. Die folgende Warnung ist also das, was die meisten deiner Besucher sehen würden:
Natürlich benutzt nicht jeder Chrome.
Hier ist ein Beispiel dafür, was in Firefox passiert, wenn eine Mixed Content Warnung auf einer WordPress Seite angezeigt wird:
Als nächstes ist ein Beispiel dafür, wie diese Warnung in Microsoft Edge aussieht:
Und hier ist, wie es im Internet Explorer erscheint:
Wie du sehen kannst, ist der Internet Explorer wahrscheinlich einer der schlimmsten Orte, an dem diese Warnung erscheint, weil es tatsächlich die Darstellung der Seite unterbricht, bis das Popup angeklickt wird.
Das ist kein Fehler, den du möchtest, dass Besucher auf jedem Browser sehen können. Es kann behoben werden, aber zuerst musst du verstehen, warum es auftritt.
Was verursacht Mixed Content Warnungen?
Wir haben herausgefunden, dass die meisten Mixed Content Warnungen erscheinen, gleich nachdem jemand seine WordPress Seite von HTTP auf HTTPS umgestellt hat. Einige HTTP-Links werden einfach übertragen, was dazu führt, dass Mixed Content Warnungen ausgelöst werden.
Hier sind einige weitere Ursachen für diese Warnung:
- Du hast gerade einen neuen Service oder ein neues Plugin zu deiner Webseite hinzugefügt. Vor allem Entwickler verwenden manchmal absolute Pfade (http://yourdomain.com/style.css) in ihren Plugins oder Themes, um auf CSS und JavaScript zu verlinken, anstatt relative Pfade (/style.css) zu verwenden.
- Deine Bilder haben hartkodierte URLs (wie z.B. http://yourdomain.com/image.png), die über HTTP laufen. Diese können sich innerhalb von Beiträgen, Seiten oder sogar Widgets
- Sie verlinken auf HTTP-Versionen externer Skripte (gehostetes jQuery, Font Awesome, etc.).
- Du hast Videoskripte eingebettet, die HTTP statt HTTPS verwenden.
Leider kann es sein, dass du die wirkliche Ursache des Problems nicht aufdecken kannst, bis du mit der Fehlerbehebung beginnst.
In diesem Sinne werfen wir einen Blick auf einige Methoden, die ihr zur Behebung von Mixed Content Warnungen verwenden könnt.
Wie man Mixed Content Warnungen behebt (4 Schritte)
Du kannst den vier einfachen Schritten unten folgen, um deine WordPress Mixed Content Warnungen zu beheben. Dieser Prozess setzt voraus, dass du die folgenden Schritte bereits ausgeführt hast:
- Installierte ein SSL Zertifikat
- HTTP auf HTTPS umgeleitet (für die gesamte Webseite)
In den folgenden Beispielen verwenden wir eine Beispiel-Entwicklungs-Webseite.
Schritt 1: Finde heraus, welche Ressourcen über HTTP geladen werden
Das erste, was du tun musst, ist herauszufinden, welche Ressourcen noch über HTTP geladen werden.
Denke daran, dass diese Warnungen möglicherweise nur in bestimmten Bereichen deiner Webseite auftreten, nicht global. Navigiere zu der Seite, die die Warnung anzeigt und starte die Chrome DevTools, indem du sie drückst:
- Windows: F12 oder CTRL + Shift + I
- macOS : Cmd + Opt + I
Du kannst Chrome DevTools auch über das Tools-Menü in deinem Browser öffnen:
Es gibt ein paar Stellen, an denen du herausfinden kannst, welche Ressourcen nicht über HTTPS geladen werden.
Der erste ist der Konsolen-Tab. Beachte, dass du die Seite möglicherweise aktualisieren musst, nachdem du die Chrome DevTools geöffnet hast, damit alles richtig lädt.
Wenn Mixed Content Fehler vorhanden sind, werden sie entweder rot oder gelb markiert. Normalerweise werden sie von Informationen begleitet, die erklären, dass „Diese Anfrage wurde blockiert; der Inhalt muss über HTTPS zugestellt werden“. Das bedeutet, dass die Browsereinstellungen so konfiguriert sind, dass HTTP-Inhalte automatisch blockiert werden.
Um sicherzustellen, dass die Seiten nur über HTTPS geladen werden, hat Chrome damit begonnen, Mixed Content standardmäßig mit Chrome 79 zu blockieren. Zuletzt haben sie Funktionen entrollt, um die automatische Aktualisierung von gemischten Bildern und Medien zu starten.
Wenn du also die Chrome-DevTools verwendest, siehst du möglicherweise Mixed Content Meldungen, die anzeigen, dass einige angeforderte Elemente automatisch aktualisiert wurden:
Hier können wir deutlich sehen, dass es eine Vielzahl von unsicheren Elementen gibt, die die Mixed Content Warnungen verursachen, darunter ein Stylesheet und ein Skript.
Du wirst auch feststellen, dass eine Anfrage für ein unsicheres .jpg-Bild gestellt wurde, das automatisch auf HTTPS aktualisiert wurde. (Hinweis: Wenn dies in einem anderen Browser als Chrome wäre, würde es nicht automatisch aktualisiert werden).
Du kannst auch in der Registerkarte Sicherheit der Chrome DevTools nachsehen. Dort werden dir alle nicht sicheren Ursprünge angezeigt:
Unter dem Reiter Netzwerk findest du auch eine Liste der blockierten Anfragen:
Wenn du Chrome nicht verwendest, oder wenn du nur eine schnelle Zusammenfassung der Fehler haben möchtest, kannst du auch ein kostenloses Tool wie Why No Padlock benutzen.
Es scannt eine einzelne Seite und zeigt dir alle unsicheren Ressourcen an:
Dieses Tool ist einfach zu benutzen. Du gibst einfach deine URL ein und klickst auf Testseite, und es zeigt dir alle vorhandenen Fehler an. Außerdem ist es kostenlos!
HTTPS-Warnungen in Massen prüfen
Wenn du dir Sorgen um den Rest deiner Webseite machst, solltest du es vielleicht in Massen überprüfen. Hier sind einige empfohlene Optionen, um das zu tun:
- Es gibt ein kostenloses kleines Tool namens SSL Check von JitBit, mit dem du deine HTTPS-Webseite crawlen und nach unsicheren Bildern und Skripten suchen kannst, die in Browsern eine Warnmeldung auslösen. Die Anzahl der gecrawlten Seiten ist auf 400 pro Webseite begrenzt.
- Das Ahrefs Site Audit Tool hat die Fähigkeit, HTTPS/HTTP Mixed Content zu erkennen. Wenn du bereits Zugang zu dieser Lösung hast, oder jemand aus deinem Marketingteam es hat, kann es eine gute Möglichkeit sein, gründlich zu sein.
- HTTPS Checker ist eine Desktop-Software, die du installieren kannst, um deine Webseite zu scannen. Es kann dir helfen, nach großen Änderungen auf „nicht sichere“ Warnungen und Inhalte zu prüfen. Es ist für Windows, Mac und Ubuntu verfügbar. Der kostenlose Plan ermöglicht es dir, bis zu 500 Seiten pro Scan zu überprüfen.
- SSL Insecure Content Fixer ist ein WordPress Plugin, das du auf deiner Webseite installieren kannst, um Fehler aufzudecken, die zu Mixed Content Warnungen führen. Es ist kostenlos zu benutzen und führt sogar automatisch Korrekturen durch, um die Fehler zu beheben.
Wenn du eines der oben genannten Tools verwendest, kannst du Zeit sparen, da du nicht jede Seite deiner Webseite manuell auf Mixed Content Warnungen und Fehler überprüfen musst. Für eine gründliche Beurteilung der möglichen Fehler auf deiner Webseite könntest du eine Kombination dieser Lösungen in Betracht ziehen.
Schritt 2: Überprüfe, ob HTTP-Ressourcen über HTTPS zugänglich sind
Der nächste Schritt ist die Bestätigung, dass die Ressourcen, die über HTTP geladen werden, über HTTPS zugänglich sind. Höchstwahrscheinlich sind sie das, du musst nur die Links aktualisieren.
Als Beispiel nehmen wir an, dass unsere Mixed Content Fehler auf das folgende unsichere jQuery Skript und das .jpg Bild hinweisen:
- http://ajax.googleapis.com/ajax/libs/jquery/3.31/jquery.min.js
- http://example-site.com/wp-content/50d00acf6e4%2Fpuppy-thumb.jpg?v=1600261043278
Wenn wir diese beiden URLs nehmen, sie in die Adressleiste unseres Browsers eingeben und am Anfang „http“ durch „https“ ersetzen, können wir sehen, dass sie gut geladen werden. Deshalb müssen wir einfach auf unserer Webseite suchen und ersetzen.
Schritt 3: WordPress Suchen und Ersetzen durchführen
Es gibt viele Möglichkeiten, eine WordPress Suche und Ersetzung durchzuführen. In diesem Abschnitt werden wir dich durch zwei verschiedene empfohlene Optionen führen.
Wenn du neugierig bist, raten wir dir davon ab, ein Tool wie Really Simple SSL zu benutzen. Obwohl es ein großartiges Plugin ist, ist es am besten, sich langfristig nicht auf eine solche Lösung zu verlassen. Du wirst später nicht wieder auf HTTP umsteigen, also ist es am besten, es richtig zu machen und deine HTTP-URLs in deiner Datenbank zu aktualisieren (wie wir dir weiter unten zeigen werden).
Wenn du ein Kinsta-Kunde bist, kannst du unser „Suchen und Ersetzen„-Tool benutzen, das direkt im MyKinsta Dashboard verfügbar ist.
Gehe auf die Tools-Seite deiner Webseite und klicke auf Suchen und Ersetzen:
Als nächstes gibst du in das Suchfeld den Wert ein, nach dem du in der Datenbank suchen möchtest.
In diesem Fall verwenden wir unsere HTTP-Domain: http://kinstalife.com. Klicke dann auf die Schaltfläche Suchen. Das Search and Replace Tool wird die Anzahl der Vorkommen des angegebenen Strings anzeigen.
Aktiviere die Ersetzen-Box, um mit dem Ersetzen fortzufahren. Gib in das Feld Ersetzen mit ein, was den gesuchten Wert ersetzen soll. In diesem Fall verwenden wir unsere HTTPS Domain: https://kinstalife.com.
Wir empfehlen außerdem, das Kästchen Clear cache when ready aktiviert zu lassen, um den Kinsta-Cache automatisch zu leeren, nachdem der Such- und Ersetzungsvorgang abgeschlossen ist. Klicke abschließend auf die Schaltfläche Ersetzen:
Wichtig: Achte darauf, dass du in keinem dieser Felder eine vor- oder nachlaufende Leerstelle einfügst, da dies zu unerwünschten Ergebnissen führen kann.
Suchen und Ersetzen Alternativen
Wenn du Kinsta nicht verwendest, kannst du dieselbe Aufgabe mit dem kostenlosen Plugin Better Search Replace erledigen, und es dann einfach löschen, wenn du fertig bist:
Du kannst dieses Tool aus dem WordPress Plugin Verzeichnis herunterladen, oder indem du es in deinem WordPress Dashboard suchst.
Nachdem du es aktiviert hast, suche einfach nach deiner HTTP-Domain (http://yourdomain.com) und ersetze es durch deine HTTPS-Domain (https://yourdomain.com):
Beachte, dass dieses Plugin nicht mit der neuesten Version von WordPress getestet wurde.
Als Alternative könntest du auch eine Suche durchführen und mit dem interconnect/it Search Replace DB PHP Script oder WP-CLI ersetzen.
In unserem Video erfährst du mehr über die Verwendung von Suchen und Ersetzen in WordPress:
Schritt 4: Bestätige, dass die Mixed Content Warnungen verschwunden sind
Nachdem du mit dem Suchen und Ersetzen fertig bist, solltest du deine Webseite noch einmal überprüfen, um sicherzustellen, dass die Mixed Content Warnungen verschwunden sind. Wir empfehlen dir, deine Webseite im Frontend zu besuchen und auf ein paar Seiten herumzuklicken, während du auf die Browser-Statusanzeige oben in der Adressleiste schaust.
Auf unserer Webseite können wir sehen, dass das .jpg-Bild jetzt repariert ist, aber eine unsichere Skriptwarnung bleibt bestehen.
Das liegt daran, dass wir eine Suche und Ersetzung auf Ressourcen durchgeführt haben, die von unserer eigenen Domain geladen werden. Die jQuery-Warnung wird durch ein externes Skript verursacht, das manuell aktualisiert werden muss:
In diesem Fall musste das Skript manuell zu unserem WordPress Header (header.php) hinzugefügt werden. Es sollte eine relative URL verwenden, also aktualisierten wir es auf //ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js:
Das Suchen und Ersetzen wird höchstwahrscheinlich alle deine Probleme beheben.
Im Allgemeinen wirst du nur dann auf zusätzliche Probleme stoßen, wenn du etwas Hardcodiertes auf deiner WordPress Seite hast.
Wenn du denkst, dass ein externes Skript in einem deiner Plugins oder Themes fest einprogrammiert ist und du Probleme hast, es aufzuspüren, kannst du dich gerne an den entsprechenden Entwickler wenden, um Hilfe zu erhalten.
Keine Mixed Content Warnungen Beispiele
So wisst ihr nun, worauf ihr achten müsst, um diese Mixed Content Fehler zu beheben.
Hier ist ein Beispiel dafür, was in Chrome passiert, wenn alles korrekt über HTTPS geladen wird, ohne Mixed Content Warnungen:
Firefox wird eine ähnliche Nachricht anbieten:
Und hier ist, was du in Microsoft Edge sehen wirst:
Obwohl der Wortlaut der Nachricht je nach verwendetem Browser leicht variieren kann, solltest du eine Benachrichtigung sehen, die auf eine sichere Verbindung hinweist. Wenn du dies tust, wirst du wissen, dass du es nicht mehr mit Mixed Content Fehlern auf deiner Webseite zu tun hast.
Was ist mit HSTS?
Einige von euch fragen sich vielleicht, warum ihr nicht einfach HSTS (HTTP Strict Transport Security) verwenden könnt, um dieses Problem zu beheben. HSTS wurde geschaffen, um den Browser zu zwingen, sichere Verbindungen zu benutzen, wenn eine Webseite über HTTPS läuft.
Es ist ein Sicherheitsheader, den du zu deinem Webserver hinzufügen kannst und wird im Response-Header als ‚Strict-Transport-Security‘ angezeigt.
HSTS ist jedoch keine schnelle Lösung für alle Mixed Content Warnungen. HSTS kümmert sich lediglich um Weiterleitungen, während die Mixed Content Warnung eine Funktion des Browsers selbst ist. Du hast auch keine Kontrolle darüber, ob Webseiten Dritter HSTS aktivieren.
Daher müsst ihr immer eure http:// URLs aktualisieren. Esa Jokinen geht in dieser Serverfehler-Diskussion näher auf die Gründe dafür ein.
Zusätzliche Empfehlungen (Sonderfälle)
Wenn du den Elementor Page Builder benutzt, musst du auch in die Elementor-Einstellungen gehen und dort die URL deiner Webseite aktualisieren, damit die CSS-Dateien mit der neuen URL neu generiert werden.
Wenn du das getan hast, sollte das Löschen des Caches alle unsicheren Warnungen aufgrund von Elementor auflösen. Wenn du das Kinsta CDN benutzt, ist es außerdem empfehlenswert, auch die CDN-Zone zu leeren.
Zusammenfassung
Mixed Content Warnungen können frustrierend sein, besonders wenn es eine Handvoll Ursachen gibt, auf die sie zurückgeführt werden können. Glücklicherweise gibt es ein paar einfache Schritte, die du unternehmen kannst, um diese Probleme zu beheben.
In den meisten Fällen sollte ein einfaches Suchen und Ersetzen deine Mixed Content Warnungen schnell beheben und deine Webseite in nur wenigen Minuten wieder normal funktionieren. Wenn das nicht alles behebt, ist es wahrscheinlich, dass ein oder zwei hartcodierte Skripte zurückbleiben. Du musst sie finden und manuell aktualisieren, um diesen Fehler zu beheben oder einen Entwickler beauftragen, der das für dich erledigen kann.
Wenn ihr Feedback habt oder auf irgendwelche Probleme stößt, lasst es uns unten im Kommentarbereich wissen!
Chefredakteur bei Kinsta und Content Marketing Berater für WordPress Plugin-Entwickler. Verbinde dich mit Matteo auf Twitter.
Schreibe einen Kommentar