Layout

Bemerkung

Rother OSS TODO: This feature will be included in one of the next OTOBO releases. If you need it beforehand, please contact sales@otobo.de, we will find a solution.

Verwenden Sie diese Ansicht, um das Layout des externen Interface zu bearbeiten. Die Layout-Verwaltung ist im Modul Layout in der Gruppe External Interface verfügbar.

Eine neue OTOBO-Installation beinhaltet bereits ein Standard-Layout. Auf dieser Seite können alle Parameter geändert werden.

Warnung

Achten Sie darauf, dass Sie Ihre Änderungen speichern, wenn Sie fertig sind. Die neue Konfiguration wird sofort in Betrieb genommen.

Logo

Das Logo ist ein kleine Bild, das auf Seiten des externen Interface in der linken, oberen Ecke angezeigt wird.

Um das Logo zu ändern, klicken Sie auf die Schaltfläche Bild zum Upload auswählen und wählen Sie ein neues Bild für das Logo. Empfohlenes Dateiformat ist PNG.

Favicon

Das ‚Favicon <https://de.wikipedia.org/wiki/Favicon>`- ist ein Icon, dass in der URL-Zeile eines Webbrowsers angezeigt wird.

Um das Favicon zu ändern, klicken Sie auf die Schaltfläche Bild zum Upload auswählen und wählen Sie ein neues Icon. Das ist gewöhnlich ein Bild mit 16x16 Pixel im Format PNG oder ICO.

Hauptfarbe

Die Primärfarbe ist die wichtigste Farbe der externen Seiten (siehe Vorschaufenster).

Um die Hauptfarbe zu ändern, wählen Sie einfach eine Farbe aus der Farbpalette. Sie können aus den vorgewählten Farben wählen oder andere Farben definieren, indem Sie sie aus dem Farbauswahlschalter auswählen oder den hexadezimalen Wert eingeben. Die neue Farbe wird unmittelbar in der Vorschau im Widget angezeigt.

Hervorhebungsfarbe

Die Hervorhebungsfarbe ist die zweite Farbe der externen Seiten, die für Statuskennzeichnungen, Links usw. verwendet wird.

Um die Hervorhebungsfarbe zu ändern, wählen Sie einfach eine Farbe aus der Farbpalette. Sie können aus den vorgewählten Farben wählen oder andere Farben definieren, indem Sie sie aus dem Farbauswahlschalter auswählen oder den hexadezimalen Wert eingeben. Die neue Farbe wird unmittelbar in der Vorschau im Widget angezeigt.

Standard-Avatar

Wird als Standard-Avatar für alle ausgehende Kommunikation verwendet.

Um den Avatar zu ändern, klicken Sie auf die Schaltfläche Bild zum Upload auswählen und wählen Sie ein neues Bild für den Avatar.

Benutzerdefinierte CSS

Verwenden Sie dieses Textfeld, um benutzerdefiniertes CSS hinzuzufügen, das auf das externe Interface angewendet wird.

Benutzerdefinierte Skripte einbinden

Das externe Interface wurde mit einer sicherheitskritischen Denkweise entwickelt. Es enthält mehrere Mechanismen, um sicherzustellen, dass der gesamte Code im Frontend direkt vom OTOBO-Framework bereitgestellt wird.

Zusätzlich wird nun ein Sicherheitsstandard namens Content Security Policy Header vom integrierten Webserver genutzt. Es dient als letzte Verteidigungslinie und stellt sicher, falls noch unerwarteter Code zum Client gelangt, dass sich der Browser des Benutzers einfach weigert, den Code auszuführen.

Es gibt jedoch noch einen Anwendungsfall, in dem auch eine moderne Webanwendung möglicherweise noch zusätzlichen Code ausführen muss, vorausgesetzt, er wird von den Administratoren überprüft und eingebunden. Ein Beispiel könnte eine externe integrierte Chat-Lösung sein, aber auch ein Inline-Codeausschnitt, der für externe Web-Analysen verwendet wird.

Siehe auch

