Skip to main content

The Forrester Wave™: XDR Platforms, 2. Quartal 2026

Bericht holen
Über unsPartnerSupport|Login
Elastic logo
Kostenlosen Test startenVertrieb kontaktieren

Wie man Kibana-Dashboards einbettet

By
Carly Richmond

Frontend-Ingenieure wie ich werden häufig gebeten, bestehende Dashboards aus Quellen wie Kibana® in eine JavaScript-Webanwendung einzubetten. Diese Aufgabe musste ich mehrfach ausführen, da wir nutzergenerierte Ansichten schnell bereitstellen oder den Nutzern die Kontrolle über eine bestimmte Ansicht geben wollten. Wenn man die regelmäßigen Fragen bedenkt, die uns aus der wunderbaren Entwicklergemeinschaft erreichen, bin ich damit nicht allein.

Datenvisualisierungstools wie Kibana-Dashboards ermöglichen es selbst Nutzern mit geringen Design- oder technischen Kenntnissen, schnell und einfach Ansichten auf Basis von Elasticsearch® Daten zu erstellen und Prototypansichten zu entwickeln. Das bedeutet in der Tat, dass die Einbettung eines Dashboards in eine bestehende Webanwendung der schwierigste Teil ist – insbesondere wenn wir benutzerdefinierte Web-Steuerelemente integrieren wollen, um die Datenansicht so zu gestalten, dass den Benutzern ein einheitlicher Stil und ein einheitliches Benutzererlebnis geboten wird.

Hier gehe ich durch Codebeispiele, wie man Kibana-Dashboards in eine Web-App mit HTML-Iframes einbetten kann. Ich werde auch die Kibana-Authentifizierung für diese Ansichten behandeln und wie man benutzerdefinierte Steuerungen mit JavaScript an eingebettete Ansichten verbindet.

Was ist ein Iframe?

Beide in diesem Artikel beschriebenen Beispiele verwenden einen iframe, um unser Dashboard einzubetten. Ein iframe, gekennzeichnet durch das HTML-Tag<iframe>, ermöglicht es, eine andere Webseite in das aktuelle Dokument einzubetten. Konkret binden wir das Global Flight Dashboard, das aus dem Beispieldatensatz „Sample flight data“ geladen wurde, in unser Elastic®-Deployment ein.

Wenn Sie andere Quellen in Ihre Anwendung einbetten, ist es wichtig, sicherzustellen, dass dies eine vertrauenswürdige Datenquelle ist, auf die Nutzer Zugriff haben sollten. Wir müssen geeignete Sicherheitsrichtlinien für Inhalte, Einschränkungen mit der Sandbox-Eigenschaft und Berechtigungen zur Begrenzung der Handlungen der eingebetteten Inhalte nutzen. Indem wir das Sandbox-Attribut in unserem iframe nicht spezifizieren , fügen wir standardmäßig alle Einschränkungen hinzu.

Die Performance ist ebenfalls ein Aspekt, der bei der Einbindung von Inhalten Dritter in Ihre Anwendung berücksichtigt werden sollte. Da iframes mehr Bandbreite verbrauchen können als andere Ressourcen, kann die Nutzung vieler davon in einer einzigen Anwendung die gesamte Anwendung verlangsamen. Wenn Sie mehrere Kibana-Dashboards in Ihre Anwendung einbetten möchten, versuchen Sie, die Anzahl der Dashboards so weit wie möglich zu begrenzen und einen Anwendungsleistungstest durchzuführen. Es ist zwar einfach, Komponenten und Dashboards hinzuzufügen, aber als Entwickler müssen wir sicherstellen, dass wir den Nutzern die benötigten Daten liefern und nicht jedes noch so schicke Steuerelement, das sie sich wünschen. Bei der Wahl zwischen Dashboards und Visualisierungen sollte man also mit den Verbrauchern zusammenarbeiten, um herauszufinden, was sie wirklich brauchen.

Grundlegende Einbettung mit HTML-iframe

Der Code für die Aufnahme des Global Flight Dashboards in Ihre Webanwendung, wie in diesem einfachen Beispiel behandelt, wird einfach von Kibana über die Option „Teilen“ generiert:

