url debugging web-development javascript encoding

Résolution de 'URIError: URI malformed' et des erreurs URL courantes

Un guide complet pour corriger les erreurs URL telles que 'URIError: URI malformed', 'invalid URL' et les problèmes d'encodage en pourcentage. Apprenez la différence entre encodeURI et encodeURIComponent.

Résolution de "URIError: URI malformed" et des erreurs URL courantes : Le Guide Complet

Les URL (Uniform Resource Locators) sont les adresses du web. Bien qu'elles semblent simples, elles sont soumises à des règles strictes concernant les caractères autorisés. Lorsque ces règles ne sont pas respectées, vous rencontrez des erreurs telles que URIError: URI malformed, TypeError: Failed to construct 'URL': Invalid URL, ou simplement un lien mort menant à une erreur 404.

Dans ce guide, nous allons explorer les erreurs liées aux URL les plus courantes et comment les résoudre en JavaScript et dans d'autres environnements.


1. Messages d'erreur URL courants

Selon ce que vous faites, vous pouvez rencontrer ces erreurs :

  • JavaScript (decodeURIComponent) : URIError: URI malformed
  • JavaScript (new URL()) : TypeError: Failed to construct 'URL': Invalid URL
  • Python (urllib) : ValueError: Invalid URL
  • Java (URLDecoder) : java.lang.IllegalArgumentException: URLDecoder: Incomplete % sequence

2. Causes principales et solutions

2.1 "URIError: URI malformed"

Cette erreur se produit en JavaScript lorsque decodeURI() ou decodeURIComponent() rencontre une séquence d'encodage en pourcentage (percent encoding error) non valide. Cela se produit généralement si un signe % n'est pas suivi de deux chiffres hexadécimaux, ou si la séquence représente un caractère UTF-8 invalide.

L'Erreur :

decodeURIComponent("%") // URIError: URI malformed
decodeURIComponent("%E0%A4%A") // URIError: URI malformed (Incomplet)

La Solution :

  1. Échapper les signes % isolés : Si votre chaîne contient des signes % littéraux qui ne font pas partie d'une séquence encodée, vous devez les échapper sous la forme %25.
  2. Vérifier les troncatures : Assurez-vous que l'URL n'a pas été coupée au milieu d'une séquence (par exemple, à cause d'une limite de champ de base de données ou d'un paramètre de requête trop long).
  3. Utiliser Try-Catch : Enveloppez toujours le décodage dans un bloc try-catch.
function safeDecode(str) {
  try {
    return decodeURIComponent(str);
  } catch (e) {
    console.error("Malformed URL (URL malformée) :", str);
    return str; // Retourne la chaîne brute si le décodage échoue
  }
}

2.2 encodeURI vs. encodeURIComponent

Une erreur courante consiste à utiliser la mauvaise fonction d'encodage, ce qui entraîne des erreurs de type invalid URL lorsque le serveur reçoit la requête.

  • encodeURI() : Utilisé pour l'URL entière. Il n'encode PAS les caractères qui ont une signification spéciale dans la structure d'une URL (comme :, /, ?, #, &, =).
  • encodeURIComponent() : Utilisé pour les paramètres individuels (comme une requête de recherche ou un nom de fichier). Il encode tout sauf quelques caractères de base.

L'Erreur :

const url = "https://example.com/search?q=" + encodeURI("bleu/vert");
// Résultat : https://example.com/search?q=bleu/vert (Le / casse le paramètre)

La Bonne Méthode :

const url = "https://example.com/search?q=" + encodeURIComponent("bleu/vert");
// Résultat : https://example.com/search?q=bleu%2Fvert (Correct !)

2.3 "TypeError: Invalid URL"

Cela se produit lorsque vous passez une chaîne au constructeur URL qui n'est pas une URL absolue valide (par exemple, s'il manque le protocole comme https://).

L'Erreur :

new URL("www.google.com") // TypeError: Invalid URL

La Solution : Assurez-vous que l'URL est absolue ou fournissez une URL de base comme deuxième argument.

new URL("https://www.google.com") // Correct
new URL("/chemin", "https://example.com") // Correct

2.4 Erreurs d'encodage en pourcentage (Espaces et caractères spéciaux)

Les URL ne peuvent pas contenir d'espaces. Bien que certains navigateurs convertissent automatiquement les espaces en %20 ou +, il est dangereux de s'y fier.

La Solution : Encodez toujours les données dynamiques.

  • Espace -> %20 (Standard)
  • Espace -> + (Valable uniquement dans les chaînes de requête, comme ?q=hello+world)

3. Dépannage avancé

3.1 Double encodage (Double Encoding)

Si vous encodez une chaîne deux fois, cela devient incohérent. Par exemple, un espace devient %20, puis %2520. Solution : Suivez l'endroit où l'encodage se produit. N'encodez les données qu'une seule fois, juste avant de les ajouter à l'URL.

3.2 Encodages non-UTF-8

Le web moderne utilise l'UTF-8. Si vous rencontrez un vieux système utilisant GBK ou Latin1 pour les paramètres d'URL, decodeURIComponent échouera ou produira du "mojibake" (texte corrompu). Solution : Vous aurez peut-être besoin d'une bibliothèque comme iconv-lite pour gérer les encodages hérités avant de traiter l'URL.


4. Prévention et bonnes pratiques

  1. Utiliser l'API URL : Au lieu de concaténer manuellement des chaînes, utilisez les API intégrées URL et URLSearchParams. Elles gèrent l'encodage automatiquement et correctement.
  2. Soyez spécifique : Utilisez encodeURIComponent pour les valeurs de paramètres et encodeURI pour le chemin de base.
  3. Assainir les entrées : Si des utilisateurs fournissent des URL, validez-les en utilisant le constructeur URL dans un bloc try-catch.
function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;  
  }
}

5. FAQ : Foire Aux Questions

Q : Quelle est la différence entre %20 et + pour les espaces ?

R : %20 est l'encodage standard pour un caractère espace dans n'importe quelle partie d'un URI. + est une convention héritée spécifiquement pour les paramètres de requête (application/x-www-form-urlencoded). Utilisez %20 pour une compatibilité maximale.

Q : Pourquoi est-ce que je vois %25 dans mon URL ?

R : %25 est la version encodée du caractère % lui-même. Cela arrive généralement lorsqu'une URL qui était déjà encodée est encodée à nouveau (double encodage).

Q : Comment gérer les URL avec des Emojis ou des caractères non latins ?

R : Utilisez toujours encodeURIComponent. Il convertit correctement les caractères Unicode en une séquence d'octets UTF-8, puis encode chaque octet en pourcentage.


6. Outil de vérification rapide

Vous avez des difficultés avec une malformed URL ? Utilisez notre Encodeur & Décodeur d'URL. Il peut :

  • Valider instantanément si une URL est bien formée.
  • Comparer les résultats de encodeURI et encodeURIComponent.
  • Décoder en toute sécurité des chaînes de requête complexes.
  • Gérer les Noms de Domaine Internationalisés (IDN).

Erreurs associées

  • Résolution des erreurs 'Unexpected token in JSON'
  • Comment corriger les erreurs 'invalid base64 string'
  • Comprendre URIError: URI malformed