Zu Content springen
Deutsch
Anmelden
Zum Kundenportal
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.

📎 iFrame - Inhalte aus Drittsystemen einbetten

Mit der iFrame-Funktion können Inhalte externer Webanwendungen direkt in ein Teamboard eingebettet werden – zum Beispiel Dashboards aus Power BI, digitale Formulare aus MES-Systemen oder API-Dokumentationen. Dadurch bleibt der Fokus im Meeting erhalten, da kein Toolwechsel nötig ist. Besonders hilfreich ist das bei Analysen, Statusberichten oder der Arbeit mit interaktiven Daten. Die Inhalte im iFrame sind interaktiv – Dropdowns, Buttons und andere Bedienelemente lassen sich direkt nutzen (sofern technisch unterstützt). Die Einbettung erfolgt dabei rein lesend, es können keine Inhalte verändert werden.

🔍 Inhalt

📌 iFrame-Ansicht erstellen und konfigurieren

  1. Klicken Sie auf das Zahnrad-Symbol im Teamnamen, um die Teamverwaltung zu öffnen.
    📸 Screenshot: Teamverwaltung öffnen

  2. Wechseln Sie in den Reiter Verfügbare Ansichten.

  3. Klicken Sie unten auf das Plus-Symbol, um eine neue Ansicht hinzuzufügen.

  4. Wählen Sie den Layouttyp iFrame aus.

  5. Geben Sie einen Namen für die Ansicht ein (z. B. „iFrame“).
    📸 Screenshot: Bezeichnung der Ansicht eingeben

  6. Klicken Sie auf Speichern und schließen.

  7. Wählen Sie im Board die neue Ansicht iFrame aus. Diese ist zunächst leer. Klicken Sie auf URL hinzufügen, um eine externe Seite einzubinden.
    📸 Screenshot: Leere Ansicht mit Hinweis zur URL-Einbindung, URL hinzufügen öffnen

  8. Tragen Sie die URL der externen Seite ein (z. B. https://editor.swagger.io/).
    📸 Screenshot: URL für eingebettete Seite eingeben

  9. Bestätigen Sie mit Speichern und schließen.

  10. Die eingebettete Webseite wird direkt angezeigt.
    📸 Screenshot: Eingebettete Swagger-Seite im Board

ℹ️ Hinweis: Der Layouttyp „iFrame“ kann sowohl in bestehenden Teamboards als auch in Teamboard-Vorlagen (Schritt 4) hinzugefügt werden. Die URL ist kein Pflichtfeld.

⚠️ Achtung: Im iFrame-Layout ist der rechte Bereich für das Abweichungsmanagement nicht enthalten.

✨ Tipp: Achten Sie bei der eingebundenen Seite auf responsive Darstellung. Ist die Seite nicht responsiv, können Scrollbalken innerhalb des iFrames erscheinen.

📌 Voraussetzungen für die Einbettung

ℹ️ Hinweis: Eine detaillierte technische Beschreibung der Voraussetzungen für die iFrame-Einbettung finden Sie im folgenden Artikel: 📎 iFrame: Technische Voraussetzungen

Damit Inhalte eines Drittanbieters per iFrame eingebettet werden können, müssen folgende technische Anforderungen erfüllt sein:

  1. iFrame muss erlaubt sein

    • Kein Header X-Frame-Options: DENY oder SAMEORIGIN

    • CSP-Header muss frame-ancestors https://app.euredomain.tld o. ä. enthalten

  2. HTTPS-Verbindung

    • Die eingebettete Seite muss über HTTPS erreichbar sein (kein Mixed Content)

  3. Authentifizierung

    • Ideal: Single Sign-on via SSO (z. B. SAML/OIDC) mit gemeinsamem Identity Provider

    • Alternativ: Tokenbasierte Einbettung oder manuelle Anmeldung (mit Merken-Funktion im Browser)

  4. Content-Security-Policy (CSP) eurer Anwendung

    • Die Domain des Drittanbieters muss für frame-src (oder child-src) freigegeben sein

  5. Technisches Verhalten & Darstellung

    • Die eingebettete Seite sollte responsive sein

    • iFrames können bei zu kleiner Fenstergröße Scrollbalken enthalten

✨ Tipps & Best Practices

  • Für SSO: Achten Sie darauf, dass die eingebettete Seite denselben IdP (z. B. EntraID) nutzt.

  • Stellen Sie sicher, dass iFrame-relevante Header korrekt gesetzt sind.

  • Wenn möglich, mit dem Drittanbieter tokenbasierte Einbindung vereinbaren (z. B. embed token, signed URL).


❓ FAQ

Warum wird die eingebettete Seite nicht angezeigt?
Prüfen Sie in der Browser-Konsole, ob eine der folgenden Meldungen erscheint:

  • "refused to display in a frame"

  • Mixed-Content-Warnungen (HTTP in HTTPS)

  • CSP-Fehler bzgl. frame-ancestors

Kann ich Seiten mit Login einbetten?
Ja, sofern die Authentifizierung iFrame-tauglich ist (SSO oder tokenbasiert). Cookies müssen korrekt gesetzt sein (SameSite=None; Secure).

Wie kann ich Drittanbieter informieren, welche Anforderungen sie erfüllen müssen?Senden Sie folgendes Template:

Bitte erlauben Sie iFrame-Einbettung für folgende Origin(s):

https://app.euredomain.tld
https://*.euredomain.tld

CSP-Beispiel:
Content-Security-Policy: frame-ancestors https://app.euredomain.tld;

Bitte entfernen Sie ggf. X-Frame-Options: DENY oder passen Sie es entsprechend an.

Werden Fehlermeldungen von ValueStreamer angezeigt?
Nein, technische Fehler (z. B. 403, Login-Fehler) stammen von der eingebetteten Seite oder vom Browser.

Können Inhalte im iFrame interaktiv genutzt werden (Buttons, Dropdowns)?
Ja, es besteht voller lesender Zugriff inkl. Klickbarkeit.