Outils de développement · Encodeur et décodeur d'URL
Anatomie d'une URL : schéma, autorité, chemin, requête et fragment expliqués
· Contexte
structure-url normes Web outils de développement
Chaque décision de codage en pourcentage dépend de la partie de l'URL dans laquelle se trouve un caractère. Cet article nomme les cinq composants de la RFC 3986, montre la signification de chaque délimiteur et pourquoi le fragment n'atteint jamais le serveur.
Pourquoi le même # convient à un endroit et détruit un lien à un autre – une question de composant, pas une question de caractère
Un caractère dièse (#) dans une URL signifie des choses complètement différentes selon l'endroit où il apparaît. Dans une valeur de chaîne de requête telle que ?search=C%23sharp, elle doit être codée en %23 pour être sûr. À la fin d'une URL comme https://example.com/page#section,, il marque le délimiteur de fragment et tout ce qui suit est un fragment. Un personnage, deux contextes, deux significations différentes. C'est pourquoi les décisions d'encodage dépendent de la connaissance de la partie de l'URL avec laquelle vous travaillez.
Le point d'interrogation (?) a également une double nature. À l’intérieur d’un chemin ou d’une valeur de requête, il doit être codé en %3F pour apparaître sous forme de données. En tant que caractère littéral entre le chemin et la chaîne de requête, il s'agit d'une syntaxe structurelle. Comprendre ces cinq composants (schéma, autorité, chemin, requête et fragment) constitue la base d'une gestion correcte des URL.
Les cinq composants : schéma, autorité, chemin, requête, fragment — et les délimiteurs qui les séparent
RFC 3986 définit formellement les URL comme ayant cinq composants : schéma, autorité, chemin, requête et fragment, séparés par des délimiteurs spécifiques. Le schéma vient en premier, suivi de ://, puis de l'autorité, puis de /, puis du chemin, puis ?, puis de la requête, puis de #, puis du fragment. Tous les composants n'apparaissent pas dans chaque URL. Une URL minimale peut avoir uniquement un schéma et un chemin, comme « mailto:user@example.com ». Une URL complète inclut les cinq.
Chaque composant a ses propres règles de syntaxe. Un deux-points est réservé dans le schéma, une barre oblique dans le chemin, une esperluette dans la requête. Les caractères réservés doivent être codés lorsqu'ils apparaissent sous forme de données : la barre oblique dans les valeurs de chemin devient %2F.
À l'intérieur de l'autorité – informations utilisateur, hôte et port, et pourquoi @ et : y sont réservés
Le composant autorité contient l'adresse réseau de la ressource : nom d'utilisateur, mot de passe, nom d'hôte et port. Le format est [userinfo@]host[:port]. Les informations utilisateur et l'hôte sont séparés par @ ; l'hôte et le port sont séparés par :. Ces caractères @ et : sont réservés au sein de l'autorité pour délimiter ces sous-composants. Si votre nom d'utilisateur contient un symbole @, il doit être codé en pourcentage avant de le concaténer. Par exemple, "user@email.com:password" comme nom d'utilisateur deviendrait "user%40email.com:password" avant le @ final.
Le nom d'hôte peut être un domaine enregistré comme exemple.com, une adresse IP en décimal pointé comme 192.0.2.1 ou une adresse IPv6 entre parenthèses comme [::1]. Le port est facultatif ; en cas d'omission, le schéma détermine la valeur par défaut (80 pour http, 443 pour https, etc.). La partie userinfo est rarement utilisée dans les URL modernes mais reste une partie de la syntaxe.
Segments de chemin et signification de / — structure hiérarchique et résolution des segments de points
Le chemin est une séquence de segments séparés par des barres obliques. Le chemin /a/b/c comporte trois segments : a, b et c. Chaque segment peut contenir des caractères non réservés, des caractères codés en pourcentage ou certains caractères réservés sûrs dans ce contexte. Une barre oblique dans un segment doit être codée en %2F pour éviter toute confusion avec les séparateurs de segments. Le chemin est hiérarchique ; cela implique que a est un emplacement, alors a/b est plus spécifique.
Les chemins prennent également en charge des segments de points spéciaux : un seul point (.) signifie "répertoire actuel" et deux points (..) signifient "répertoire parent". Un chemin comme ../../etc/passwd se résout vers le haut. Les URL modernes et HTTP évitent de les utiliser, mais ils existent dans la syntaxe. Un segment de chemin contenant un point littéral ou un double point doit être codé en pourcentage si la signification littérale du point n'est pas prévue.
Requête et fragment : conventions clé-valeur et raison pour laquelle le fragment reste dans le navigateur
La chaîne de requête suit le chemin et commence par ?. Il s'agit traditionnellement d'une série de paires clé=valeur séparées par &, bien que la syntaxe soit en réalité non structurée : tout peut entrer dans une requête. Si vous avez une valeur contenant & ou =, ces caractères doivent être codés en pourcentage afin qu'ils ne soient pas confondus avec des délimiteurs. La requête est envoyée au serveur ; le serveur décide quoi en faire.
Le fragment suit la requête et commence par #. Tout ce qui suit # est un fragment et n'atteint jamais le serveur. Le navigateur gère le fragment localement, généralement pour accéder à une ancre nommée ou pour indiquer un état dans une application d'une seule page. Étant donné que le fragment n’atteint jamais le serveur, une URL contenant un fragment différent est considérée comme pointant vers la même ressource.
Exemple concret : disséquer une longue URL du monde réel – étiqueter chaque composant et chaque délimiteur
Prenez l'URL "https://user:pass@example.com:8080/path/to/page?search=hello&sort=date#results". Le schéma est https. L'autorité est user:pass@example.com:8080, divisée en userinfo (user:pass), host (example.com) et port (8080). Le chemin est /path/to/page, avec des segments chemin, vers et page. La requête est search=hello&sort=date, contenant deux paramètres. Le fragment correspond aux résultats. Entrez cette URL dans l'encodeur et le décodeur d'URL pour voir comment l'outil étiquette et encode chaque composant.
Si la recherche contenait &, comme ?search=R&D, elle devient ?search=R%26D lorsqu'elle est correctement encodée. Les caractères codés en pourcentage ne créent pas de limites visuelles dans le texte, un codage et un décodage minutieux sont donc absolument essentiels pour une analyse correcte.
Ce que ceci ne couvre pas : la résolution de référence relative et les schémas spéciaux tels que mailto : et data :
Les références relatives telles que "../page" ou "?query=value" sont valides dans HTML et interprétées par rapport au document actuel, mais elles ont leurs propres règles de résolution distinctes. Les schémas spéciaux comme mailto:, data: et file: suivent des règles complètement différentes et ne sont pas des URL absolues standards.
Cet article se concentre uniquement sur la structure d'URL absolue standard démontrée par l'inspecteur. Les références relatives ont besoin d'une URL de base avant que leurs composants puissent être interprétés, tandis que des schémas tels que mailto et data ne partagent pas la même forme d'autorité et de chemin. Garder ces cas séparés empêche qu'une règle apprise à partir d'une adresse HTTPS soit appliquée aveuglément à une syntaxe avec des délimiteurs, des étapes de résolution ou un comportement de transport différents.
À retenir : connaissez le composant avant de l'encoder - comment les modes de valeur unique et d'adresse entière de l'encodeur et du décodeur d'URL correspondent à cette structure
Le composant que vous encodez détermine quels caractères doivent être échappés et lesquels sont sûrs. Une barre oblique est une syntaxe littérale dans le chemin, donc une barre oblique dans une valeur doit être %2F. Dans les requêtes, & et = doivent être codés s'ils apparaissent dans les valeurs. L'encodeur et décodeur d'URL a deux modes : "composant" pour encoder une seule valeur et "adresse entière" pour une URL complète. Utilisez le mode composant lors de la création d'URL en concaténant des parties ; utilisez le mode adresse entière pour vérifier une URL existante.
Connaître les cinq composants et leurs délimiteurs vous permet de choisir correctement chaque fois que vous rencontrez une tâche d'encodage.