Visor HTML

Cómo se usa

1. Abre un archivo o pega código. Suelta en la página un archivo .html, .htm, .xhtml o .svg, elige uno de tu dispositivo con «Elegir un archivo» o pega el HTML en el cuadro de texto. Los archivos pueden ocupar hasta 5 MB.
2. Mira la vista previa. La página se muestra en un marco aislado. Elige «Móvil», «Tableta» o «Completo» para ver cómo se comporta con distintos anchos.
3. Revisa la vista «Información». Consulta el tamaño, las líneas, el título, el tipo de documento, el juego de caracteres, el idioma, cuántos scripts, hojas de estilo, imágenes, enlaces y formularios tiene el archivo, y con qué dominios externos se conectaría.
4. Activa los interruptores solo si hace falta. Si la página aparece sin estilos o vacía, prueba «Cargar recursos externos» o «Ejecutar scripts». Los dos siguen dentro del entorno aislado, pero déjalos desactivados con archivos de los que no te fíes.

Cómo funciona la vista previa

Un archivo HTML no es más que texto que el navegador convierte en una página. Si haces doble clic sobre él, se abre en tu navegador con todos los permisos: puede ejecutar scripts y cargar cualquier cosa de internet. Este visor, en cambio, abre el mismo código en un marco restringido, para que puedas echarle un vistazo antes.

• Marco aislado. La vista previa es un iframe con el atributo sandbox y sin allow-same-origin. El archivo se trata como si viniera de un origen desconocido y no puede leer los datos ni las cookies de este sitio.
• Content-Security-Policy. Por defecto se inserta una política al principio del documento. Bloquea los scripts y todo lo que se descargaría de otros sitios: las imágenes, las fuentes y las hojas de estilo de internet no se cargan. Las imágenes incrustadas como data: y el CSS dentro de <style> funcionan con normalidad.
• Sin subidas. El archivo se lee en tu navegador con la File API. No se envía a ningún servidor y, con la configuración predeterminada, abrirlo no genera ninguna petición a terceros.
• Formularios y navegación. Desde la vista previa no se pueden enviar formularios, y las peticiones de red de los scripts (fetch, XHR) siguen bloqueadas aunque actives los scripts.

Como los recursos externos están bloqueados, una página web guardada puede verse aquí más sencilla que en un navegador normal. Es lo esperado y además resulta útil: muestra lo que contiene el archivo por sí solo.

El panel de información se calcula a partir del texto fuente con búsqueda de patrones, no con un analizador HTML completo. Toma los recuentos como un resumen rápido: al contar etiquetas se ignoran los comentarios y el contenido de los bloques de script y de estilo.

Los dos interruptores y qué cambian

Dos interruptores controlan lo que puede hacer la página en la vista previa. Los dos están desactivados por defecto. Elijas lo que elijas, el marco sigue aislado y nunca tiene acceso a este sitio.

Aunque actives los scripts, las peticiones que hacen (fetch, XHR) siguen bloqueadas y los formularios no se pueden enviar. En cambio, cargar recursos externos sí genera peticiones reales a otros servidores.

Para qué sirve

Hasta qué punto es seguro y qué no hace

Ver aquí un archivo sospechoso con la configuración predeterminada es más seguro que abrirlo con doble clic, porque no se ejecuta nada y no se descarga nada. Las protecciones son el aislamiento del navegador y la Content-Security-Policy, los mismos mecanismos que usan los navegadores para cualquier marco incrustado.

Aun así, es un visor, no un producto de seguridad.

• No es un antivirus. No busca malware, no reconoce amenazas conocidas y no te dice si el archivo es seguro o peligroso.
• Una página puede engañarte igualmente. Un formulario de inicio de sesión falso parece real aunque no pueda enviar datos. No introduzcas nunca contraseñas, números de tarjeta ni códigos en una página abierta desde un adjunto.
• Enlaces. No hagas clic en los enlaces de una vista previa de la que no te fíes. Si una página te pide que descargues o instales algo, no lo hagas.
• Los interruptores cambian el riesgo. Cargar recursos externos contacta con servidores de terceros; ejecutar scripts ejecuta el código del archivo dentro del entorno aislado.
• Los recuentos son aproximados. El panel de información resume el texto del archivo y puede pasar por alto lo que los scripts construyen al ejecutarse.

Con archivos de los que de verdad no puedas fiarte, lo más seguro es no abrirlos o preguntar al remitente por otro canal. Mantén actualizados el sistema y el navegador. En España, si crees que te han intentado estafar o has metido tus datos en una página falsa, puedes llamar al 017, la línea gratuita y confidencial de ayuda en ciberseguridad de INCIBE, todos los días de 8:00 a 23:00.

Cómo leer el panel de información

El panel es una lista de comprobación que se lee en pocos segundos. Muestra el tamaño en bytes y el número de líneas, y después:

• Título, tipo y doctype. El documento es una página HTML completa, una imagen SVG o un fragmento HTML. Los navegadores pueden mostrar una página sin doctype en «modo quirks», un modo de compatibilidad con webs antiguas.
• Juego de caracteres e idioma. Si el archivo no declara su juego de caracteres, las tildes y la ñ pueden verse como símbolos extraños. El atributo lang ayuda a los lectores de pantalla y a la traducción.
• Elementos. El número de etiquetas encontradas en el código.
• Scripts y hojas de estilo. Cuántos están en el propio archivo y cuántos vienen de otros sitios. Los scripts externos son la forma habitual de que una página traiga código de otros sitios.
• Imágenes, enlaces, formularios, iframes. Señales rápidas: un formulario en una página que no esperabas, o un iframe que apunta a otro sitio, merece atención.
• Dominios externos. Los servidores citados en src, href, srcset, url(...) y @import. En una página web guardada es normal ver unos pocos dominios conocidos; si hay muchos desconocidos, conviene mirarlos con más calma.

Para trabajar con las fechas o los plazos que aparecen en un informe exportado, prueba la calculadora de fechas.

Preguntas frecuentes