¿Qué se debe usar document.implementation.createHTMLDocument?

Question

¿Cuáles son algunos casos de uso y si está obsoleto? Como puede observar, en http://groups.google.com/group/envjs/browse_thread/thread/6c22d0f959666009/c389fc11537f2a97 que es "no estándar y no es compatible con cualquier navegador moderno" ...

EDIT:

Sobre document.implementation en http://javascript.gakaa.com/document-implementation.aspx:

devuelve una referencia a el objeto DOMImplementation W3C, que representa, en un grado limitado, el entorno que compone el documento contiene el navegador, para nuestros propósitos. Los métodos del objeto le permiten ver qué módulos de DOM admite el navegador. Este objeto también es una puerta de enlace para crear documentos W3C virtuales y objetos DocumentType fuera del árbol de documentos actual. Por lo tanto, en Netscape 6 puede usar la propiedad document.implementation como inicio para generar un documento no entregado para documentos XML externos. Consulte el objeto DOMImplementation para obtener detalles sobre los métodos y su compatibilidad con el navegador .

Dado que proporciona métodos (tales como createHTMLDocument) para la creación de un documento nonrendered fuera de la estructura del documento actual, ¿sería seguro para alimentarlo de entrada HTML de terceros que no se confía que puede contener algo de XSS? Lo pregunto porque me gustaría usar createHTMLDocument para propósitos cruzados de entrada HTML de terceros. ¿Puede ser ese uno de los casos de uso?

Answer 1

Siempre lo uso, ya que no hacen peticiones a las imágenes, ejecutar scripts o afectar estilo:

function cleanHTML(html) { 
    var root = document.implementation.createHTMLDocument().body; 

    root.innerHTML = html; 

    //Manipulate the DOM here 
    $(root).find("script, style, img").remove(); //jQuery is not relevant, I just didn't want to write exhausting boilerplate code just to make a point 

    return root.innerHTML; 
} 


cleanHTML('<div>hello</div><img src="google"><script>alert("hello");</script><style type="text/css">body {display: none !important;}</style>'); 
//returns "<div>hello</div>" with the page unaffected 

Answer 2

Sí. Puede usar esto para cargar contenido de terceros que no sean de confianza y quitarle etiquetas y atributos peligrosos antes de incluirlo en su propio documento. Hay una gran investigación que incorpora este truco, que se describe en http://blog.kotowicz.net/2011/10/sad-state-of-dom-security-or-how-we-all.html.

Sin embargo, la técnica documentada anteriormente por Esailija es insuficiente. También necesita quitar la mayoría de los atributos. Un atacante podría establecer un elemento onerror o onmouseover en JS malicioso. El atributo de estilo se puede usar para incluir CSS que ejecuta JS malicioso. Iframe y otras etiquetas de inserción también pueden ser objeto de abuso. Ver fuente en https://html5sec.org/xssme/xssme2 para ver una versión de esta técnica.

Answer 3

Sólo una respuesta más limpia, además de @Esailija y respuestas @ Greg: Esta función creará otro documento fuera de la estructura del documento actual, y limpiar todos los scripts, estilos e imágenes del nuevo documento:

function insertDocument (myHTML) { 
    var newHTMLDocument = document.implementation.createHTMLDocument().body; 
    newHTMLDocument.innerHTML = myHTML; 
    [].forEach.call(newHTMLDocument.querySelectorAll("script, style, img"), function(el) {el.remove(); }); 
    documentsList.push(newHTMLDocument); 
    return $(newHTMLDocument.innerHTML); 
} 

Este es fantástico para hacer solicitudes ajax y raspar el contenido será más rápido :)