Lo que el framework protege por defecto

En una aplicación de una sola página el HTML no lo arma el servidor: lo arma el navegador a partir de componentes. Cuando un componente escribe un dato entre llaves ({dato} en JSX, {{ dato }} en las plantillas de Vue y Angular), el framework no pega una cadena dentro del documento: crea un nodo de texto o asigna una propiedad del DOM. El navegador muestra ese valor como caracteres, aunque traiga signos de menor y mayor. Lo mismo pasa con un atributo enlazado, como un title: el valor queda dentro del atributo y no puede cerrarlo para abrir otra etiqueta.

Esa es la protección por defecto, y cubre la mayoría de los casos del día a día: nombres, comentarios, notas, títulos. Lo importante es saber por qué funciona: el framework separa la estructura (la plantilla, escrita por el equipo) de los datos (lo que llega en tiempo de ejecución). Mientras el dato viaje por esas vías, no se interpreta como marcado.

Escapar resuelve un problema concreto: que un dato rompa la estructura del documento. No resuelve otro: que el dato, bien colocado dentro de un atributo, sea en sí mismo peligroso. Un enlace es el ejemplo clásico. El valor de un href puede quedar perfectamente escapado y aun así empezar por un esquema que el navegador ejecuta en vez de navegar. Vue, por ejemplo, no revisa las URL que se enlazan a un atributo: esa validación le toca al equipo, idealmente en el servidor antes de guardar, para que proteja también a otros clientes como la app móvil.

Abre el laboratorio. Lee TarjetaCita.vue, el origen-de-campos.txt (quién escribe cada campo) y citas-muestra.json. Luego cruza con la fila de QA que habla del enlace.

La tabla de pruebas-qa.txt es la mejor evidencia que tiene el cliente: valores con marcado inofensivo metidos en cada campo y lo que se vio en el navegador. Clasifica cada fila en tres grupos: el valor se mostró como texto sin tocarlo, el framework lo modificó por seguridad (quitó o neutralizó algo) o el valor quedó activo.

Angular va un paso más allá que React y Vue en un caso concreto: si se enlaza un valor a la propiedad innerHTML o a una URL, lo pasa por su propio saneador antes de escribirlo. Conserva el marcado que considera seguro, quita lo peligroso y, en modo de desarrollo, deja un aviso en la consola del navegador. Con las URL hace algo parecido: marca como inseguras las que no tienen un esquema aceptado.

Lee las filas A-02 y A-03 de la tabla junto con factura.component.html.

El ticket TV-2231 pregunta si el problema del enlace es «del framework o nuestro». La respuesta decide quién lo arregla y dónde.