Das Einbinden von benutzerdefinierten Skripten kann in der Systemkonfiguration mit den folgenden Einstellungen erfolgen:

ExternalFrontend::ExternalScripts
ExternalFrontend::InlineScripts
WebApp::Server::AdditionalOrigins

Beispiel für Web-Analysen

Nachfolgend werden die Schritte beschrieben, die erforderlich sind, um benutzerdefinierte Skripte, die von einem Web-Analytics-Anbieter verwendet werden, in die externe Interface-App aufzunehmen. Sie werden bei jeder Nutzung der App ausgeführt, um das Verhalten des Benutzers für eine spätere Analyse zu verfolgen und zu melden.

Wir beginnen mit dem untenstehenden Code-Ausschnitt eines Drittanbieters.

<script async src="https://www.example.com/track/js?id=UA-XXXXXX-Y"></script>
<script>
   window.dataLayer = window.dataLayer || [];
   function track(){dataLayer.push(arguments);}
   track('js', new Date());

   track('config', 'UA-XXXXXX-Y');
</script>

First line of the snippet refers to an external resource which should be loaded by the script tag.

In the script block below, we have some inline code which is run immediately when the page is loaded.

Externe Skriptressourcen hinzufügen

Zuerst müssen wir den externen Skript-Speicherort in die entsprechende Konfiguration aufnehmen:

Go to the System Configuration screen.
Suchen Sie nach der Einstellung ExternalFrontend::ExternalScripts.
Klicken Sie auf die Einstellung, um sie zu bearbeiten.
Klicken Sie, wenn bereits ein Wert vorhanden ist, auf die Schaltfläche Plus. Andernfalls gehen Sie wie folgt vor.
Enter the full location of the external resource in the text field. For example: https://www.example.com/track/js?id=UA-XXXXXX-Y.
Klicken Sie auf das Kontrollkästchen, um die geänderte Einstellung zu speichern.
Nehmen Sie die geänderte Systemkonfiguration in Betrieb.

Inline-Codeausschnitte hinzufügen

Als nächstes müssen wir auch den Inline-Teil des Originalausschnitts einbinden:

Go to the System Configuration screen.
Suchen Sie nach der Einstellung ExternalFrontend::InlineScripts.
Klicken Sie auf die Einstellung, um sie zu bearbeiten.
Klicken Sie, wenn bereits ein Wert vorhanden ist, auf die Schaltfläche Plus. Andernfalls gehen Sie wie folgt vor.

Geben Sie den vollständigen Code-Ausschnitt in das Textfeld ein, abzüglich aller script-Tags. Zum Beispiel:

window.dataLayer = window.dataLayer || [];
function track(){dataLayer.push(arguments);}
track('js', new Date());

track('config', 'UA-XXXXXX-Y');

Klicken Sie auf das Kontrollkästchen, um die geänderte Einstellung zu speichern.
Nehmen Sie die geänderte Systemkonfiguration in Betrieb.

Neuaufbau der externen Interface-App

Um die Änderungen anzuwenden, müssen wir auch die externe Interface-App neu erstellen. Gehen Sie nach unten zur Shell und führen Sie das folgende Kommando aus:

bin/otobo.WebServer.pl --deploy-assets

Positivliste zusätzlicher Quellen in den SecurityHeadern

If you now try to access the external interface application, you will be able to verify that the scripts are included in the code. However, your browser will probably block access to all inline and external resources, therefore the code might fail with some errors.

This behavior is by design, since external resources can only be loaded if they are specifically whitelisted in the Content Security Policy headers.

To check for blocked code, please use suitable web browser inspection tools. In our example, we will be using Mozilla Firefox and its web console available via Tools → Web Developer → Web Console menu item, or via the F12 shortcut key.

Für den Beispielcode-Ausschnitt erhalten Sie möglicherweise folgende Fehler in der Konsole, wenn auf die App zugegriffen wird:

Fehler und Warnungen in der Browser-Konsole

