¿Cuál es la mejor manera de manejar el contenido html generado por el usuario que será visto por el público?

Question

En mi aplicación web, permito que el contenido generado por los usuarios se publique para consumo público similar a Stackoverflow.

¿Cuál es la mejor práctica para manejar esto?

Mis pasos actuales para manejar el contenido generado por el usuario son:

1. Utilizo MarkItUp para permitir a los usuarios una forma fácil de formatear su html.

2. Después de que un usuario haya enviado su cambios lo ejecuto a través de un HTML Sanitizer (desplácese hasta la bottem) que usa una lista blanca enfoque.

3. Si el proceso de Desinfección ha eliminado cualquier contenido creado por el usuario I No guardes el contenido. entonces yo Regresa allí contenido modificado con un mensaje de advertencia, " Algunos ilegales etiquetas de contenido donde se detectan y retirado revise su trabajo y inténtalo de nuevo. "

4. Si el contenido pasa a través de El proceso de desinfección limpiamente, se guarda el contenido html en bruto a la base de datos.

5. Al renderizar al cliente, acabo de pasar el html en bruto de la base de datos a la página.

Answer 1

Ese es un enfoque completamente razonable. Para aplicaciones típicas será completamente suficiente.

La parte más delicada del HTML sin formato de la lista blanca es el atributo style y embed / object . Hay razones legítimas por las que alguien podría querer colocar estilos CSS en un bloque de texto formateado que no es de confianza, o decir, un video incrustado de YouTube. Este problema aparece más comúnmente con los feeds. No puede confiar en el bloque de texto arbitrario contenido en una entrada del feed, pero no desea eliminar, por ejemplo, el resaltado de sintaxis CSS o el video flash, ya que eso cambiaría el contenido de manera fundamental y podría confundir a cualquiera que lo lea. Debido a que CSS puede contener cosas peligrosas como comportamientos en IE, es posible que deba analizar el CSS si decide permitir que el atributo style permanezca en. Y con incrustar / objeto es posible que necesite una lista blanca de nombres de host.

Addenda:

En el peor de los casos, el HTML que se escapa de todo lo que está a la vista puede llevar a una experiencia de usuario muy pobre. Es mucho mejor usar algo como uno de los analizadores HTML5 para revisar el DOM con su lista blanca. Esto es mucho más flexible en términos de cómo presentar el resultado saneado a sus usuarios. Incluso puedes hacer cosas como:

<div class="sanitized">
  <div class="notice">
    This was sanitized for security reasons.
  </div>
  <div class="raw"><pre>
    &lt;script&gt;alert("XSS!");&lt;/script&gt;
  </pre></div>
</div>

Luego, oculte el código .raw con CSS, y use jQuery para enlazar un controlador de clic al .sanitized div que alterna entre < código> .raw y .notice :

CSS:

.raw {
  display: none;
}

jQuery:

$('.sanitized').click(function() {
  $(this).find('.notice').toggle();
  $(this).find('.sanitized').toggle();
});

Answer 2

La lista blanca es un buen movimiento. Cualquier solución de lista negra es propensa a dejar pasar más de lo que debería, porque no se puede pensar en todo. He visto algunos intentos de usar listas negras (por ejemplo, The Code Project), y si logran atrapar todo, generalmente todavía causan problemas adicionales como la sustitución de caracteres en el código para que no pueda usarse sin restaurarlo manualmente primero. .

El método más seguro sería:

1. HTML codifica todo el texto.

2. Haga coincidir un conjunto de etiquetas y atributos permitidos y descodifíquelos.

Al usar una expresión regular, puedes incluso requerir que cada etiqueta de apertura tenga una etiqueta de cierre, de modo que una etiqueta no cerrada no pueda desordenar la página.

Debería poder hacer esto en aproximadamente diez líneas de código, por lo que el código al que se vincula parece demasiado complicado.