Kibana-Einbettungscode-Diagramm

Ein Iframe-Snippet, das die von Ihnen ausgewählten relevanten Optionen sowie die aktuellen Filter hinzufügt, wird für Sie generiert, damit Sie es in Ihr HTML einfügen können:

<iframe src="https://my-deployment:9243/app/dashboards#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?embed=true&_g=(refreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-1y%2Fd%2Cto%3Anow))&show-top-menu=true&show-query-input=true&show-time-filter=true" height="600" width="800"></iframe>

Der generierte Codeausschnitt verwendet Pixelmaße für Breite und Höhe des iFrames. Die korrekte Größenbestimmung stellt oft eine Herausforderung dar, um sicherzustellen, dass die Größe des iFrames dem Inhalt entspricht. Es empfiehlt sich, die Größe des iFrames relativ zum Viewport mithilfe der Viewport-Attribute `vw` und `vh` oder Media Queries für verschiedene Bildschirmgrößen im Rahmen eines modernen responsiven Designs festzulegen.

Angesichts der Anzahl der verfügbaren Einstellungen kann es verwirrend sein, herauszufinden, was Sie benötigen. Mit den Optionen können Sie den Status des Dashboards und der im Iframe sichtbaren Steuerelemente konfigurieren.

Die Art der zu generierenden URL kann eine von zwei unterschiedlichen Optionen sein:

  1. Snapshot: Eine URL, die den vollständigen aktuellen Zustand des Dashboards Codierung, was bedeutet, dass Änderungen am Dashboard in der eingebetteten Version nicht vorhanden sind. 
  2. Gespeichertes Objekt: Verwenden Sie eine URL, die auf die gespeicherte Objekt-ID des Dashboards verweist. Dies bedeutet, dass alle Änderungen, die nach der Generierung der URL am Dashboard vorgenommen werden, für die Nutzer der JavaScript-Anwendung sichtbar sind.

Die Erfahrung des Autors ist, dass sich diese Dashboards ändern können. Daher die Option „Gespeichertes Objekt“ wäre die am besten geeignete Option zum Einbetten, um sicherzustellen, dass Dashboard-Änderungen, die nach der Generierung der URL vorgenommen wurden, sichtbar sind.

Die Include -Einstellungen kennzeichnen die zusätzlichen Steuerungen, die oben im eingebetteten Dashboard enthalten sind:

Kibana-Dashboard-Elemente
  1. Oberes Menü: Einstellungen mit Dashboard-Funktionen wie Bearbeiten und Vollbild, gesteuert durch die Einbindung show-top-menu=true in der Kibana-URL. 
  2. Abfrage: Die KQL-Abfrageleiste ermöglicht es, die im Dashboard sichtbaren Daten zu filtern, dargestellt durch den Parameter show-query-input=true der URL. 
  3. Zeitfilter: Der Datumswähler zur Auswahl des Datumsbereichs für die Daten im Dashboard, aktiviert über show-time-filter=true innerhalb der URL.
  4. Filterleiste: Die Einstellungen zum Hinzufügen einer Datenfilterung werden ausgeblendet. Hierfür muss der URL-Parameterhide-filter-bar auf truegesetzt werden.

Ohne die öffentliche URL zu verwenden, werden wir aufgefordert, uns einzuloggen, um auf das Dashboard zuzugreifen. Zum jetzigen Zeitpunkt ist die Benutzererfahrung noch nicht reibungslos, aber das Dashboard ist für diejenigen zugänglich, die über Anmeldeinformationen verfügen.

Eingebettetes Dashboard ohne anonyme Authentifizierung

Automatische Anmeldung

Um sicherzustellen, dass das Dashboard automatisch angezeigt wird, muss die Authentifizierung in das Dashboard in Kibana integriert werden, sodass Nutzer ihre Anmeldedaten nicht sowohl für die JavaScript-Anwendung als auch für das Dashboard eingeben müssen. Dies sorgt für ein reibungsloses Nutzungserlebnis. Dies kann auf zwei Arten erfolgen:

  1. Aktivieren anonyme Authentifizierung, um allen eingehenden Anfragen, bei denen kein Authentifizierungstoken extrahiert werden kann, einen Standardsatz an Anmeldeinformationen und Berechtigungen zuzuweisen (verfügbar in der kostenlosen Version).

  2. Unterstützung für SAML Single Sign-On (SSO) Anbieter hinzufügen, um nicht authentifizierte Nutzer zum SSO-Portal weiterzuleiten und authentifizierte Nutzer direkt zum Dashboard zu führen. Dies ist ein lizenziertes Feature.

