Probleme mit gemischten Inhalten beheben

Jo-el van Bergen
Jo-el van Bergen

Die Unterstützung von HTTPS für Ihre Website ist ein wichtiger Schritt, um Ihre Website und Ihre Nutzer vor Angriffen zu schützen. Durch gemischte Inhalte kann dieser Schutz jedoch unbrauchbar werden. Wie im Abschnitt Was sind gemischte Inhalte? erklärt, werden zunehmend unsichere gemischte Inhalte von Browsern blockiert.

In diesem Leitfaden stellen wir Techniken und Tools vor, mit denen bestehende Probleme mit gemischten Inhalten behoben und neue Probleme vermieden werden können.

Gemischte Inhalte auf Ihrer Website finden

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

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

Beim Beispiel für passive gemischte Inhalte werden die folgenden Warnungen ausgegeben. Wenn der Browser den Inhalt unter einer https-URL findet, wird er automatisch aktualisiert und es wird eine Meldung angezeigt.

Chrome-Entwicklertools, bei denen Warnungen angezeigt werden, wenn gemischte Inhalte erkannt und aktualisiert werden

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

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

Wenn Sie solche Warnungen für http://-URLs auf Ihrer Website sehen, müssen Sie sie in der Quelle der Website korrigieren. Es ist hilfreich, eine Liste dieser URLs zusammen mit der Seite, auf der Sie sie gefunden haben, zur Problembehebung zu erstellen.

Gemischte Inhalte auf Ihrer Website finden

Sie können direkt im Quellcode nach gemischten Inhalten suchen. Suchen Sie in der Quelle nach http:// und nach Tags, die HTTP-URL-Attribute enthalten. Beachten Sie, dass http:// im Attribut href von Anchor-Tags (<a>) häufig kein Problem mit gemischten Inhalten darstellt. Einige bemerkenswerte Ausnahmen werden später erläutert.

Wenn Ihre Website mit einem Content-Management-System veröffentlicht wird, werden bei der Veröffentlichung von Seiten möglicherweise Links zu unsicheren URLs eingefügt. Beispielsweise können Bilder in einer vollständigen URL statt mit einem relativen Pfad enthalten sein. Du musst sie in den CMS-Inhalten finden und korrigieren.

Probleme mit gemischten Inhalten beheben

Wenn Sie gemischte Inhalte in der Quelle Ihrer Website gefunden haben, können Sie das Problem folgendermaßen beheben:

Wenn Sie in der Console die Meldung erhalten, dass eine Ressourcenanfrage automatisch von HTTP auf HTTPS aktualisiert 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. Ändern Sie dazu in der URL-Leiste des Browsers http:// in https:// und versuchen Sie, 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:

  • Schließen Sie die Ressource von einem anderen Host ein, falls verfügbar.
  • Sie laden die Inhalte direkt herunter und hosten sie auf Ihrer Website, sofern Sie gesetzlich dazu 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 der Fehler nicht mehr angezeigt wird.

Vorsicht bei nicht standardmäßiger Verwendung von Tags

Achten Sie auf eine nicht standardmäßige Tag-Nutzung auf Ihrer Website. Anker-Tag-URLs (<a>) führen beispielsweise nicht zu Fehlern bei gemischten Inhalten, da sie dazu führen, dass der Browser eine neue Seite aufruft. Das bedeutet, dass sie in der Regel nicht behoben werden müssen. Einige Bildergalerie-Skripts überschreiben jedoch die Funktion des <a>-Tags und laden die durch das Attribut href angegebene HTTP-Ressource in eine Lightbox-Anzeige auf der Seite. Dies führt zu einem Problem mit gemischten Inhalten.

Gemischte Inhalte in großem Umfang verarbeiten

Die obigen manuellen Schritte funktionieren 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. Sie können den Browser mithilfe der Content Security Policy anweisen, Sie über gemischte Inhalte zu informieren und sicherzustellen, dass Ihre Seiten nie unerwartet unsichere Ressourcen laden.

Content Security Policy

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

Du kannst diese Features für eine Seite aktivieren, indem du den Content-Security-Policy- oder Content-Security-Policy-Report-Only-Header in die Antwort aufnimmst, die von deinem Server gesendet wird. Außerdem kannst du Content-Security-Policy (jedoch nicht Content-Security-Policy-Report-Only) mithilfe eines <meta>-Tags im <head>-Bereich deiner Seite festlegen.

Gemischte Inhalte mit der Content Security Policy finden

Mit der Content Security Policy können Sie Berichte zu gemischten Inhalten auf Ihrer Website erfassen. Um diese Funktion zu aktivieren, lege die Anweisung Content-Security-Policy-Report-Only fest, indem du sie als Antwortheader für deine Website hinzufügst.

Antwortheader:

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

Wenn ein Nutzer eine Seite Ihrer Website besucht, sendet sein Browser Berichte im JSON-Format zu allen Verstößen, die gegen die Content Security Policy verstoßen, 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 URL der Seite, auf der der Richtlinienverstoß aufgetreten ist, sowie die URL der Unterressource, die gegen die Richtlinie verstoßen hat. Wenn Sie Ihren Berichtsendpunkt so konfigurieren, dass diese Berichte protokolliert werden, können Sie die gemischten Inhalte auf Ihrer Website erfassen, ohne jede Seite selbst aufrufen zu müssen.

Dabei sind die folgenden beiden Einschränkungen zu beachten:

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

Der Leitfaden zu Content Security Policy enthält weitere Informationen und einen Beispielendpunkt.

Alternativen zur Berichterstellung über die CSP

Wenn Ihre Website von einer Plattform wie Blogger für Sie gehostet wird, sind Sie möglicherweise nicht berechtigt, Header zu ändern und eine CSP hinzuzufügen. Alternativ können Sie auch einen Website-Crawler wie HTTPSChecker oder Scan für gemischte Inhalte nutzen, um Probleme auf Ihrer Website zu finden.

Upgrade unsicherer Anfragen wird durchgeführt

Unterstützte Browser

  • 44
  • 17
  • 48
  • 10.1

Quelle

Browser beginnen mit dem Upgrade und blockieren unsichere Anfragen. Sie können CSP-Anweisungen verwenden, um das automatische Upgrade oder Blockieren dieser Assets zu erzwingen.

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

Beispiel: Eine Seite enthält ein Bild-Tag mit einer HTTP-URL wie <img src="http://example.com/image.jpg">.

Der Browser stellt stattdessen eine sichere Anfrage für https://example.com/image.jpg, wodurch der Nutzer keine gemischten Inhalte enthä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 in den Abschnitt <head> des Dokuments einbetten, indem Sie ein <meta>-Element verwenden:

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

Wie bei der automatischen Browseraktualisierung schlägt die aktualisierte Anfrage fehl und die Ressource wird nicht geladen, wenn die Ressource nicht über HTTPS verfügbar ist. Dies trägt zur Sicherheit Ihrer Seite bei. Die Anweisung upgrade-insecure-requests geht weiter als das automatische Browserupgrade, da versucht wird, Anfragen zu aktualisieren, die der Browser derzeit nicht tut.

Die Anweisung upgrade-insecure-requests wird in <iframe>-Dokumente übertragen und sorgt dafür, dass die gesamte Seite geschützt ist.