¿Inyectar un marcado personalizado a través de vanilla JS sin aumentar el riesgo de XSS del lado del cliente? [duplicar]

1

El mundo del software de empresa a empresa siempre ha requerido un alto nivel de marcado personalizado por cliente asociado con la marca y la personalización. En un SPA que generalmente significa inyectar marcas en el script.

Algunas publicaciones ofrecen marcos como angular.js para una representación más segura de este tipo. Sin embargo, en muchas situaciones existe una presión cada vez mayor para pasar de los marcos a los scripts de vainilla. Hay beneficios para el rendimiento, la integración, el mantenimiento, etc. Esto se ve impulsado por el aumento del tamaño y la complejidad de los marcos existentes, las nuevas versiones principales que se alejan radicalmente de las anteriores y la constante rotación en el mercado del marco de JavaScript.

¿Cuáles son las medidas de seguridad correctas del lado del cliente para inyectar el marcado usando vanilla JS?

Por favor, no marque esto como un duplicado de preguntas XSS más generales del lado del cliente sin el requisito de vanilla js o el requisito de cliente por cliente (esto podría denominarse no confiable, pero desconocido puede ser más preciso ya que emana de la cliente) marcado.

    
pregunta cage rattler 24.08.2016 - 17:26
fuente

1 respuesta

1

No estoy seguro de haberlo leído bien, pero creo que desea insertar HTML no confiable en el DOM usando JavaScript. Si es así, estas son mis recomendaciones:

  • En primer lugar, necesita un purificador o desinfectante HTML o lo que quiera llamar, que elimine cualquier CSS o script en línea. Un ejemplo es Caja de Google , pero estoy seguro de que hay más opciones disponibles . Asegúrate de configurarlo para que funcione de la manera que deseas. Bloquear estilos y scripts puede que no sea lo único que quieres hacer. ¿Qué pasa con los iframes? ¿Formas? Enlaces a protocolos extraños?
  • Ahora debe usarlo en todo que inserte en el DOM, por ejemplo. utilizando innerHTML() . Una forma de hacerlo es crear una nueva función para usar en su lugar:

    Element.prototype.secureInnerHTML = function(input) {
      this.innerHTML(mySanitizer(input));
    }
    

    Tenga en cuenta que .textContent y .setAttribute() ya son seguros, ya que operan directamente en el DOM y no tratan la entrada como una cadena de HTML. En general, es una buena regla usar siempre .textContent cuando no sea necesario el marcado.

  • Establezca una política de seguridad de contenido estricta, sin tener en cuenta todos los estilos y secuencias de comandos en línea.

No estoy diciendo que esto te hará 100% seguro, pero al menos es un buen comienzo. Tenga en cuenta que ya que hemos deshabilitado el CSS en línea, todo el estilo debe hacerse usando clases. Si permitir CSS en línea es un requisito, tiene un problema mucho más difícil de resolver.

    
respondido por el Anders 25.08.2016 - 09:49
fuente

Lea otras preguntas en las etiquetas