Hier behandeln wir die anonyme Option. Zunächst müssen wir einen anonymen Authentifizierungsanbieter anonymous1 zu unserem kibana.ymlhinzufügen:

xpack.security.authc.providers:
  anonymous.anonymous1:
    order: 0
    credentials:
      username: "my_anonymous_user"
      password: "password"

Die iFrame-URL muss ebenfalls neu generiert werden, um den Parameterauth_provider_hintanzugeben, damit die konfigurierten Anmeldeinformationen für den Anbieter anonymous1 mit dem eingebetteten Inhalt verknüpft werden können:

<iframe src="https://my-deployment-9f9945.kb.eu-west-2.aws.cloud.es.io:9243/app/dashboards?auth_provider_hint=anonymous1#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?embed=true&_g=(refreshInterval%3A(pause%3A!f%2Cvalue%3A120000)%2Ctime%3A(from%3Anow-1y%2Cto%3Anow))&show-time-filter=true" height="600" width="800"></iframe>

Wird der Parameter „auth_provider_hint=anonymous1“ nicht angegeben, kann man als Gast nicht auf das Dashboard zugreifen. Ebenso führt das Fehlen einer entsprechenden Nutzerrolle in Kibana mit dem korrekten Benutzernamen und Passwort zu Authentifizierungsfehlern:

Eingebettete Authentifizierung ungültige Anmeldeinformationen

Um dies zu korrigieren, stellen Sie bitte sicher, dass Sie einen Nutzer mit dem korrekten Passwort in Ihrer kibana.yml registriert haben. Es wird empfohlen, die Rechte dieses Kontos auf das erforderliche Minimum zu beschränken, da der Zugriff nicht authentifizierten Nutzern gewährt wird.

Kibana erstellt Authentifizierungsbenutzer

An diesem Punkt, denken Sie vielleicht, dass Sie bereit sind. Wenn Sie jedoch versuchen, sich mit Ihrem Dashboard zu verbinden, werden Sie einige seltsame, wiederholte Aktualisierungsereignisse feststellen:

Richtlinienblock für eingebettete Dashboard-Inhalte

Dieses Problem wird dadurch verursacht, dass der Browser das Kibana-Dashboard blockiert. Moderne Webbrowser erzwingen die Same-Origin-Policy, um die Inhalte eingebetteter Seiten einzuschränken. Zwei URLs haben denselben Ursprung, wenn sie dasselbe Protokoll, denselben Port und denselben Host verwenden. Vereinfacht ausgedrückt: Inhalte von einem anderen Ursprung werden standardmäßig blockiert, sofern sie nicht durch die Inhaltsrichtlinie zugelassen werden.

Um dem Browser zu ermöglichen, Session-Cookies an den Kibana-Server in Ihrem ELK-Stack mit aktivierten Sicherheitsfunktionen zu senden (Standardeinstellung ab Elastic v8.x), müssen Sie die OptionsameSiteCookies in kibana.ymlkonfigurieren:

xpack.security.sameSiteCookies: "None"

Mit diesem letzten Schritt können wir unser Kibana-Dashboard in unserer JavaScript-Anwendung sehen:

Grundlegendes eingebettetes Kibana-Dashboard

Verwendung benutzerdefinierter Steuerelemente

Vielleicht ist Ihnen aufgefallen, dass dieses Dashboard Steuerungen zum Filtern der Datenverwendet. Es ist wichtig, den Nutzern die Möglichkeit zu geben, die Daten zu untersuchen und ihre Auswahl einzugrenzen, um interessante Einblicke zu finden.

