ThingWorx Modelldefinition in Composer > Sicherheit > Content Security Policy > Problembehandlung – Content Security Policy-Fehler
Problembehandlung – Content Security Policy-Fehler
Das Aktivieren der Content Security Policy (CSP) auf einem ThingWorx Server kann erhebliche Auswirkungen auf das Verhalten von Mashups und Erweiterungen haben, die Inhalt aus externen Quellen laden. Die in ThingWorx angewendeten CSP-Standardanweisungen blockieren alle Inhalte aus externen Quellen. Als ThingWorx Administrator sollten Sie eine Inhaltsrichtlinie definieren, die den Sicherheits- und Funktionsanforderungen Ihrer Mashups entspricht. In diesem Thema werden häufige Anwendungsfälle beschrieben, die von den CSP-Standardanweisungen betroffen sein können, und Anleitungen zum Identifizieren und Beheben von CSP-Fehlern bereitgestellt.
Betroffene Widgets, Funktionen und Layouts in einem Mashup identifizieren
In der folgenden Tabelle sind verschiedene Typen von Mashup-Inhalt aufgeführt, die möglicherweise blockiert werden, wenn CSP aktiviert ist.
Mashup-Inhalt
CSP-Anweisung
Lösung
Widgets, die Inhalt mithilfe direkter Links einbetten, z.B. das Widget Web Frame. Dieses Widget unterstützt das Einbetten von Inhalt in ein Mashup durch Angabe von Links von externen Quellen unter Verwendung einer URL-Eigenschaft.
frame-src
Testen Sie alle Web Frame-Widgets, und stellen Sie sicher, dass die frame-src Anweisung den URL-Eigenschaftswert nicht blockiert. Fügen Sie alle erforderlichen URLs zu den Werten für die CSP-Anweisung frame-src hinzu.
Mashup-Elemente wie Widgets, Funktionen oder Container mit einer oder mehreren Eigenschaften, die das Laden von Bildern aus einer URL unterstützen. Beispielsweise wenn die Eigenschaft ImageSRC eines Bild-Widgets darauf festgelegt ist, dass ein Bild aus einer URL geladen wird. Diese Option ist in der Medienentitätsauswahl in Mashup Builder verfügbar.
Eine Medienentitätsauswahl mit hervorgehobener Schaltfläche "Neue Bild-URL".
Die folgenden Elemente in einem Mashup enthalten eine oder mehrere Eigenschaften, die das Laden von Bildern aus einer URL unterstützen:
• Funktionen: Funktion zur Bestätigung.
• Container: Flexbox-Container
img-src
Überprüfen Sie die Bild-URL-Werte für diese Elemente, und fügen Sie alle URLs der Anweisung img-src hinzu.
Widgets, die die Entitäten Statusdefinition, Stildefinition oder Menüdefinition verwenden, können eine Verknüpfung zu einem Bild auf einer externen URL erstellen.
img-src
Überprüfen Sie die Medienentitäten, die in Widget-Stil- oder Statusdefinitionen verwendet werden, und fügen Sie externe-URLs zur CSP-Anweisung img-src hinzu.
Widgets, die Daten wie Raster und Wertanzeige anzeigen, können HTML enthalten oder JavaScript-Code ausführen. Das Laden dieses Inhaltstyps in ein Mashup erfordert mehrere Typen von CSP-Anweisungen. Beispielsweise wenn ein Widget HTML anzeigt, das Bilder einbettet oder Objekte referenziert.
• Funktionen: Ausdruck, Validierer
Alle
Überprüfen Sie den gesamten angezeigten HTML-Code, und stellen Sie sicher, dass alle Referenzen im Einklang mit der CSP-Richtlinie stehen. Aktualisieren Sie Anweisungen, die erforderlich sind, um die HTML-Daten anzuzeigen.
Mashups, die benutzerdefiniertes CSS verwenden, können betroffen sein, wenn externe Bilder, Schriftarten oder Stile referenziert werden. Standardmäßig wird die Verwendung der Anweisung @import zum Importieren von Dateien blockiert, die nicht in /Thingworx/FileRepositories abgelegt sind.
style-src, image-src, font-src
Überprüfen Sie die Registerkarte Benutzerdefiniertes CSS aller betroffenen Mashups oder Stilthemen, und aktualisieren Sie die relevanten CSP-Anweisungen.
Importierte Erweiterungen, z.B. benutzerdefinierte Widgets, die externe Referenzen auf Frames, Bilder, Schriftarten oder Stile oder URLs enthalten.
Alle
Überprüfen Sie die externen Referenzen, die zum Laden und Verwenden der Erweiterung erforderlich sind, und aktualisieren Sie anschließend die Werte der CSP-Anweisung so, dass alle erforderlichen Referenzen zugelassen werden.
CSP-Anweisungen anzeigen, die zur Laufzeit auf ein Mashup angewendet werden
Sie können mit den Entwicklertools in Ihrem Browser die aktuellen CSP-Anweisungen anzeigen, die auf ein Mashup angewendet werden.
1. Öffnen Sie in Composer das Mashup, das Sie prüfen möchten, und klicken Sie dann auf Mashup anzeigen.
2. Öffnen Sie in Ihrem Browser die Entwicklertools, und laden Sie die Seite neu, um den Netzwerkverkehr zu erfassen.
3. Wählen Sie auf der Registerkarte Network einen Dienst oder die Datei index.html aus, die vom ThingWorx Server geladen wird.
4. Prüfen Sie unter Response Headers die Content-Security-Policy-Kopfzeile.
Zeigt den Inhalt der Antwortheader unter Verwendung der Entwicklertools des Browsers an.
Die angewendeten CSP-Anweisungen werden aufgelistet. Jede Anweisung ist durch einen Semikolon getrennt.
* 
Es kann bis zu einer Minute dauern, bis Änderungen an den CSP-Anweisungen auf der Registerkarte Content Security Policy-Regeln von PlatformSystem aktualisiert werden.
Fehlermeldungen für CSP-Anweisungen in einem Mashup lösen
1. Öffnen Sie in Composer das Mashup, das Sie prüfen möchten, und klicken Sie dann auf Mashup anzeigen.
2. Öffnen Sie die Entwicklertools Ihres Browsers, und zeigen Sie dann das Protokoll Konsole an.
Eine CSP-Fehlermeldung wird angezeigt, wenn Mashup-Inhalt gegen eine CSP-Anweisung verstößt. Jede Meldung enthält den Ressourcenwert, der gegen eine Anweisung verstößt, sowie den Namen der CSP-Anweisung, die das Laden der Ressource verhindert.
3. Arbeiten Sie mit Ihrem ThingWorx Administrator zusammen, um die CSP-Anweisungen zu aktualisieren, die in PlatformSubsystem definiert sind.
Weitere Informationen zum Aktualisieren von CSP-Anweisungen finden Sie unter Content Security Policy (CSP) in ThingWorx.
Die folgende Abbildung zeigt ein Mashup-Beispiel, bei dem Inhalt aufgrund von CSP-Anweisungen nicht geladen werden kann:
Jedes der folgenden Widgets wird mit den folgenden Werten konfiguriert:
• Beschriftung – Benutzerdefiniertes CSS, das eine benutzerdefinierte Schriftart aus einer externen Quelle lädt: https://fonts.google.com/
• Bild – Die Eigenschaft ImageURL ist so festgelegt, dass ein Bild von einer externen Website geladen wird: wikimedia.org
• Web Frame – Die Eigenschaft URL ist so festgelegt, dass eine externe Webseite geladen wird: https://www.ptc.com
Darüber hinaus werden die benutzerdefinierten CSS-Regeln auch auf das Mashup angewendet:
@import url("/Thingworx/FileRepositories/Systemrepository/alerts.css");
@font-face {
font-family: "Open Sans";
src: url('https://fonts.google.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
}
Zur Laufzeit zeigt das Konsolenprotokoll die folgenden CSP-Fehler an.
Browserkonsolen-Fehler für Content Security Policy-Anweisungen.
Die folgenden Standardanweisungen verhindern, dass Inhalt in dieses Mashup geladen wird:
• img-src 'self' data: – Verhindert das Laden von Bildern aus externen Quellen.
• font-src 'self' – Verhindert Schriftarten, die unter Verwendung einer Anweisung @font-face importiert werden.
• frame-src 'self' tw-ra-client: – Verhindert, dass Frames Webseiten laden, die nicht auf demselben Domänennamen wie der ThingWorx Server gehostet werden.
Zum Beheben dieser Fehler müssen Sie die jeweiligen CSP-Anweisungen aktualisieren, die verhindern, dass dieser Inhalt geladen wird. Sie können selektiv URLs für vertrauenswürdige Sites hinzufügen, die zum Laden des Inhalts erforderlich sind. Zum Laden des Inhalts in diesem Beispiel können Sie die folgenden Werte zu jeder Anweisung hinzufügen:
• img-src: *wikimedia.org – Ermöglicht das Laden von Bildern aus wikimedia.org und allen untergeordneten Unterdomänen.
• frame-src: ptc.com – Ermöglicht das Laden von Frames aus ptc.com.
• font-src: https://fonts.google.com – Lässt das Laden von Schriftarten aus fonts.google.com nur über HTTPS zu.
Weitere Informationen zu CSP-Anweisungen und den von ihnen unterstützten Werten finden Sie in den folgenden Ressourcen:
• Kurzreferenz zur Content-Security-Policy-Kopfzeile (CSP)
• Content Security Policy (CSP) im Mozilla Developer Network
War dies hilfreich?