27. Okt 2014

Inhalte korrekt in eine sichere Webseite einbetten

Verfasst von

Hat man schon einmal eine eigene Homepage erstellt oder surft viel im WWW, sieht man früher oder später Warnungen folgender Art „Unsichere Inhalte werden blockiert.“ „Diese Seite enthält unsichere Inhalte.“ Diese werden abhängig vom jeweiligen Browser unterschiedlich dargestellt. Und verunsichern viele Nutzer.

Hier findet Ihr eine Anleitung, die euch dabei hilft, diese Warnungen auf euren eigenen Seiten zu vermeiden.

Visuelle Warnungen in verschiedenen Browsern

Internet Explorer
Chrome
Firefox

Begrifflichkeiten

Unsicherer/gemischter Inhalt

… bezeichnet Ressourcen, wie Bilder oder Medien, auf verschlüsselten Webseiten, die unverschlüsselt übertragen werden.

Diese Inhalte erzeugen i.a. nur Warnungen, werden aber z.B. in Chrome, Safari und Firefox angezeigt.

Beispiel

Auf einer Webseite, die über https:// aufgerufen wird, könnte sich folgendes Bild befinden: <img src="http://uni-halle.de/im/sod/common/img/signet_center.jpg" alt="Schriftzug der Martin-Luther-Universtät Halle-Wittenberg" />

Unsicherer, aktiver Inhalt

… ist eine spezielle Variante, bei der die Quelle des Inhalts mittels Variablen in ihrer Adresse referenziert werden, oder solche, die per Script- oder Frame-Element eingebunden werden

Diese Inhalte werden i.a. komplett geblockt.

Beispiel

Auf einer Webseite, die über https:// aufgerufen wird, könnte eine Schriftart wie folgt eingebunden werden: <link rel="stylesheet" id="droidsans-css" href="http://fonts.googleapis.com/css?family=Droid+Sans" type="text/css" media="all">

Lösungsansätze

Bevor man das Problem lösen kann, muss man herausgefunden haben, welche Ressourcen Probleme machen und wie diese adressiert werden können.

Exkurs in die Schreibweisen von http-URLs in Webseiten

In HTML gibt es verschiedene Möglichkeiten, eine URL zu schreiben. Wir gehen exemplarisch davon aus, dass wir uns auf dieser Adresse befinden: https://blogs.urz.uni-halle.de/blog/

Variante	Schreibweise	Beispiel	Verweis
Allgemein	[[{protokoll}:]//{server}]/{resource}
Absolut mit Protokoll	protokoll://server/resource	http://magazin.uni-halle.de/impressum/
Absolut, ohne Protokoll	//server/resource	//magazin.uni-halle.de/impressum/	https://magazin.uni-halle.de/impressum/
Absolut, ohne Protokoll	Das Protokoll wird von der bereits geöffneten Seite übernommen.
Relativ zum Server	/resource	/dienst	https://blogs.urz.uni-halle.de/dienst
Relativ zum Server	Protokoll und Server werden übernommen
Relativ zum Dokument	resource	page/2/	https://blogs.urz.uni-halle.de/blog/page/2/

Allgemein gilt: Sollen Inhalte des gleichen Servers eingebunden werden, kann man http[s]://{servername} weglassen, sodass man nur noch die Resourcen mit vorangehendem Slash („/“) benennen muss.

Inhalte externer Seiten sollten nach Möglichkeit protokoll-frei (ohne „http:“ oder „https:“) eingebunden werden. Das Ergebnis wäre dann eine URL der Art //glauben.uni-halle.de/kontakt. Das Protokoll wird dann vom Browser definiert, abhängig davon, wie auf die eigentliche Seite zugegriffen wird. Voraussetzung dafür ist aber, dass die eingebundene Quelle sowohl über https als auch http die gleichen Inhalte liefert.

Zusätzlich muss man für aktive Inhalte, von anderen Servern seitens des eigenen Webseiten-Servers einen entsprechenden Header mitsenden, der den anderen Server erlaubt.