Encodage des espaces dans les URL : %20 ou + (quand utiliser lequel)

Que signifie %20 ?

%20 est la représentation en encodage pour cent du caractère espace (code ASCII 32, hexadécimal 0x20), telle que définie par la RFC 3986. C'est la manière standard de représenter les espaces dans n'importe quelle partie d'un URI, y compris les segments de chemin, les chaînes de requête et les identifiants de fragment.

Lorsque vous voyez %20 dans une URL, cela signifie simplement « il y a un espace ici ». Par exemple, https://example.com/my%20file.pdf fait référence à une ressource nommée « my file.pdf ». Le %20 est compris de manière universelle par tous les serveurs web, navigateurs et bibliothèques HTTP.

Que signifie + dans une URL ?

Le signe + représentant un espace provient du type de contenu application/x-www-form-urlencoded, qui a été défini dans la spécification HTML pour l'encodage des données de formulaire. Lorsqu'un formulaire HTML est soumis à l'aide de la méthode GET, le navigateur encode les espaces sous forme de + dans la chaîne de requête résultante.

Par exemple, si vous saisissez « hello world » dans un formulaire de recherche et que vous le soumettez, le navigateur génère une URL telle que https://example.com/search?q=hello+world. Le + signifie ici « espace », mais uniquement parce que la chaîne de requête utilise le format form-urlencoded.

Il est important de noter que + n'a aucune signification particulière en dehors du format application/x-www-form-urlencoded. Dans un chemin d'URL comme /files/my+file.pdf, le + est un signe plus littéral, et non un espace. La ressource référencée porte littéralement le nom « my+file.pdf ».

La différence essentielle

La différence fondamentale réside dans la spécification à laquelle chacun appartient. %20 est défini par la RFC 3986 (URI) et fonctionne partout dans une URL. La convention du + en tant qu'espace est définie par la spécification HTML/WHATWG pour les données de formulaire et ne fonctionne que dans les chaînes de requête explicitement traitées comme des données form-urlencoded.

• %20 fonctionne dans les chemins, les chaînes de requête, les fragments et tous les contextes d'URI
• + ne signifie « espace » que dans les chaînes de requête application/x-www-form-urlencoded
• Dans les chemins d'URL, + est un signe plus littéral, et non un espace
• %20 est toujours sûr ; + dépend du contexte
• Si vous encodez un + littéral dans des données de formulaire, il devient %2B

Lequel devriez-vous utiliser ?

Utilisez %20 lorsque vous construisez des URL par programmation, que vous élaborez des requêtes d'API REST, que vous encodez des segments de chemin, ou chaque fois que vous avez un doute. C'est l'encodage universellement correct pour les espaces dans les URI.

Utilisez + uniquement lorsque vous produisez intentionnellement des données application/x-www-form-urlencoded, par exemple en construisant des chaînes de requête qui imitent des soumissions de formulaires HTML, ou lorsqu'une API exige explicitement ce format.

La plupart des API et frameworks modernes acceptent à la fois %20 et + dans les chaînes de requête. Cependant, l'utilisation de %20 est plus portable et évite toute ambiguïté, en particulier lorsque la chaîne de requête est susceptible d'être utilisée dans des contextes autres que la soumission de formulaires.

Comment les différents langages gèrent les espaces

Les différents langages de programmation et leurs bibliothèques standard peuvent adopter par défaut soit %20, soit + pour l'encodage des espaces. Connaître le comportement par défaut de votre langage vous aide à éviter les mauvaises surprises.

// JavaScript
encodeURIComponent('hello world');  // "hello%20world" (%20)
new URLSearchParams({q: 'hello world'}).toString();  // "q=hello+world" (+)

// Pour forcer %20 dans les chaînes de requête :
new URLSearchParams({q: 'hello world'}).toString().replace(/\+/g, '%20');

# Python
from urllib.parse import quote, quote_plus, urlencode

quote('hello world', safe='')    # "hello%20world" (%20)
quote_plus('hello world')        # "hello+world" (+)
urlencode({'q': 'hello world'})  # "q=hello+world" (+ par défaut)

# Pour forcer %20 :
urlencode({'q': 'hello world'}, quote_via=quote)  # "q=hello%20world"

// PHP
rawurlencode('hello world');  // "hello%20world" (%20)
urlencode('hello world');     // "hello+world" (+)

// rawurlencode suit la RFC 3986
// urlencode suit application/x-www-form-urlencoded