Herramientas de desarrollo · Codificador y decodificador de URL
Anatomía de una URL: esquema, autoridad, ruta, consulta y fragmento explicados
· Antecedentes
estructura-URL estándares web herramientas de desarrollador
Cada decisión de codificación porcentual depende de en qué parte de la URL se encuentra un carácter. Esta publicación nombra los cinco componentes del RFC 3986, muestra lo que significa cada delimitador y por qué el fragmento nunca llega al servidor.
Por qué el mismo # está bien en un lugar y destruye un enlace en otro: una pregunta de componente, no de carácter
Un carácter almohadilla (#) en una URL significa cosas completamente diferentes dependiendo de dónde aparezca. Dentro de un valor de cadena de consulta como ?search=C%23sharp, se debe codificar en %23 para que sea seguro. Al final de una URL como https://example.com/page#section, marca el delimitador del fragmento y todo lo que sigue es un fragmento. Un personaje, dos contextos, dos significados diferentes. Es por eso que las decisiones de codificación dependen de saber con qué parte de la URL estás trabajando.
El signo de interrogación (?) también tiene naturaleza dual. Dentro de una ruta o valor de consulta, debe codificarse como %3F para que aparezca como datos. Como carácter literal entre la ruta y la cadena de consulta, es una sintaxis estructural. Comprender estos cinco componentes (esquema, autoridad, ruta, consulta y fragmento) es la base del manejo correcto de URL.
Los cinco componentes: esquema, autoridad, ruta, consulta, fragmento y los delimitadores que los separan.
RFC 3986 define formalmente las URL con cinco componentes: esquema, autoridad, ruta, consulta y fragmento, separados por delimitadores específicos. El esquema viene primero, seguido de ://, luego la autoridad, luego /, luego la ruta, luego ?, luego la consulta, luego # y luego el fragmento. No todos los componentes aparecen en todas las URL. Una URL mínima puede tener solo un esquema y una ruta, como "mailto:user@example.com". Una URL completa incluye los cinco.
Cada componente tiene sus propias reglas de sintaxis. Se reservan dos puntos en el esquema, una barra en la ruta y un signo en la consulta. Los caracteres reservados necesitan codificación cuando aparecen como datos: la barra diagonal en los valores de ruta se convierte en %2F.
Dentro de la autoridad: información de usuario, host y puerto, y por qué @ y : están reservados allí
El componente de autoridad contiene la dirección de red del recurso: nombre de usuario, contraseña, nombre de host y puerto. El formato es [userinfo@]host[:puerto]. La información de usuario y el host están separados por @; el host y el puerto están separados por :. Estos caracteres @ y : están reservados dentro de la autoridad para delimitar estos subcomponentes. Si tiene un nombre de usuario que contiene un símbolo @, debe estar codificado en porcentaje antes de concatenarlo. Por ejemplo, "usuario@email.com:contraseña" como nombre de usuario se convertiría en "usuario%40email.com:contraseña" antes de la @ final.
El nombre de host puede ser un dominio registrado como ejemplo.com, una dirección IP en decimal con puntos como 192.0.2.1 o una dirección IPv6 entre corchetes como [::1]. El puerto es opcional; si se omite, el esquema determina el valor predeterminado (80 para http, 443 para https, etc.). La parte de información de usuario rara vez se usa en las URL modernas, pero sigue siendo parte de la sintaxis.
Segmentos de ruta y el significado de / — estructura jerárquica y resolución de segmentos de puntos
La ruta es una secuencia de segmentos separados por barras diagonales. La ruta /a/b/c tiene tres segmentos: a, b y c. Cada segmento puede contener caracteres no reservados, caracteres codificados en porcentaje o ciertos caracteres reservados que son seguros en este contexto. Una barra diagonal dentro de un segmento debe codificarse como %2F para evitar confusiones con los separadores de segmentos. El camino es jerárquico; implica que a es una ubicación, entonces a/b es más específico.
Las rutas también admiten segmentos de puntos especiales: un solo punto (.) significa "directorio actual" y dos puntos (..) significan "directorio principal". Una ruta como ../../etc/passwd se resuelve hacia arriba. Las URL modernas y HTTP evitan su uso, pero existen en la sintaxis. Un segmento de ruta que contiene un punto literal o un punto doble debe estar codificado en porcentaje si no se desea el significado literal del punto.
Consulta y fragmento: convenciones de valores clave y por qué el fragmento permanece en el navegador
La cadena de consulta sigue la ruta y comienza con ?. Tradicionalmente es una serie de pares clave=valor separados por &, aunque la sintaxis en realidad no está estructurada: cualquier cosa puede incluirse en una consulta. Si tiene un valor que contiene & o =, esos caracteres deben estar codificados en porcentaje para que no se confundan con delimitadores. La consulta se envía al servidor; el servidor decide qué hacer con él.
El fragmento sigue a la consulta y comienza con #. Todo lo que sigue a # es un fragmento y nunca llega al servidor. El navegador maneja el fragmento localmente, generalmente para saltar a un ancla con nombre o para indicar el estado dentro de una aplicación de una sola página. Debido a que el fragmento nunca llega al servidor, se considera que una URL con un fragmento diferente apunta al mismo recurso.
Ejemplo resuelto: diseccionar una URL larga del mundo real: etiquetar cada componente y cada delimitador
Tome la URL "https://user:pass@example.com:8080/path/to/page?search=hello&sort=date#results".. El esquema es https. La autoridad es usuario:contras@ejemplo.com:8080, divídala en información de usuario (usuario:contraseña), host (ejemplo.com) y puerto (8080). La ruta es /path/to/page, con segmentos ruta, dirección y página. La consulta es buscar=hola&sort=fecha, y contiene dos Los parámetros son los resultados. Ingrese esta URL en el codificador y decodificador de URL para ver cómo la herramienta etiqueta y codifica cada componente.
Si la búsqueda contenía &, como ?search=R&D, se convierte en ?search=R%26D cuando se codifica correctamente. Los caracteres codificados por porcentaje no crean límites visuales en el texto, por lo que una codificación y decodificación cuidadosas es absolutamente esencial para un análisis correcto.
Lo que esto no cubre: resolución de referencia relativa y esquemas especiales como mailto: y datos:
Las referencias relativas como "../page" o "?query=value" son válidas dentro de HTML y se interpretan en relación con el documento actual, pero tienen sus propias reglas de resolución independientes. Esquemas especiales como mailto:, data: y file: siguen reglas completamente diferentes y no son URL absolutas estándar.
Esta publicación se centra únicamente en la estructura de URL absoluta estándar demostrada por el inspector. Las referencias relativas necesitan una URL base antes de que sus componentes puedan interpretarse, mientras que esquemas como mailto y datos no comparten la misma forma de autoridad y ruta. Mantener esos casos separados evita que una regla aprendida de una dirección HTTPS se aplique ciegamente a la sintaxis con diferentes delimitadores, pasos de resolución o comportamiento de transporte.
Conclusión: conozca el componente antes de codificar: cómo los modos de valor único y de dirección completa del codificador y descodificador de URL se asignan a esta estructura
El componente que está codificando determina qué caracteres deben escaparse y cuáles son seguros. Una barra diagonal es una sintaxis literal en la ruta, por lo que una barra diagonal en un valor debe ser %2F. En consultas, & y = deben codificarse si aparecen en valores. El codificador y decodificador de URL tiene dos modos: "componente" para codificar un valor único y "dirección completa" para una URL completa. Utilice el modo de componente al crear URL concatenando partes; utilice el modo de dirección completa para verificar una URL existente.
Conocer los cinco componentes y sus delimitadores le permite elegir correctamente cada vez que encuentre una tarea de codificación.