Datos y texto · Fácil · 10 min

Escapa la salida del modelo antes de pintarla

Un modelo puede devolver HTML, a propósito o porque alguien se lo pidió en el prompt. Con innerHTML ese HTML se ejecuta.

La constante MODEL_OUTPUT es la respuesta de un modelo e incluye <img src=x onerror=...>. Si la pintas con innerHTML tal cual, el navegador crea la imagen, falla la carga y ejecuta el onerror: en una aplicación real eso puede leer la sesión del usuario.

Escribe escapeHtml(str) que sustituya &, <, >, " y ' por &amp;, &lt;, &gt;, &quot; y &#39;. Después pinta MODEL_OUTPUT escapado dentro de #out, para que se vea como texto.

Retos 0/4

  • Escapa los cinco caracteres
  • Escapa & primero (sin doble escape)
  • #out muestra la etiqueta como texto, sin crear <img>
  • El onerror no se ha ejecutado

function escapeHtml(str) {
  // sustituye primero &, después < > " '
  return str;
}

document.getElementById('out').innerHTML = escapeHtml(MODEL_OUTPUT);
console.log('rendered');
La consola aparece aquí (console.log).

Para profundizar: la referencia de OWASP (en inglés) →

¿Esto en producción, con tus datos? Hablemos 15 minutos →