Sichere ThingWorx Widgets erstellen
Wenn Sie angepasste Widgets erstellen, sorgen Sie dafür, dass diese sicher sind. Sie müssen Schwachstellen bei Cross-Site Scripting (XSS) und Cross-Site Request Forgery (CSRF) berücksichtigen. Weitere Informationen finden Sie im Abschnitt Updating the Request Method and Content Type Filtering for CSRF Protection.
Die nächsten Abschnitte enthalten optimale Vorgehensweisen zum Erstellen sicherer Widgets.
Kodierung für HTML-Ausgabewert in Widgets verwenden
Wenn Sie Widgets verwenden, um Werte in der Benutzeroberfläche anzuzeigen, wird empfohlen, die HTML-Kodierung zu verwenden. Im folgenden finden Sie Beispielcode:
this.updateProperty = function (updatePropertyInfo) {
if (updatePropertyInfo.TargetProperty === 'Text') {
var labelText = Encoder.htmlEncode(updatePropertyInfo.SinglePropertyValue);
thisWidget.setProperty('Text', labelText);
showLabelText(thisWidget.getProperty('Text'));
}
}
In diesem Beispiel gilt:
Die updatePropery()-Funktion wird jedes Mal aufgerufen, wenn der gebundene Wert für eine Widget-Eigenschaft geändert wird.
Der Wert aus dem Widget ist unter Verwendung der Encoder-Bibliothek HTML-kodiert.
Verwenden Sie nach der Kodierung die Methoden Get und Set, um auf diesen neuen Wert zuzugreifen.
Dieser Schritt stellt sicher, dass die Get-Methoden eine zusätzliche Bereinigung für die Werte durchführen, die an die Benutzeroberfläche zurückgegeben werden.
Dekodierung und jQuery für HTML-Ausgabewerte in Widgets verwenden
Wenn Sie Widgets verwenden, um Werte in der Benutzeroberfläche anzuzeigen, und die HTML-Kodierung zum Kodieren von Werten verwendet haben, verwenden Sie die HTML-Dekodierung, um den kodierten Wert in den ursprünglichen Wert zu konvertieren. Im folgenden finden Sie Beispielcode:
function showLabelText(labelText) {
labelText = Encoder.htmlDecode(labelText);
var spanText = thisWidget.jqElement.find('.label-text');
spanText.text(labelText);
}
In diesem Beispiel gilt:
Die showLabelText-Funktion wird verwendet, um das DOM-Element des Widgets abzurufen und den Wert zu aktualisieren.
Dekodieren Sie den Wert mit der Encoder-Bibliothek.
Verwenden Sie die text()-Methode mit jQuery im DOM-Element, um den Wert anzuzeigen. Diese Methode verfügt über eine integrierte Escape-Funktion, die beim Schützen der Lösung vor XSS-Schwachstellen hilft.
Kodierung für HTML-Ausgabe in JavaServer Pages (JSP) verwenden
Wenn Sie JSP verwenden, um Werte in der Benutzeroberfläche anzuzeigen, wird empfohlen, HTML-Kodierung zu verwenden. Sie können ESAPI-Dienstprogramme von OWASP verwenden, um die Kodierung auf Kontextbasis zu verarbeiten. Im folgenden finden Sie Beispielcode:
<div class="org-info">
<h1 class="orgName">
<%=ESAPIUtilities.getEncoder().encodeForHTML(orgName)%>
</h1>
<p class="orgDescription"><%=ESAPIUtilities.getEncoder().encodeForHTML(loginPrompt)%></p>
</div>
In diesem Beispiel gilt:
Benutzer können eigene Anmeldeseiten für ThingWorx erstellen.
Die folgenden Felder erfordern eine Benutzereingabe für einen Anmeldebildschirm:
orgName
loginPrompt
Die Daten in diesen Feldern sind nicht vertrauenswürdige Daten. Es besteht eine potenzielle Gefahr, dass der Benutzer böswillige Zeichen für diese Felder eingeben kann. Daher ist es erforderlich, diese Daten über die ESAPI-Dienstprogramme für HTML-Kodierung auszuführen.
Benutzerdefinierte Benutzeroberflächen sichern
Sie können eigene benutzerdefinierte Benutzeroberflächen erstellen, indem Sie Erweiterungen entwickeln oder eigene gehostete Weblösungen verwenden, die die ThingWorx REST-APIs nutzen. In diesen Szenarios sollten Sie sicherstellen, dass die Daten vor der Anzeige im Browser bereinigt und kodiert werden.
Stellen Sie sicher, dass Sie die von Ihnen implementierten Frameworks verstehen, und verwenden Sie die optimalen Vorgehensweisen für diese Umgebung, um die Lösung vor XSS-Schwachstellen zu schützen.
Im folgenden Beispiel verwendet eine AngularJS-Lösung eine Vorlage, die als Erweiterung importiert wurde. Sie können ThingWorx Dienstprogramme verwenden, um diesen Workflow zu erstellen.
<div class="node-label-wrap" ng-class="{'graph-node-nonadmin': $parent.$parent.isNonAdminUser}">
<textarea type="text" ng-model="node.label" ng-change="$parent.$parent.setBPUpdatesMade()">
</textarea>
<div class="node-label">{{node.label}}</div>
</div>
In diesem Beispiel gilt:
node.label ist die nicht vertrauenswürdige Benutzereingabe. Es handelt sich um eine willkürliche Zeichenfolge. Benutzer geben den Namen der Beschriftung für den Workflow-Knoten an.
Wenn Sie in den Vorlagen von AngularJS-Lösungen eine nicht vertrauenswürdige Eingabe in doppelte geschweifte Klammern setzen ({{}}), beispielsweise {{node.label}}, wird eine Zeichenfolgeninterpolation erzwungen. Der Wert wird als Zeichenfolge behandelt und nicht im Kontext eines Skripts ausgeführt.
HTML-Antworten
PTC dokumentiert seine HTML-Antworten in einer allgemeinen Klasse, die jede Ausgabe über die ESAPI-Dienstprogramme filtert.
public void writeTableCell(String value, String id, String sClass, String sStyle) throws Exception {
startTableCell(id, sClass, sStyle);
writeValue(value);
endTableCell();
}

public void writeValue(String value) throws Exception {
write(ESAPIUtilities.getEncoder().encodeForHTML(value));
}
War dies hilfreich?