Ausgewählte Infomationen

Warum kann ich eine fremde Webseite (URL) nicht per iFrame in meiner Webseite einbinden und wie verhindere ich, dass meine eigene Webseite (URL) per iFrame in fremden Seiten eingebaut wird?

 iFrames sind ein sehr einfache Technik, eigene oder fremde Seiten in einer Webseite einzubinden. Allerdings muss man sich auch der Risiken dieser Technik bewusst sein. Diese Risiken können mit einer einfachen Sicherheitsschranke minimiert werden. Diese Sicherheitsschranke heißt Content Security Policy oder kurz CSP.

Vereinfacht ausgedrückt bestimmt CSP, wie eine Webseite(URL) im Browser aufgerufen wird und von wo sie ihre Inhalte beziehen darf. Natürlich sind CSP Einstellungen nicht die einzige Möglichkeit, die Art und Weise des Aufrufs einer Webseite zu schützen. CSP ist nur ein Teilbereich aus einer Vielzahl von HTTP Sicherheits- und anderen Mechnismen.

In diesem Beitrag beschäftigen wir uns mit dem Aspekt des Einbindens von externen Inhalten per <iframe>.

Wie richte ich CSP ein?

CSP Direktiven werden als HTTP-Header oder alternativ als meta-Tag im HTML-Code der Seite mitgegeben.

CSP via meta-Tag einbinden

Das Einbinden via meta-Tag ist für weniger technisch versierte Personen sicher einfacher, hat aber den Nachteil, dass nicht alle Direktiven verwendet werden können.

<meta http-equiv="Content-Security-Policy" content="frame-ancestor 'self';" />

Das Beispiel weist den Browser an, Inhalte ausschließlich von jener Url zu laden, von der aus sie ursprünglich aufgerufen wurden (frame-ancestor 'self';). Die Webseite darf sich also nur selbst aufrufen.

CSP via HTTP Header

CSP per HTTP Header an den Browser schicken ist die sicherste Methode, da die Header-Information vom Webserver ausgeliefert wird. Um das Einbinden einer Seite per iFrame zu unterbinden reicht also wieder folgende Definition:

Content-Security-Policy: frame-ancestor 'self';

Syntax

Content-Security-Policy: frame-ancestors <Quelle>;
Content-Security-Policy: frame-ancestors <Mit Leerzeichen getrennte List an Quellen>;

Quellen

Quelldefinitionen können folgende Ausprägung haben:

<host-Quelle>

Internet-Hosts nach Name oder IP-Adresse sowie optional ein URL-Schema und/oder eine Portnummer, getrennt durch Leerzeichen. Die Adresse der Website kann einen optionalen führenden Platzhalter (das Sternchen '*') enthalten, und Sie können einen Platzhalter (wiederum '*') als Portnummer verwenden, um anzuzeigen, dass alle zulässigen Ports für die Quelle gültig sind. Einfache Anführungszeichen, die den Host umgeben, sind nicht erlaubt.

Beispiele

• http://*.example.com Findet alle Versuche, von einer beliebigen Subdomain von example.com unter Verwendung des URL-Schemas http: zu laden.
• mail.example.com:443 Entspricht allen Versuchen, auf Port 443 auf mail.example.com zuzugreifen.
• https://store.example.com Findet alle Versuche, über https: auf store.example.com zuzugreifen.

<Schema der Quelle>

Ein Schema wie http: oder https:. Der Doppelpunkt ist erforderlich und das Schema sollte nicht in Anführungszeichen gesetzt werden. Sie können auch Datenschemata angeben (nicht empfohlen).

'self'

Bezieht sich auf den Ursprung, von dem das geschützte Dokument bereitgestellt wird, einschließlich desselben URL-Schemas und derselben Portnummer. Sie müssen die einfachen Anführungszeichen einschließen. Einige Browser schließen blob und filesystem ausdrücklich von den Quellrichtlinien aus. Seiten, die diese Inhaltstypen zulassen müssen, können sie mit dem Attribut Data angeben.

'none'

Es darf keine Daten-Quelle geladen weren. Die einfachen Anführungszeichen sind erforderlich.

CSP bei Joomla und Wordpress

Joomla bietet die Konfiguration über sein Backend an, bei Wordpress benötigt man wie gewohnt ein Plugin von einem Drittanbieter. Natürlich besteht bei beiden Systemen die Möglichkeit die htaccess-Datei entsprechend selbst zu konfigurieren.