# Encodeur et décodeur d'URL / URI Component : Architecture technique et guide approfondi

Les identifiants uniformes de ressources (URI) et localisateurs (URL) régissent l'adressage web selon la blank" rel="noopener noreferrer" class="text-emerald-400 hover:text-emerald-300 underline underline-offset-4 decoration-emerald-500/40 hover:decoration-emerald-400 font-medium transition inline-flex items-center gap-0.5">RFC 3986 et le standard WHATWG URL Living Standard, imposant un routage déterministe à travers proxys et microservices.

Lors du transfert de données dans les requêtes (query strings), chemins ou formulaires, les caractères non-ASCII, espaces et symboles doivent être convertis en US-ASCII via l'encodage pourcent (percent-encoding). Tout échappement incorrect provoque troncatures, failles (redirections ouvertes, SSRF) et erreurs fatales URIError: URI malformed.

La suite ToolsAA Encodeur & Décodeur d'URL / Composants URI réunit un encodeur URL en ligne, un décodeur URL bidirectionnel et un banc d'essai pour encodeURIComponent en ligne. Conçue à 100 % côté client ("use client"), elle garantit une confidentialité absolue : zéro transmission réseau pour vos jetons OAuth, clés d'API et adresses internes.

# Présentation générale et cas d'usage en production