From the console errors we can see that the external script resource was prevented from being loaded (lines 1 and 3). In addition to that, two evaluation calls were also blocked (lines 2 and 5). All errors reference a Content Security Policy rule under the name of script-src, which signals script resources.

We need to add both the external resource and the evaluation calls to the additional origins list of the Content Security Policy headers:

Go to the System Configuration screen.
Suchen Sie nach der Einstellung WebApp::Server::AdditionalOrigins.
Klicken Sie auf die Einstellung, um sie zu bearbeiten.
Wenn bereits ein Wert für script-src vorhanden ist, klicken Sie auf die Plus-Taste daneben. Andernfalls gehen Sie wie folgt vor.
Geben Sie im Textfeld nur den Domänenteil der blockierten Ressource ein, z.B. https://www.example.com`. Dadurch kann die externe Ressource geladen werden.
Klicken Sie auf die Plus-Schaltfläche neben dem Feld. So wird ein weiterer Wert hinzugefügt.
Geben Sie die folgende Anweisung in das neue Feld ein, einschließlich der Anführungszeichen: 'unsafe-eval'. Dies ermöglicht die Ausführung der Testaufrufe.
Klicken Sie auf das Kontrollkästchen, um die geänderte Einstellung zu speichern.
Nehmen Sie die geänderte Systemkonfiguration in Betrieb.

Ein Neuaufbau der externen Interface-App ist an dieser Stelle nicht erforderlich, da die zusätzliche Ursprungskonfiguration sofort wirksam sein sollte.

Wenn Sie die externe Interface-App neu laden, kann es zu zusätzlichen Fehlern kommen. In unserem Beispiel könnte es folgendermaßen aussehen:

Zusätzliche Browser-Konsolenfehler und Warnungen

This error points that an additional resource that was also blocked, an image at a specific location (line 1). We can deduce this via the name of the Content Security Policy rule img-src, which references an image resource. In order to add it to the whitelist, try the following:

Go to the System Configuration screen.
Suchen Sie nach der Einstellung WebApp::Server::AdditionalOrigins.
Klicken Sie auf die Einstellung, um sie zu bearbeiten.
Wenn bereits ein Wert für img-src vorhanden ist, klicken Sie auf die Plus-Taste daneben. Andernfalls gehen Sie wie folgt vor.
Geben Sie im Textfeld nur den Domänenteil der blockierten Ressource ein, z.B. https://www.example.com`. Dadurch kann die externe Ressource geladen werden.
Klicken Sie auf das Kontrollkästchen, um die geänderte Einstellung zu speichern.
Nehmen Sie die geänderte Systemkonfiguration in Betrieb.

Versuchen Sie erneut, die externe Interface-App neu zu laden und prüfen Sie, ob weitere Fehler vorliegen. Wenn nicht, funktionieren Ihre Skripte jetzt wahrscheinlich wie erwartet.

Leider ist es nicht möglich, vorherzusagen, welche Art von Ressourcen Ihre Skripte benötigen könnten. Aber keine Sorge, Sie können die meisten von ihnen auf die Positivliste setzen. Folgen Sie einfach der Spur der Hinweise, die im Protokoll der Browser-Konsole angezeigt werden. Suchen Sie in der Konfiguration eine entsprechende Regel und aktualisieren Sie diese entsprechend. Beachten Sie, dass einige Ressourcen möglicherweise nur von anderen angefordert werden, weshalb mehrere Iterationen erforderlich sind, bis alles richtig konfiguriert ist.

Bemerkung

Einige Ressourcen werden möglicherweise nur von anderen angefordert, so dass mehrere Iterationen erforderlich sein können, bis alles richtig konfiguriert ist.

Warnung

Die Auflistung externer Ressourcen eröffnet potenzielle Sicherheitsrisiken in Ihrer OTOBO-Anwendung! Lassen Sie nur solche Ressourcen zu, von denen Sie sicher sind, dass sie nicht bösartig sind und aus seriösen Quellen stammen. Bedenken Sie, dass, wenn etwas heute sicher ist, nicht bedeutet, dass es morgen sein wird. Bleiben Sie wachsam!