Creazione di widget ThingWorx protetti
Quando si creano widget personalizzati, assicurarsi di creare widget protetti. È necessario tenere conto delle vulnerabilità XSS (cross-site scripting) e CSRF (cross-site request forgery). Per ulteriori informazioni, vedere la sezione Aggiornamento del metodo di richiesta e filtraggio del tipo di contenuto per la protezione da CSRF.
Nelle sezioni che seguono vengono fornite le best practice per la creazione di widget protetti.
Utilizzare la codifica per il valore di output HTML nei widget
Se si utilizzano i widget per visualizzare i valori nell'interfaccia utente, si consiglia di utilizzare la codifica HTML. Vedere il codice di esempio seguente:
this.updateProperty = function (updatePropertyInfo) {
if (updatePropertyInfo.TargetProperty === 'Text') {
var labelText = Encoder.htmlEncode(updatePropertyInfo.SinglePropertyValue);
thisWidget.setProperty('Text', labelText);
showLabelText(thisWidget.getProperty('Text'));
}
}
In questo esempio si verifica quanto indicato di seguito.
Viene chiamata la funzione updatePropery() ogni volta che il valore associato per una proprietà del widget viene modificato.
Il valore del widget viene codificato in formato HTML mediante la libreria di codifica.
Dopo la codifica, utilizzare i metodi Get e Set per accedere a questo nuovo valore.
Questo passo garantisce che i metodi Get eseguano un'ulteriore sanitizzazione sui valori restituiti all'interfaccia utente.
Utilizzare la decodifica e jQuery per i valori di output HTML nei widget
Se si usano i widget per visualizzare i valori nell'interfaccia utente ed è stata utilizzata la codifica HTML per codificare i valori, utilizzare la decodifica HTML per convertire il valore codificato nel rispettivo valore originale. Vedere il codice di esempio seguente:
function showLabelText(labelText) {
labelText = Encoder.htmlDecode(labelText);
var spanText = thisWidget.jqElement.find('.label-text');
spanText.text(labelText);
}
In questo esempio si verifica quanto indicato di seguito.
Viene utilizzata la funzione showLabelText per ottenere l'elemento DOM del widget e aggiornare il valore.
Decodificare il valore utilizzando la libreria di codifica.
Utilizzare il metodo text() con jQuery sull'elemento DOM per visualizzare il valore. Questo metodo prevede una funzione di escape incorporata che protegge la soluzione dalla vulnerabilità XSS.
Utilizzare la codifica per l'output HTML in JSP (JavaServer Pages)
Se si usa JSP per visualizzare i valori nell'interfaccia utente, si consiglia di utilizzare la codifica HTML. È possibile usare le utilità ESAPI di OWASP per gestire la codifica su base contestuale. Vedere il codice di esempio seguente:
<div class="org-info">
<h1 class="orgName">
<%=ESAPIUtilities.getEncoder().encodeForHTML(orgName)%>
</h1>
<p class="orgDescription"><%=ESAPIUtilities.getEncoder().encodeForHTML(loginPrompt)%></p>
</div>
In questo esempio si verifica quanto indicato di seguito.
Gli utenti possono creare le proprie pagine di accesso per ThingWorx.
Per una schermata di accesso i campi seguenti richiedono l'input dell'utente:
orgName
loginPrompt
I dati in questi campi non sono attendibili. Esiste una potenziale minaccia che l'utente possa immettere caratteri dannosi per questi campi. Pertanto, è necessario eseguire questi dati tramite le utilità ESAPI per la codifica HTML.
Interfacce utente personalizzate protette
È possibile creare interfacce utente personalizzate sviluppando le estensioni oppure utilizzare le proprie soluzioni Web ospitate con le API REST di ThingWorx. In questi scenari è necessario assicurarsi che i dati vengano sanitizzati e codificati prima di essere visualizzati nel browser.
È importante conoscere le strutture che si implementano e attenersi alle best practice specifiche dell'ambiente per salvaguardare la soluzione dalle vulnerabilità XSS.
Nell'esempio seguente, una soluzione AngularJS utilizza un modello importato come estensione. È possibile usare le utilità ThingWorx per creare questo workflow.
<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 questo esempio si verifica quanto indicato di seguito.
node.label è l'input non attendibile dell'utente. Si tratta di una stringa arbitraria. Gli utenti forniscono il nome dell'etichetta per il nodo del workflow.
Nei modelli delle soluzioni AngularJS, se si esegue il wrapping di un input non attendibile nella notazione a doppia parentesi graffa {{}}, ad esempio {{node.label}}, viene imposta un'interpolazione di stringa. Il valore viene considerato come stringa e non viene eseguito nel contesto di uno script.
Risposte HTML
PTC documenta le risposte HTML in una classe comune che filtra qualsiasi output tramite le utilità ESAPI.
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));
}
È stato utile?