In bestimmten Situationen ist die Nutzung der Steuerung im Dashboard möglicherweise nicht die richtige Entscheidung. Für einen einheitlichen Designablauf innerhalb einer bestehenden Anwendung können Sie Ihre eigenen benutzerdefinierten Steuerelemente verwenden. Alternativ können Sie das Dashboard neben weiteren Datenquellen und Visualisierungen platzieren, die Sie filtern möchten, um ein einheitliches Nutzererlebnis zu schaffen.

In diesem erweitertes Beispiel zeigen wir, wie man Datumsbereichseinstellungen von einem Datumswähler und Dropdown-Menü ins Dashboard übergibt, um ein Update zu erzwingen:

Erweitertes, integriertes Kibana-Dashboard

Die Verwendung benutzerdefinierter Steuerelemente bedeutet, dass wir die Zusammensetzung der Dashboard-URL verstehen müssen. Lassen Sie uns das folgende Beispiel ansehen:

https://elastic-deployment-9f9945.kb.eu-west-2.aws.cloud.es.io:9243/app/dashboards?auth_provider_hint=anonymous1#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?embed=true&_g=(filters:!(),refreshInterval:(pause:!f,value:0),time:(from:'${selectedStartDate}',to:'${selectedEndDate}'))&_a=(query:(language:kuery,query:'${carrierQuery}'))&hide-time-filter=true

Zusätzlich zu den im Grundbeispiel beschriebenen Parametern müssen wir die Filter manipulieren. Wie bereits in der Community besprochen, gibt es in Kibana zwei Filterstufen:

  1. Der globale Status, gekennzeichnet durch den _g Parameter, bezeichnet den Status, der zwischen einzelnen Kibana-Anwendungen wechselt. Ein gutes Beispiel dafür sind angeheftete Filter, einschließlich des ausgewählten Start- und Enddatums.

  2. Der Status ist auf einzelne Anwendungen wie das aktuelle Dashboard beschränkt. Dies wird durch den URL-Parameter _a dargestellt.

Um den Datumsbereich eines Datumsauswahlfelds zu übergeben, muss der Iframe der URL mit dem ausgewählten Start- und Enddatum aktualisiert werden, sobald ein neuer Datumsbereich angewendet wird. Standardmäßig legen wir diese Werte auf einen relativen Bereich des vergangenen Jahres fest. Am Beispiel von easepick werden die neuen Daten beim bei der Einrichtung registrierten select-Ereignis erfasst und in das erforderliche ISO-Datumsformat konvertiert, bevor das src -Attribut des Iframes mit der neuen URL aktualisiert wird.

let selectedStartDate = 'now-1y';
let selectedEndDate = 'now';

const picker = new easepick.create({
    element: '#datepicker',
    css: [
        'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css'
    ],
    zIndex: 10,
    firstDay: 0,
    autoApply: false,
    format: 'MMM DD, YYYY @ HH:MM:00',
    plugins: [
        'RangePlugin',
        'TimePlugin'
    ],
    setup(picker) {
        picker.on('select', (e) => {
            const dateFormat = 'YYYY-MM-DDTHH:MM:00.000Z';
            selectedStartDate =  picker.getStartDate().format(dateFormat);
            selectedEndDate =  picker.getEndDate().format(dateFormat);
            
            dashboardUri=getDashboardUri();
            iframe.setAttribute('src', dashboardUri);
        });
     }
});

Bezüglich der URL selbst wird der globale Filterparameter _g dann mit dem ausgewählten Bereich aktualisiert, wie in der getDashboardUri() Hilfsmethode zu sehen ist:

function getDashboardUri() {
    return `https://my-deployment-9f9945.kb.eu-west-2.aws.cloud.es.io:9243/app/dashboards?auth_provider_hint=anonymous1#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?embed=true&_g=(filters:!(),refreshInterval:(pause:!f,value:0),time:(from:'${selectedStartDate}',to:'${selectedEndDate}'))&hide-time-filter=true`;
}

Für alle Datenfelder, die Sie in Steuerelementen wie Dropdowns filtern möchten, müssen wir diese Werte über die Abfrage -Option im _a-Parameter übergeben. Nehmen wir als Beispiel die folgende HTML-Auswahlsteuerung:

