iFrame

Über die iFrame-Komponente können fremde Inhalte einfach und ohne große Anpassung in die eigene Konsole integriert werden.

Konfiguration

Die iFrame-Komponente verfügt über weitere Konfigurationseinstellungen, die über die Argumente konfiguriert werden. 

{
    "module": {
      "prototype": "Alvine.Package.UI.Content.Iframe",
      "location": "//cdn.alvine.io/console/latest/alvine/package/ui/content/iframe.js"
    },
    "arguments": {
      "permissions": "allow-same-origin allow-scripts allow-popups allow-forms",
      "url": "http://example.com",
      "title": "My example",
      "frame": {
        "class": "embed-responsive-item",
        "auto-resize": true
      },  
      "container": {  
        "class": "embed-responsive embed-responsive-1by1"
      }
    },
    "handler": "example",
    "keybinding": "e",
    "navigation": {
      "label": "i18n:example",
      "mountpoint": "main.menu.favourites"
    }
}

Konfigurationswerte

Schlüssel Beschreibung Default Beispiel
permissions Berechtigungen die der Frame besitzen soll undefined allow-same-origin
url URL der im iFrame zu ladenden Webseite undefined
title Titel, der über dem Frame ausgegeben wird undefined <h4>My Frame</h4>
frame.auto-resize Automatische Höhenanpassung des Frames WAHR WAHR
frame.id ID des Frame-Containers (Standard: iframecomponent) iframecomponent myframe
frame.class CSS-Klasse, die dem iframe-Tag mitgegeben werden soll undefined embed-responsive-item
container.class CSS-Klasse des umschließenden DIV undefined embed-responsive embed-responsive-1by1

Titel

Der Titel, der über dem Frame ausgegeben werden soll, muss inkl. HTML definiert werden. Da es sich um ein Bootstrap-Card-Objekt handelt, kann die CSS-Klasse card-title genommen werden 

<h4 class="card-title">My Frame</h4>

Auto-Resize

Für die automatische Höhenanpassung wird das Plugin http://davidjbradshaw.github.io/iframe-resizer/ zum Einsatz. Damit diese Erweiterung funktioniert, muss im Zieldokument das folgende Javascript eingebunden werden.

<script src="//cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.5/iframeResizer.contentWindow.min.js"></script>

Um PDF oder ODF Dokumente anzeigen zu können, kann auf viewerjs zurückgegriffen werden.

Sicherheit

Die iFrame Komponente wird mit dem sandbox Attribute ausgeliefert und verhindert somit, dass der nachgeladene Inhalt auf die Konsole zugreifen kann.

Folgende Einschränkungen gelten:

  • JavaScript wird im gerahmte Dokument nicht ausgeführt werden. Dazu gehören nicht nur explizit JavaScript der über Script-Tags geladen wird, sondern auch Inline-Event-Handler und javascript: URLs. Dies bedeutet auch, dass in noscript-Tags enthaltenen Inhalte angezeigt werden, genau so, wie wenn der Benutzer selbst Skripte deaktiviert hat.
  • Das gerahmte Dokument wird in einem eigenen Herkunfts-Bereich (Origin) geladen; Das Dokument hat damit keinen Zugriff auf Daten jeglicher Herkunft. Das betrifft Cookies und andere Speichermechanismen (DOM Storage, Indexed DB, etc.)
  • Das gerahmte Dokument kann keine neuen Fenster oder Dialoge (über window.open oder target = "_ blank") erstellen.
  • Formulare können nicht benutzt werden.
  • Plugins werden nicht geladen.
  • Innerhalb des gerahmte Dokument kann man navigieren, jedoch hat es keinen Zugriff auf die Konsole. window.top.location Einstellung.
  • Elemente die autofocused Formularelemente, autoplaying Videos etc. beinhalten werden blockiert.
  • Pointer Lock Sperren werden nicht eingerichtet.
  • Das nahtlose Attribut wird ignoriert.

X-Origin

Aus Sicherheitsgründen werden einige Webseiten nicht in einem iFrame geladen. Muss man allerdings einen solchen Inhalt einbinden, kann man im Chrome und Firefox für diese Ausnahmefälle die Erweiterung Ignore X-Frame headers hinzufügen (Links siehe unten). Diese Erweiterungen schalten dieses Sicherheitsfeature ab. Wenn man dieses Feature damit ausschaltet, sollte man dem iFrame keine weiteren Berechtigungen geben.

Wichtig

Durch diese Plugins kann es zu großen Sicherheitsproblemen kommen. Nur einsetzen, wenn man weiß was man macht!

Berechtigungen

Die einzelnen Rechte können über die Berechtigungen gegeben werden.

  • allow-forms Erlaubt Formulare abzuschicken
  • allow-popups Erlaubt Popups (window.open(), showModalDialog(), target=”_blank”, etc.).
  • allow-pointer-lock Erlaubt pointer lock.
  • allow-same-origin erlaubt es dem Dokument seine Herkunft zu verwalten. Ein Dokument von https://example.com/ hat damit Zugriff auf die Daten von dieser Domain
  • allow-scripts erlaubt Javascript und das automatisch ausführen von trigger
  • allow-top-navigation erlaubt dem Dokument aus dem iframe auszubrechen
  • allow-popups-to-escape-sandbox erlaubt das öffnen eines neuen Tabs ohne Einschränkungen

Referenzen