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.

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:

Eine Mixed Content Warnung in Google Chrome

Eine Mixed Content Warnung in Google Chrome

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:

Eine Mixed Content Warnung in Firefox

Eine Mixed Content Warnung in Firefox

Als nächstes ist ein Beispiel dafür, wie diese Warnung in Microsoft Edge aussieht:

Eine Mixed Content Warnung in Microsoft Edge

Eine Mixed Content Warnung in Microsoft Edge

Und hier ist, wie es im Internet Explorer erscheint:

Internet Explorer Mixed Content Warnung

Internet Explorer Mixed Content Warnung

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.

Das Betreiben deiner WordPress Seite über HTTPS ist nicht mehr optional. ✅ Aber der Wechsel von HTTP ➡️ HTTPS kann mit Mixed Content Warnungen einhergehen. Mit diesem Leitfaden erfährst du, wie du sie schnell lösen kannst. 💥Click to Tweet

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:

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:

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:

Du kannst Chrome DevTools auch über das Tools-Menü in deinem Browser öffnen:

Chrome-Entwickler-Tools im Browser-Tools-Menü

Chrome-Entwickler-Tools im Browser-Tools-Menü

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:

Chrome DevTools Mixed Content in der Konsole

Chrome DevTools Mixed Content in der Konsole

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:

Chrome DevTools Sicherheit

Chrome DevTools Sicherheit

Unter dem Reiter Netzwerk findest du auch eine Liste der blockierten Anfragen:

Chrome DevTools Netzwerk

Chrome DevTools Netzwerk

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:

Why No Padlock Zusammenfassung der Fehler bei Mixed Content

Why No Padlock Zusammenfassung der Fehler bei Mixed Content

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:

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:

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:

Das Suchen und Ersetzen Tool in MyKinsta

Das Suchen und Ersetzen Tool in MyKinsta

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:

HTTP zu HTTPS suchen und ersetzen in MyKinsta

HTTP zu HTTPS suchen und ersetzen in MyKinsta

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:

Bist du es leid, dass WordPress Hosting-Support auf untergeordneter Ebene 1 keine Antworten bietet? Teste unser erstklassiges Support-Team! Schau dir unsere Pläne an

The Better Search Replace WordPress Plugin

The Better Search Replace WordPress Plugin

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):

The Better Search Replace WordPress Plugin-Optionen

The Better Search Replace WordPress Plugin-Optionen

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.

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:

Mixed Content Warnung in der Konsole

Mixed Content Warnung in der Konsole

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:

HTTP externes Skript zum WordPress Header im Theme Editor hinzugefügt

HTTP externes Skript zum WordPress Header im Theme Editor hinzugefügt

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:

Warnungen zu Chrome ohne Mixed Content

Warnungen zu Chrome ohne Mixed Content

Firefox wird eine ähnliche Nachricht anbieten:

Firefox keine Mixed Content Warnungen

Firefox keine Mixed Content Warnungen

Und hier ist, was du in Microsoft Edge sehen wirst:

Microsoft Edge keine Warnungen zu Mixed Content

Microsoft Edge keine Warnungen zu Mixed Content

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.

Bereit für die Umstellung auf HTTPS, aber frustriert von Mixed Content Warnungen? 🥴 Lernt mit Hilfe dieses Leitfadens, wie ihr dieses Problem lösen könnt!Click to Tweet

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!


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Auto-Scaling, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an