<div class="carrier-select-container">
  <label for="carrier-select">Carrier</label>
  <select name="carrier-select" id="carrier-select" onchange="updateWithCarrier()">
    <option value="ES-Air">ES-Air</option>
    <option value="JetBeats">JetBeats</option>
    <option value="Kibana Airlines">Kibana Airlines</option>
    <option value="Logstash Airways">Logstash Airways</option>
  </select>
</div>

Es ist möglich, den ausgewählten Wert beim Ändern aus der Methode updateWithCarrier()zu extrahieren, die mit dem Onchange-Event verbunden ist. Das Ereignis wird aus dem Select-Steuerelement im Ereignishandler gezogen:

function updateWithCarrier() {
    const carrierSelect = document.getElementById('carrier-select');
    selectedCarrier = carrierSelect.value || '';

    dashboardUri=getDashboardUri();
    iframe.setAttribute('src', dashboardUri);
}

Beachten Sie, dass wir weiterhin den getDashboardUri()-Helper verwenden, der aktualisiert werden muss, um eine KQL-Abfrage zu generieren, die über die query -Option im Anwendungsfilter an die Dashboard-URL weitergeleitet wird:

function getDashboardUri() {
  const carrierQuery = rison.encode_object({Carrier : encodeURIComponent(selectedCarrier)});
  return `https://my-deployment-9f9945.kb.eu-west-2.aws.cloud.es.io:9243/app/dashboards?auth_provider_hint=anonymous1#/view/7adfa750-4c81-11e8-b3d7-01146121b73d?embed=true&_g=(filters:!(),refreshInterval:(pause:!f,value:0),time:(from:'${selectedStartDate}',to:'${selectedEndDate}'))&_a=(query:(language:kuery,query:'${carrierQuery}'))&hide-time-filter=true`;
}

Kibana verwendet Rison und URI-Codierung, die vor dem Einbinden auf die Abfrage angewendet werden müssen. Dies wird in der obigen carrierQuery-Definition erwähnt, in der wir rison.js verwenden und den ausgewählten Wert mit der üblichen encodeURIComponent -Methode maskieren.

Nach der Einrichtung wird das Dashboard jedes Mal mit der neuen Auswahl aktualisiert. Achten Sie jedoch auf Fehler, die auf eine fehlerhafte Rison-Installation hindeuten,wie beispielsweise den in unseren Foren gemeldeten Fehler, der schwer zu beheben sein kann.

Beachten Sie, dass URLs jederzeit Änderungen unterliegen und Sie daher das Risiko eingehen, dass die Funktionalität durch neue Versionen von Drittanbieter-Tools, die Sie einbetten möchten, beeinträchtigt wird. Prüfen Sie unbedingt bei jeder Kibana-Version auf mögliche Inkompatibilitäten und führen Sie sorgfältige Regressionstests Ihrer Anwendung durch.

Mehr Kibana-Dashboards erstellen

Hier sind wir in die Welt der eingebetteten Kibana-Dashboards eingetaucht. Wir haben ein einfaches Beispiel mit einem einzelnen HTML-Iframe behandelt, zusammen mit einem komplexen Beispiel mit unseren eigenen JavaScript-Komponenten, um Parameter an das Dashboard zu übergeben. Der gesamte Code ist in diesem GitHub-Repository,verfügbar und kann leicht angepasst werden, um Ihre bevorzugte Webtechnologie, JavaScript-Framework, oder für TypeScript zu verwenden.

Teilen Sie uns Ihre Fragen oder Probleme beim Einbetten von Dashboards gerne in unseren Community-Foren. Wir helfen Ihnen jederzeit gerne weiter. Viel Spaß beim Dashboarding!

Ressourcen

  1. Authentifizierung eingebetteter Inhalte | Kibana

  2. Anonyme Authentifizierung | Kibana

  3. SAML-Authentifizierung | Elasticsearch

  4. Dashboard-Daten mit Steuerelementen filtern | Kibana Guide

Elastic Cloud kostenlos ausprobieren

Richten Sie ein Deployment mit vollem Funktionsumfang beim Cloud-Anbieter Ihrer Wahl ein. Als das Unternehmen hinter Elasticsearch stellen wir unsere Features und unseren Support für Ihre Elastic-Cluster in der Cloud bereit.

Kostenlosen Test starten