Probleme mit gemischten Inhalten beheben

Jo-el van Bergen
Jo-el van Bergen
X
Rachel Andrew

Die Unterstützung von HTTPS für Ihre Website ist ein wichtiger Schritt, um Ihre Website und Ihre Nutzer vor Angriffen zu schützen. Gemischte Inhalte können diesen Schutz jedoch unwirksam machen. Browser blockieren zunehmend unsichere gemischte Inhalte, wie unter Was sind gemischte Inhalte? erläutert.

In diesem Leitfaden stellen wir Techniken und Tools vor, mit denen du bestehende Probleme mit gemischten Inhalten beheben und neue verhindern kannst.

Gemischte Inhalte durch Aufrufen Ihrer Website finden

Wenn Sie eine HTTPS-Seite in Google Chrome besuchen, werden Sie vom Browser in der JavaScript-Konsole auf gemischte Inhalte als Fehler und Warnungen hingewiesen.

Unter Was sind gemischte Inhalte? finden Sie eine Reihe von Beispielen und erfahren, wie die Probleme in den Chrome-Entwicklertools gemeldet werden.

Ein Beispiel für passiven gemischten Inhalt mit den folgenden Warnungen: Wenn der Browser den Inhalt unter einer https-URL finden kann, wird er automatisch aktualisiert und es wird eine Meldung angezeigt.

Chrome-Entwicklertools mit den Warnungen, die angezeigt werden, wenn gemischte Inhalte erkannt und aktualisiert werden

Aktive gemischte Inhalte werden blockiert und es wird eine Warnung angezeigt.

Chrome-Entwicklertools mit den Warnungen, die angezeigt werden, wenn aktive gemischte Inhalte blockiert werden

Wenn du solche Warnungen für http://-URLs auf deiner Website findest, musst du sie im Quellcode deiner Website beheben. Es ist hilfreich, eine Liste dieser URLs zusammen mit der Seite zu erstellen, auf der Sie sie gefunden haben, damit Sie sie korrigieren können.

Gemischte Inhalte auf Ihrer Website finden

Sie können direkt in Ihrem Quellcode nach gemischten Inhalten suchen. Suchen Sie in Ihrer Quelle nach http:// und nach Tags, die HTTP-URL-Attribute enthalten. Beachten Sie, dass http:// im href-Attribut von Anker-Tags (<a>) oft kein Problem mit gemischten Inhalten ist. Es gibt jedoch einige wichtige Ausnahmen, die später erläutert werden.

Wenn deine Website mit einem Content-Management-System veröffentlicht wird, kann es sein, dass beim Veröffentlichen von Seiten Links zu unsicheren URLs eingefügt werden. Beispielsweise können Bilder mit einer vollständigen URL anstelle eines relativen Pfads eingefügt werden. Sie müssen diese im CMS-Inhalt finden und beheben.

Gemischte Inhalte korrigieren

Wenn Sie gemischte Inhalte im Quellcode Ihrer Website gefunden haben, können Sie das Problem mit den folgenden Schritten beheben.

Wenn Sie in der Console die Meldung erhalten, dass eine Ressourcenanfrage automatisch von HTTP auf HTTPS umgestellt wurde, können Sie die http://-URL für die Ressource in Ihrem Code bedenkenlos in https:// ändern. Sie können auch prüfen, ob eine Ressource sicher verfügbar ist, indem Sie in der URL-Leiste des Browsers http:// in https:// ändern und versuchen, die URL in einem Browsertab zu öffnen.

Wenn die Ressource nicht über https:// verfügbar ist, sollten Sie eine der folgenden Optionen in Betracht ziehen:

  • Binden Sie die Ressource von einem anderen Host ein, falls verfügbar.
  • Laden Sie die Inhalte herunter und hosten Sie sie direkt auf Ihrer Website, sofern Sie dazu rechtlich berechtigt sind.
  • Schließen Sie die Ressource vollständig von Ihrer Website aus.

Nachdem Sie das Problem behoben haben, rufen Sie die Seite auf, auf der Sie den Fehler ursprünglich gefunden haben, und prüfen Sie, ob er nicht mehr angezeigt wird.

Vorsicht bei der Verwendung nicht standardmäßiger Tags

Achten Sie auf die Verwendung nicht standardmäßiger Tags auf Ihrer Website. Beispielsweise führen URLs in Anker-Tags (<a>) nicht zu Fehlern aufgrund gemischter Inhalte, da sie den Browser veranlassen, eine neue Seite aufzurufen. Sie müssen also in der Regel nicht behoben werden. Einige Skripts für Bildergalerien überschreiben jedoch die Funktionalität des <a>-Tags und laden die durch das href-Attribut angegebene HTTP-Ressource in eine Lightbox-Anzeige auf der Seite, was zu einem Problem mit gemischten Inhalten führt.

Gemischte Inhalte in großem Umfang verarbeiten

Die oben beschriebenen manuellen Schritte eignen sich gut für kleinere Websites. Bei großen Websites oder Websites mit vielen separaten Entwicklungsteams kann es jedoch schwierig sein, den Überblick über alle geladenen Inhalte zu behalten. Dabei kann Ihnen die Content Security Policy helfen. Mit ihr können Sie den Browser anweisen, Sie über gemischte Inhalte zu informieren, und dafür sorgen, dass auf Ihren Seiten nie unerwartet unsichere Ressourcen geladen werden.

