Texto y código / Guías

Escapado de HTML, URL y JavaScript: sigue las capas en orden

Un valor puede pasar a través de una URL, un documento HTML y una fuente de JavaScript. Cada destino interpreta diferentes caracteres como sintaxis.

Nombra el destino inmediato

Supongamos que un valor de búsqueda es A&B "C". En un componente de consulta URL, el signo normalmente separaría los parámetros, por lo que debe codificarse como parte del valor antes de ensamblar la cadena de consulta. En el texto HTML, un signo comercial puede introducir una referencia de carácter y un corchete angular puede introducir un marcado. Dentro de una cadena literal de JavaScript, las comillas y las barras invertidas tienen su propia sintaxis. Estos son tres contextos de análisis distintos. Una salida segura para uno no es automáticamente segura para el siguiente. Una aplicación de producción debe utilizar plantillas y API de plataforma sensibles al contexto en lugar de ensamblar marcado mediante concatenación.

Trabaja el primer límite

Si la clave de consulta es q, codifique el valor como un componente de URL y luego colóquelo después de q=. El signo comercial se convierte en %26 y las comillas se representan de acuerdo con las reglas del codificador de URL. Codificar toda la URL terminada como si fuera un valor también codificaría su puntuación estructural y produciría una dirección incorrecta. Si la URL resultante se muestra como texto de enlace en una página HTML, el nodo de texto necesita una representación segura para HTML. Si se coloca en un atributo HTML, utilice un serializador seguro para atributos, que tiene sus propias reglas de cotización.

Cada analizador interpreta su propia sintaxis.
  1. Valor original: A&B «C»
  2. Componente URL: codificar caracteres reservados
  3. Salida HTML o JavaScript: escapar para ese destino

No hagas de JavaScript el formato de transporte

Es posible que un script necesite almacenar el valor original en un literal entre comillas, lo que requiere un escape de cadena de JavaScript. Esto es una cuestión de código fuente, no un sustituto de la codificación de componentes URL o de la codificación de salida HTML. Evite colocar entradas que no sean de confianza directamente dentro de la fuente del script en línea; El uso de atributos de datos o un elemento de secuencia de comandos con JSON cuidadosamente serializado puede ser más seguro cuando se implementa mediante marcos mantenidos. La herramienta de escape de JavaScript MultiVerto ilustra caracteres literales de cadena, pero no puede certificar que una aplicación completa sea segura contra la inyección de scripts. La seguridad depende del contexto real del analizador y del código circundante.

Decodificar en el orden opuesto

En el extremo receptor, un analizador de URL extrae q y decodifica en porcentaje el componente una vez. Un analizador HTML procesa entidades mientras construye su documento; un navegador no decodifica en porcentaje el texto ordinario sólo porque aparece en una página. JavaScript interpreta sus propios escapes literales cuando analiza el código fuente. Aplicar el decodificador incorrecto puede dejar secuencias visibles como %26 o crear datos que luego se interpretan como sintaxis en otro contexto. Mantenga el valor bruto original separado de cada representación serializada para que una pantalla orientada al usuario no se convierta accidentalmente en la siguiente entrada de procesamiento.

Una lista de verificación de revisión para una aplicación real

Dibuje la ruta desde el valor fuente al componente URL, luego al texto o atributo HTML, y solo luego a cualquier uso de secuencia de comandos. En cada flecha, elija la API para ese destino exacto y pruebe caracteres como ampersand, comillas, signos menores que y letras que no sean ASCII. Verifique la página final renderizada y la URL analizada resultante, no solo una cadena codificada intermedia. Escapar no otorga confianza ni valida el destino de un enlace; Es posible que aún se requieran verificaciones de políticas por separado. Los convertidores vinculados ayudan a demostrar cada capa con una pequeña muestra antes de implementarla en un marco.

Prueba el convertidor

Pruebe la codificación de entidades HTML y luego compare las herramientas de URL y JavaScript.

Escapa caracteres como &, <, > y comillas para mostrar texto y código dentro de HTML.

Abrir el convertidor completo

Más guías

Guías de conversión

Explorar guías