Creación de widgets de ThingWorx seguros
Al crear widgets personalizados, asegúrese de crear widgets seguros. Se deben tener en cuenta las vulnerabilidades de scripts de sitios (XSS) y de falsificación de solicitud entre sitios (CSRF). Consulte la sección Actualización del método de solicitud y el filtrado de tipo de contenido para la protección contra CSRF para obtener más detalles.
En las siguientes secciones se proporcionan las prácticas recomendadas para crear widgets seguros.
Utilización de codificación para valores de salida HTML en widgets
Si se utilizan widgets para mostrar valores en la interfaz de usuario, se recomienda utilizar la codificación HTML. Consulte el siguiente código de ejemplo:
this.updateProperty = function (updatePropertyInfo) {
if (updatePropertyInfo.TargetProperty === 'Text') {
var labelText = Encoder.htmlEncode(updatePropertyInfo.SinglePropertyValue);
thisWidget.setProperty('Text', labelText);
showLabelText(thisWidget.getProperty('Text'));
}
}
En este ejemplo:
Se llama a la función updatePropery() cada vez que cambia el valor enlazado de una propiedad de widget.
El valor del widget se codifica en HTML con la biblioteca de codificadores.
Después de la codificación, utilice los métodos Get y Set para acceder a este nuevo valor.
Con este paso se garantiza que los métodos Get realicen un saneamiento adicional en los valores que se devuelven a la interfaz de usuario.
Utilización de descodificación y jQuery para valores de salida HTML en widgets
Si se utilizan widgets para mostrar valores en la interfaz de usuario y se ha utilizado la codificación HTML para codificar los valores, se debe utilizar la descodificación HTML para convertir el valor codificado en su valor original. Consulte el siguiente código de ejemplo:
function showLabelText(labelText) {
labelText = Encoder.htmlDecode(labelText);
var spanText = thisWidget.jqElement.find('.label-text');
spanText.text(labelText);
}
En este ejemplo:
La función showLabelText se utiliza para obtener el elemento DOM del widget y actualizar el valor.
Descodifique el valor mediante la biblioteca de codificadores.
Utilice el método text() con jQuery en el elemento DOM para mostrar el valor. Este método tiene una función de escape integrada que ayuda a proteger la aplicación contra la vulnerabilidad de XSS.
Utilización de codificación para la salida HTML en JSP (JavaServer Pages)
Si se utiliza JSP para mostrar valores en la interfaz de usuario, se recomienda utilizar la codificación HTML. Se pueden utilizar las utilidades ESAPI de OWASP para gestionar la codificación en función del contexto. Consulte el siguiente código de ejemplo:
<div class="org-info">
<h1 class="orgName">
<%=ESAPIUtilities.getEncoder().encodeForHTML(orgName)%>
</h1>
<p class="orgDescription"><%=ESAPIUtilities.getEncoder().encodeForHTML(loginPrompt)%></p>
</div>
En este ejemplo:
Los usuarios pueden crear sus propias páginas de conexión para ThingWorx.
En los siguientes campos se requiere una entrada del usuario para una pantalla de conexión:
orgName
loginPrompt
Los datos de estos campos son datos que no son fiables. Existe una amenaza potencial de que el usuario pueda introducir caracteres malintencionados para estos campos. Por lo tanto, es necesario ejecutar estos datos a través de ESAPI Utilities para la codificación HTML.
Interfaces de usuario personalizadas seguras
Se pueden crear interfaces de usuario personalizadas propias mediante el desarrollo de extensiones o tener aplicaciones Web hospedadas propias que consuman las API de REST de ThingWorx. En estos escenarios, debe asegurarse de que los datos estén saneados y codificados antes de que se muestren en el explorador.
Asegúrese de comprender los marcos que se implementan y utilice las prácticas recomendadas para que el entorno proteja la aplicación frente a las vulnerabilidades de XSS.
En el ejemplo siguiente, una aplicación AngularJS utiliza una plantilla que se ha importado como extensión. Se puede utilizar ThingWorx Utilities para crear este flujo de trabajo.
<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>
En este ejemplo:
node.label es la entrada del usuario que no es fiable. Es una cadena arbitraria. Los usuarios proporcionan el nombre del rótulo para el nodo del flujo de trabajo.
En las plantillas de las aplicaciones de AngularJS, si se incluye una entrada que no es fiable en una notación de llave doble {{}}, por ejemplo {{node.label}}, se fuerza una interpolación de cadena. El valor se trata como una cadena y no se ejecuta en el contexto de un script.
Respuestas HTML
PTC documenta las respuestas HTML en una clase común que filtra cualquier salida a través de ESAPI Utilities.
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));
}