¿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 el usuario se publique para consumo público similar a Stackoverflow.

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

Mis pasos actuales para el manejo de contenido generado por el usuario son:

1. utilizo MarkItUp para permitir que los usuarios una forma sencilla para dar formato a su html.

2. Después de un usuario ha enviado emabrgo cambios que se ejecuta a través de un HTML Sanitizer(desplazarse a la bottem) que utiliza una lista blanca enfoque.

3. Si el proceso de higienización tiene eliminado cualquier contenido creado por el usuario I no guarde el contenido. Luego Devuelve contenido modificado con un mensaje de advertencia , "Se detectaron algunas etiquetas de contenido ilegales y se quitó la verificación doble de su trabajo y intente de nuevo."

4. Si el contenido pasa a través del proceso de desinfección limpia, ahorro el contenido HTML en bruto a la base de datos .

5. Cuando renderizo al cliente acabo de paso el html en bruto del archivo base a la página.

Answer 1

Es un enfoque completamente razonable. Para aplicaciones típicas, será completamente suficiente.

La parte más complicada del HTML sin formato de la lista blanca es el atributo style y embed/object. Existen motivos legítimos por los que alguien podría querer incluir estilos CSS en un bloque de texto formateado que no es de su confianza, o, por ejemplo, un video de YouTube incrustado. Este problema aparece más comúnmente con los feeds. No puede confiar en el bloque de texto arbitrario contenido en una entrada de feed, pero no desea quitar, por ejemplo, la sintaxis que resalta CSS o video flash, porque eso cambiaría fundamentalmente el contenido y posiblemente confundiría a cualquiera que lo leyera. Debido a que CSS puede contener cosas peligrosas como comportamientos en IE, es posible que tenga que analizar el CSS si decide permitir que el atributo style permanezca. Y con embed/object, es posible que necesite poner en una lista blanca los nombres de host.

Adenda:

En los peores casos, HTML escapar todo a la vista puede dar lugar a una experiencia de usuario muy pobre. Es mucho mejor utilizar algo así como uno de los analizadores HTML5 para pasar por el DOM con tu lista blanca. Esto es mucho más flexible en términos de cómo presenta la salida desinfectada a sus usuarios.Incluso puede 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> 

Entonces ocultar las cosas .raw con CSS, y el uso de jQuery para enlazar un controlador de clic a la .sanitizeddiv que alterna entre .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 una buena jugada. Cualquier solución de lista negra es propensa a dejar pasar más de lo debido, porque simplemente no se puede pensar en todo. He visto algunas tentativas de usar listas negras (por ejemplo, The Code Project), y si logran captar todo, generalmente siguen causando problemas adicionales, como reemplazar caracteres en el código para que no se puedan usar sin restaurarlo primero manualmente. .

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

1. HTML codificar todo el texto.

2. Coincide con un conjunto de etiquetas y atributos permitidos y descodifíquelos.

Usando una expresión regular, incluso puede requerir que cada etiqueta de apertura tenga una etiqueta de cierre, de modo que una etiqueta abierta no pueda arruinar la página.

Debe poder hacer esto en algo así como diez líneas de código, por lo que el código que ha vinculado parece demasiado complicado.