Content Security Policy

Die Content Security Policy (CSP) ist eine vielseitige Browserfunktion, mit der Sie gemischte Inhalte in großem Umfang verwalten können. Mit dem CSP-Berichtsmechanismus können Sie gemischte Inhalte auf Ihrer Website verfolgen und Richtlinien zur Durchsetzung bereitstellen, um Nutzer durch das Aktualisieren oder Blockieren gemischter Inhalte zu schützen.

Du kannst diese Funktionen für eine Seite aktivieren, indem du den Header Content-Security-Policy oder Content-Security-Policy-Report-Only in die Antwort deines Servers einfügst. Außerdem können Sie Content-Security-Policy (aber nicht Content-Security-Policy-Report-Only) mit einem <meta>-Tag im <head>-Bereich Ihrer Seite festlegen.

Gemischte Inhalte mit Content Security Policy finden

Sie können die Content Security Policy verwenden, um Berichte zu gemischten Inhalten auf Ihrer Website zu erfassen. Wenn Sie diese Funktion aktivieren möchten, legen Sie die Anweisung Content-Security-Policy-Report-Only fest, indem Sie sie als Antwortheader für Ihre Website hinzufügen.

Antwortheader:

Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint

Wenn ein Nutzer eine Seite auf Ihrer Website besucht, sendet sein Browser JSON-formatierte Berichte zu allen Verstößen gegen die Content Security Policy an https://example.com/reportingEndpoint. In diesem Fall wird jedes Mal ein Bericht gesendet, wenn eine Unterressource über HTTP geladen wird. Diese Berichte enthalten die Seiten-URL, unter der der Richtlinienverstoß aufgetreten ist, und die URL der Unterressource, die gegen die Richtlinie verstoßen hat. Wenn du deinen Berichterstellungsendpunkt so konfigurierst, dass diese Berichte protokolliert werden, kannst du die gemischten Inhalte auf deiner Website verfolgen, ohne jede Seite selbst besuchen zu müssen.

Dabei ist Folgendes zu beachten:

  • Nutzer müssen Ihre Seite in einem Browser aufrufen, der den CSP-Header versteht. Das gilt für die meisten modernen Browser.
  • Sie erhalten nur Berichte für Seiten, die von Ihren Nutzern besucht wurden. Wenn Sie also Seiten mit wenig Traffic haben, kann es einige Zeit dauern, bis Sie Berichte für Ihre gesamte Website erhalten.

Weitere Informationen und einen Beispielendpunkt finden Sie im Leitfaden zur Content Security Policy.

Alternativen zum Melden mit CSP

Wenn deine Website von einer Plattform wie Blogger gehostet wird, hast du möglicherweise keinen Zugriff, um Header zu ändern und eine CSP hinzuzufügen. Eine praktikable Alternative könnte stattdessen die Verwendung eines Website-Crawlers sein, der Probleme auf Ihrer Website für Sie findet, z. B. HTTPSChecker oder Mixed Content Scan.

Unsichere Anfragen aktualisieren

Browser Support

  • Chrome: 44.
  • Edge: 17.
  • Firefox: 48.
  • Safari: 10.1.

Source

Browser beginnen, unsichere Anfragen zu aktualisieren und zu blockieren. Sie können CSP-Anweisungen verwenden, um ein automatisches Upgrade oder Blockieren dieser Assets zu erzwingen.

Die CSP-Anweisung upgrade-insecure-requests weist den Browser an, unsichere URLs zu aktualisieren, bevor Netzwerkanfragen gestellt werden.

Wenn eine Seite beispielsweise ein Bild-Tag mit einer HTTP-URL wie <img src="https://example.com/image.jpg"> enthält,

Der Browser stellt stattdessen eine sichere Anfrage für https://example.com/image.jpg, sodass der Nutzer keine gemischten Inhalte erhält.

Sie können dieses Verhalten aktivieren, indem Sie einen Content-Security-Policy-Header mit dieser Anweisung senden:

Content-Security-Policy: upgrade-insecure-requests

Oder indem Sie dieselbe Anweisung inline im <head>-Abschnitt des Dokuments mit einem <meta>-Element einbetten:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Wenn die Ressource nicht über HTTPS verfügbar ist, schlägt die aktualisierte Anfrage fehl und die Ressource wird nicht geladen. Das ist auch beim automatischen Upgrade im Browser der Fall. So bleibt die Sicherheit Ihrer Seite gewahrt. Die Anweisung upgrade-insecure-requests geht über das automatische Browser-Upgrade hinaus und versucht, Anfragen zu aktualisieren, die der Browser derzeit nicht aktualisiert.

Die upgrade-insecure-requests-Anweisung wird auf <iframe>-Dokumente übertragen, sodass die gesamte Seite geschützt ist.

Zurück
Was sind gemischte Inhalte?
Weiter
Wann sollte HTTPS für die lokale Entwicklung verwendet werden?