Normalmente, un valor de un formulario, API o URL debe mostrarse como texto, no interpretarse como HTML. Asignarlo a textContent le dice al navegador que cree contenido de texto en lugar de analizar etiquetas y atributos.

const message = document.querySelector("#message");
message.textContent = userProvidedName;

No crear marcado por concatenación

  • Evite asignar cadenas que no sean de confianza a internalHTML.
  • Cree elementos con métodos DOM cuando se necesite una estructura dinámica.
  • Si HTML enriquecido es un requisito genuino, utilice un desinfectante mantenido y defina qué etiquetas y atributos están permitidos.

Tenga en cuenta el contexto

El texto insertado en un nodo de texto se maneja de manera diferente a los valores utilizados en atributos URL, CSS o HTML. Valide una URL con los protocolos y destinos que permite su interfaz antes de asignarla a un enlace.

Pruebe con corchetes angulares y comillas en la entrada de muestra. Deben aparecer como caracteres visibles, no convertirse en nuevos elementos de la interfaz.