L'encodage d'URL convertit les octets en triplets US-ASCII %XY (XY étant l'octet en hexadécimal), préservant la structure de l'adresse tout en neutralisant la charge utile (payload).

+---------------------------------------------------------------------------------------------------+
|                                      Anatomie d'une URI Moderne                                   |
|  https://api.domain.com:443 /v2/search/resource ;matrix=val ?q=developer+tools&lang=fr #results   |
|  |___|   |____________| |__| |________________| |__________| |_______________________| |_______|  |
| Protocole    Autorité   Port        Chemin       Paramètres         Chaîne de Requête    Fragment |
| (Scheme)   (Authority)              (Path)        Matrix              (Query String)              |
+---------------------------------------------------------------------------------------------------+
                                                   |
                        +--------------------------+--------------------------+
                        |                                                     |
                        v                                                     v
       [ Encodage au niveau du Composant ]                          [ Encodage d'URI Complète ]
       - Préserve : ALPHA, DIGIT, - _ . ~                          - Préserve : Protocole, hôte,
       - Encode : : / ? # [ ] @ ! $ & ' ( ) * + , ; =                slashes du chemin, délimiteurs
       - Cible : Clés et valeurs de paramètres de requête          - Cible : Adresses web complètes

# Cas d'usage clés en ingénierie logicielle

• Autorisation OAuth 2.0 et OIDC : Les points de redirection imposent l'encodage des composants pour isoler les arguments et préserver les jetons PKCE code_challenge.
• Sérialisation REST et GraphQL : Les requêtes GET avec filtres JSON doivent échapper leurs symboles (filter={"status":"active"} devient filter=%7B%22status%22%3A%22active%22%7D).
• Signatures Cloud (AWS SigV4) : Les API cloud exigent des requêtes canoniques triées et encodées selon la RFC 3986 pour valider les signatures HMAC.
• Routage multilingue (i18n) : Les caractères non-ASCII et émojis sont convertis en hexadécimal UTF-8 (東京 devient %E6%9D%B1%E4%BA%AC).
• Webhooks et formulaires : Le format application/x-www-form-urlencoded remplace les espaces par + et échappe les délimiteurs réservés.

# Traitement côté client et confidentialité

Traiter des URLs sur des serveurs distants crée des failles : elles contiennent souvent jetons OAuth, cookies et clés d'API. Les exposer aux journaux et mandataires tiers viole le RGPD, HIPAA et SOC 2. ToolsAA applique un modèle strict sans serveur (Zero-Server Processing) : tout s'exécute en mémoire dans le navigateur, sans requête sortante.

# Architecture technique et fonctionnement interne

L'encodage d'URL repose sur plusieurs spécifications successives dont la maîtrise évite les corruptions de données.

# 1. Le continuum des spécifications : RFC 3986 vs RFC 2396 vs WHATWG

La RFC 2396 (1998) classait la ponctuation (!, ', (, ), *) en marques non réservées. encodeURIComponent() les préserve par rétrocompatibilité. La RFC 3986 (2005) les a reclassées en sous-délimiteurs réservés à encoder dans les contextes stricts. Les caractères non réservés (A-Z, a-z, 0-9, -, _, ., ~) ne sont jamais encodés. Le standard WHATWG modernise l'analyse et standardise application/x-www-form-urlencoded.

# 2. Mécanique binaire de l'encodage pourcent UTF-8

Chaque caractère Unicode est converti en octets UTF-8 avant encodage :

• 1 octet (U+0000 à U+007F) : US-ASCII standard. L'espace (U+0020) donne %20.
• 2 octets (U+0080 à U+07FF) : Accents latins. é (U+00E9) donne 0xC3 0xA9 (%C3%A9).
• 3 octets (U+0800 à U+FFFF) : Idéogrammes CJK. 東 (U+6771) donne 0xE6 0x9D 0xB1 (%E6%9D%B1).
• 4 octets (U+10000 à U+10FFFF) : Émojis. 🚀 (U+1F680) donne 0xF0 0x9F 0x9A 0x80 (%F0%9F%9A%80).

En JavaScript, les points de code au-delà de U+FFFF forment des paires de substitution UTF-16. Un demi-codet orphelin déclenche l'erreur URIError: URI malformed.

# 3. Le triptyque d'API Web natives du navigateur

• encodeURIComponent() : Encode tous les délimiteurs sauf A-Z, a-z, 0-9, -, _, ., !, ~, *, ', (, ). Cible : paramètres individuels.
• encodeURI() : Encode les caractères illégaux tout en préservant les délimiteurs structurels (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =). Cible : URLs complètes.
• URLSearchParams : Implémente application/x-www-form-urlencoded. Formate les espaces en + et traite indifféremment + et %20 comme des espaces.

# 4. API Web natives, Web Crypto et architecture réactive

• Concurrence React 18 : Emploie useDeferredValue() pour découpler saisie et tokenisation (60 FPS).
• Web Workers : Au-delà de 500 Ko, le traitement s'exécute via TextEncoder et TextDecoder sur tableaux typés.
• Web Crypto API : Calcule les empreintes SHA-256 (crypto.subtle.digest) pour valider défis PKCE et signatures HMAC.
• Canvas HTML5 : Les graphiques sont dessinés sur un <canvas> hors écran sans reflow DOM.

# Guide pratique étape par étape

# Étape 1 : Ingestion des données et préréglages

Collez votre chaîne de test ou choisissez un préréglage : OAuth 2.0 PKCE ou Charge utile JSON REST. Les fichiers locaux s'importent par glisser-déposer via FileReader.

# Étape 2 : Sélection de l'algorithme d'encodage

• encodeURIComponent : Pour isoler paramètres de requête et segments de chemin.
• Strict RFC 3986 : Pour signatures cloud (AWS SigV4), échappant !, ', (, ), et *.
• encodeURI : Pour assainir des adresses sans altérer barres obliques ni ancres.
• application/x-www-form-urlencoded : Pour convertir les espaces en + (formulaires HTML).

# Étape 3 : Analyse interactive des paramètres

ToolsAA extrait automatiquement les paramètres d'URL en tableau clé-valeur. Modifiez les valeurs en direct, cochez/décochez des arguments ou ajoutez de nouvelles clés de suivi.

# Étape 4 : Décodage sécurisé, résilient et récursif

• Détection du double encodage : Signale les motifs %2520 ou %253A révélant un échappement redondant.
• Désimbrication récursive (Auto-Unpack) : Décode successivement les couches imbriquées jusqu'à stabilisation.
• Tolérance aux erreurs : Les séquences malformées sont isolées sans interrompre le script.

# Étape 5 : Analyse des métriques et export

Consultez le nombre de caractères, le volume en octets UTF-8 et le taux d'inflation mémoire. Copiez le résultat d'un clic ou téléchargez-le en fichier texte.

# Implémentations de code prêtes pour la production

# 1. Implémentation en TypeScript / JavaScript moderne

Un utilitaire autonome sans dépendance externe assurant le respect de la RFC 3986, le décodage résilient et la manipulation de chaînes de requête :

export type EncodingMode = "rfc3986" | "component" | "fullUri" | "formUrlEncoded";

export class UrlCodec {
  public static encodeStrictRFC3986(input: string): string {
    return encodeURIComponent(input).replace(
      /[!'()*]/g,
      (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`
    );
  }

  public static encode(input: string, mode: EncodingMode = "component"): string {
    if (!input) return "";
    switch (mode) {
      case "rfc3986": return this.encodeStrictRFC3986(input);
      case "component": return encodeURIComponent(input);
      case "fullUri": return encodeURI(input);
      case "formUrlEncoded":
        return encodeURIComponent(input)
          .replace(/%20/g, "+")
          .replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
      default: throw new Error(`Mode non supporté : ${mode}`);
    }
  }

  public static safeDecode(input: string, isForm = false): { text: string; error: boolean } {
    if (!input) return { text: "", error: false };
    const normalized = isForm ? input.replace(/\+/g, " ") : input;
    try {
      return { text: decodeURIComponent(normalized), error: false };
    } catch {
      let output = "", hasError = false;
      for (const token of normalized.split(/(%[0-9a-fA-F]{2})/g)) {
        if (token.startsWith("%") && token.length === 3) {
          try { output += decodeURIComponent(token); }
          catch { output += token; hasError = true; }
        } else { output += token; }
      }
      return { text: output, error: hasError };
    }
  }

  public static parseQuery(urlOrQuery: string): Record<string, string[]> {
    const raw = urlOrQuery.includes("?") ? urlOrQuery.split("?")[1].split("#")[0] : urlOrQuery;
    const params: Record<string, string[]> = {};
    new URLSearchParams(raw).forEach((val, key) => {
      params[key] = params[key] ? [...params[key], val] : [val];
    });
    return params;
  }
}

# 2. Implémentation en Python 3.11+ moderne

Un module typé pour l'encodage RFC 3986 et la construction de requêtes canoniques pour API cloud :

from typing import Dict, List, Tuple, Union
import urllib.parse

class UrlCodec:
    @staticmethod
    def encode_rfc3986(value: str) -> str:
        return urllib.parse.quote(str(value or ""), safe="-_.~")

    @staticmethod
    def encode_form(value: str) -> str:
        return urllib.parse.quote_plus(str(value or ""))

    @staticmethod
    def safe_decode(encoded_str: str, is_form: bool = False) -> str:
        if not encoded_str:
            return ""
        decoder = urllib.parse.unquote_plus if is_form else urllib.parse.unquote
        return decoder(encoded_str, errors="replace")

    @classmethod
    def build_canonical_query(cls, params: Dict[str, Union[str, List[str]]]) -> str:
        pairs: List[Tuple[str, str]] = []
        for key, val in params.items():
            k = cls.encode_rfc3986(str(key))
            items = val if isinstance(val, list) else [val]
            for item in items:
                pairs.append((k, cls.encode_rfc3986(str(item))))
        pairs.sort(key=lambda x: (x[0], x[1]))
        return "&".join(f"{k}={v}" for k, v in pairs)

# Pièges courants, cas limites et guide de dépannage

# 1. Le double encodage (%2520)

Le double encodage convertit % en %25, transformant %20 en %2520.

• Solution : Vérifiez l'idempotence : si decodeURIComponent(str) !== str, la chaîne comporte déjà des séquences actives.

# 2. La dualité de l'espace : + versus %20

Dans la RFC 3986, l'espace vaut %20. Dans application/x-www-form-urlencoded, il devient +.

• Solution : Encodez les vrais signes plus en %2B. Utilisez %20 pour les API REST et réservez + aux formulaires POST.

# 3. Paires de substitution orphelines et erreur URIError

Tronquer un émoji au milieu de sa paire UTF-16 laisse un demi-codet isolé (\uD83D), provoquant l'exception URIError: URI malformed.

• Solution : Assainissez la chaîne avec String.prototype.toWellFormed() avant encodage :

```javascript const chaineSecurisee = encodeURIComponent(texteBrut.toWellFormed()); ```

# 4. Découpage artisanal de chaînes d'URL par split("&")

Découper une URL par split("?")[1].split("&") corrompt les valeurs contenant des symboles & ou = littéraux non échappés.

• Solution : Utilisez toujours les analyseurs officiels URL et URLSearchParams conformes à WHATWG.

# 5. Encodage des barres obliques (%2F) et proxys inverses

Apache bloque par défaut %2F dans les chemins (HTTP 404), tandis que Nginx normalise %2F en / avant réacheminement.

• Solution : Passez les barres obliques dans les paramètres de requête (?dept=eng%2Fops) plutôt que dans le chemin.

# 6. Noms de domaine internationalisés (IDN) et chemins

Exécuter encodeURI("https://münchen.de") produit https://m%C3%BCnchen.de, ce que les serveurs DNS rejettent.

• Solution : Convertissez les noms d'hôtes en Punycode via RFC 5891 (xn--mnchen-3ya.de). L'encodage pourcent s'applique aux chemins et requêtes.

# Foire aux questions technique (FAQ)

# Q1 : Quelle est la différence exacte entre encodeURI() et encodeURIComponent() ?

Réponse : encodeURI() traite une URL complète et préserve ses délimiteurs structurels (:, /, ?, #, &, =). encodeURIComponent() encode un composant individuel et échappe aussi :, /, ?, & et = pour préserver la structure hôte.

# Q2 : Pourquoi encodeURIComponent() préserve-t-elle !, ', (, ), et * ?

Réponse : ECMAScript suit la RFC 2396 d'origine classant ces symboles en marques non réservées. Bien que la RFC 3986 les reclasse en sous-délimiteurs réservés, les navigateurs conservent ce comportement pour rétrocompatibilité. Les API cloud strictes (AWS SigV4) exigent un remplacement regex complémentaire.

# Q3 : Quand doit-on représenter un espace par + plutôt que par %20 ?

Réponse : L'espace s'encode en + uniquement dans les formulaires HTML application/x-www-form-urlencoded. Partout ailleurs — chemins d'URL, API REST JSON, RFC 3986 —, l'espace doit être encodé en %20. Dans un chemin, + représente un signe plus littéral.

# Q4 : Comment éviter l'erreur URIError: URI malformed lors du décodage de données arbitraires ?

Réponse : decodeURIComponent() échoue sur séquence tronquée ou paire UTF-16 invalide. Encapsulez l'opération dans un bloc try...catch avec repli par jetons, ou assainissez la chaîne avec str.toWellFormed() pour substituer les demi-codets orphelins.

# Q5 : Comment fonctionne l'encodage pourcent multi-octets UTF-8 pour les accents et émojis ?

Réponse : Les caractères non-ASCII se décomposent en octets UTF-8, chacun devenant un triplet %XY. Par exemple, é (U+00E9) utilise 2 octets (%C3%A9), 東 (U+6771) requiert 3 octets (%E6%9D%B1), et 🚀 (U+1F680) requiert 4 octets (%F0%9F%9A%80).

# Q6 : Comment détecter par programmation si une chaîne est déjà encodée ?

Réponse : Testez les motifs hexadécimaux avec /%[0-9A-Fa-f]{2}/.test(str) et vérifiez l'idempotence : si decodeURIComponent(str) !== str, la chaîne comporte des séquences actives. Si décoder puis ré-encoder restitue l'entrée d'origine, elle est déjà encodée.

# Q7 : Mes clés d'API ou données confidentielles sont-elles transmises à un serveur avec ToolsAA ?

Réponse : Non. ToolsAA fonctionne exclusivement côté client ("use client"). Toutes les opérations s'exécutent dans la mémoire du navigateur : zéro requête réseau émise et aucune donnée collectée à distance.

# Q8 : Pourquoi les proxys inverses renvoient-ils une erreur 404 face à des slashes encodés %2F ?

Réponse : Apache bloque %2F dans le chemin (404 par défaut) pour prévenir la traversée de répertoire, tandis que Nginx le normalise en /. Transmettez les barres obliques dans les paramètres de requête.

# Tableau comparatif technique : Spécifications d'encodage d'URL

# Conclusion

Une manipulation rigoureuse de l'encodage d'URL est indispensable aux architectures web modernes. De la sécurisation des flux OAuth 2.0 aux signatures AWS SigV4, la précision syntaxique prévient les failles et les pannes.

En maîtrisant les frontières entre RFC 3986, primitives JavaScript et formulaires, les ingénieurs éliminent les doubles encodages et gèrent sereinement les cas limites. La suite ToolsAA Encodeur & Décodeur d'URL / URI Component offre un environnement déterministe pour vos opérations, garantissant une exécution 100 % locale et une confidentialité absolue.