Un espace html s'affiche sous la forme% 2520 au lieu de% 20


110

Passer un nom de fichier au navigateur Firefox le fait remplacer les espaces par %2520 au lieu de %20.

J'ai le code HTML suivant dans un fichier appelé myhtml.html:

<img src="C:\Documents and Settings\screenshots\Image01.png"/>

Lorsque je charge myhtml.htmldans Firefox, l'image apparaît comme une image cassée. Je clique donc avec le bouton droit sur le lien pour afficher l'image et il montre cette URL modifiée:

file:///c:/Documents%2520and%2520Settings/screenshots/Image01.png
                    ^
                    ^-----Firefox changed my space to %2520.

Que diable? Il a converti mon espace en un %2520. Ne devrait-il pas le convertir en un %20?

Comment modifier ce fichier HTML afin que le navigateur puisse trouver mon image? Que se passe t-il ici?

Réponses:


219

Un peu d'explication sur ce que %2520c'est:

Le caractère d'espace commun est codé %20comme vous l'avez noté vous-même. Le %caractère est codé comme %25.

La façon dont vous obtenez %2520est lorsque votre URL contient déjà un code URL %20et qu'elle est à nouveau codée, ce qui transforme le fichier %20en %2520.

Êtes-vous (ou un framework que vous utilisez) des caractères à double codage?

Edit: Développez un peu à ce sujet, en particulier pour les liens LOCAUX . En supposant que vous souhaitiez créer un lien vers la ressource C:\my path\my file.html:

  • si vous fournissez un chemin de fichier local uniquement, le navigateur est censé encoder et protéger tous les caractères donnés (dans ce qui précède, vous devez lui donner des espaces comme indiqué, car il %s'agit d'un caractère de nom de fichier valide et en tant que tel, il sera encodé) lors de la conversion vers une URL appropriée (voir le point suivant).
  • si vous fournissez une URL avec le file://protocole, vous déclarez essentiellement que vous avez pris toutes les précautions et encodé ce qui nécessite un encodage, le reste doit être traité comme des caractères spéciaux. Dans l'exemple ci-dessus, vous devez donc fournir file:///c:/my%20path/my%20file.html. En plus de corriger les barres obliques, les clients ne doivent pas encoder de caractères ici.

REMARQUES:

  • Direction de la barre oblique - les barres obliques /sont utilisées dans les URL, les barres obliques inverses \dans les chemins Windows, mais la plupart des clients travailleront avec les deux en les convertissant en barre oblique appropriée.
  • De plus, il y a 3 barres obliques après le nom du protocole, puisque vous faites silencieusement référence à la machine actuelle au lieu d'un hôte distant (le chemin complet non abrégé serait file://localhost/c:/my%20path/my%file.html), mais encore une fois, la plupart des clients fonctionneront sans la partie hôte (c'est-à-dire seulement deux barres obliques) ) en supposant que vous entendez la machine locale et en ajoutant la troisième barre oblique.

1
Hexblot est en fait correct ici. Cela se produit généralement lorsque vous encodez vos URL par programmation et qu'un bot arrive et l'encode une deuxième fois. Les robots ont une mauvaise habitude de faire cela. Il y en a deux où vous pouvez gérer ce problème. 1) Vous pouvez soit 404 ou 401 avec une exception try catch ou vous pouvez écrire une petite fonction qui décodera les valeurs double décodées avant de les transmettre à une autre méthode pour la logique métier.
Ryan Watts

Cela m'a aidé à comprendre pourquoi je l'obtenais lors de l'envoi d'une requête jQuery ajax. J'étais en train de définir l'attribut data dans une requête ajax GET avec la fonction encodeURIComponent sur la valeur, mais jQuery le fait déjà par défaut, d'où la raison pour laquelle j'obtenais% 2520. Vraiment utile merci.
Asher

N'y a-t-il pas un argument de ligne de commande pour que chrome lui indique d'interpréter ou de ne pas interpréter le lien?
AleX_

J'ai http://mysite/test & that... If I use UrlEncode` il change en http://mysite/test%20&%20thatmais je veux aussi le &changer en% 26 ainsi c'est mysite / test% 20% 26% 20qui `Comment puis-je faire ça?
Si8

10

Pour une raison - peut-être valable - l'URL a été encodée deux fois. %25est le %signe urlencodé . L'URL d'origine ressemblait donc à:

http://server.com/my path/

Ensuite, il a été encodé une fois par URL:

http://server.com/my%20path/

et deux fois:

http://server.com/my%2520path/

Vous ne devriez donc pas faire de codage d'URL - dans votre cas - car d'autres composants semblent déjà le faire pour vous. Utilisez simplement un espace


J'ai eu le même problème mais je ne comprends pas pourquoi le codage d'url par défaut a été traité deux fois la première fois.
jungwon jin

Selon la situation, le double codage peut être un résultat parfaitement valide de l'utilisation correcte du codage. Cette réponse peut donner l'impression que le double encodage est toujours faux et que vous pouvez simplement résoudre les problèmes d'encodage en ajoutant autant d'appels d'encodage / désencodage que nécessaire pour «faire fonctionner». C'est faux, et c'est ainsi que les bogues d'encodage apparaissent en premier lieu. -1
Florian Winter du

@FlorianWinter Je ne vois pas vraiment où vous lisez ceci entre les lignes. Peux-tu m'aider? (Veuillez lire la question et ma réponse)
hek2mgl

7

Lorsque vous essayez de visiter un nom de fichier local via le navigateur Firefox, vous devez forcer le file:\\\protocole ( http://en.wikipedia.org/wiki/File_URI_scheme ) ou bien Firefox encodera votre espace DEUX FOIS. Modifiez l'extrait de code HTML de ceci:

<img src="C:\Documents and Settings\screenshots\Image01.png"/>

pour ça:

<img src="file:\\\C:\Documents and Settings\screenshots\Image01.png"/>

ou ca:

<img src="file://C:\Documents and Settings\screenshots\Image01.png"/>

Ensuite, Firefox est informé qu'il s'agit d'un nom de fichier local, et il restitue l'image correctement dans le navigateur, encodant correctement la chaîne une fois.

Lien utile: http://support.mozilla.org/en-US/questions/900466


0

L'extrait de code suivant a résolu mon problème. J'ai pensé que cela pourrait être utile à d'autres.

var strEnc = this.$.txtSearch.value.replace(/\s/g, "-");
strEnc = strEnc.replace(/-/g, " ");

Plutôt en utilisant default, encodeURIComponentma première ligne de code convertit tout spacesen hyphensutilisant un modèle regex /\s\get la ligne suivante fait simplement l'inverse, c'est-à-dire convertit tout hyphensen spacesutilisant un autre regex pattern /-/g. Voici en /gfait responsable de la finding allcorrespondance des caractères.

Lorsque j'envoie cette valeur à mon appel Ajax, elle parcourt comme normal spacesou simplement %20et s'en débarrasse ainsi double-encoding.


1
Je suppose que parce que vous ne résolvez pas le problème, vous le dissimulez simplement - la cause principale est toujours là, et vous faites un double travail (quelque part vous encodez accidentellement deux fois, et ailleurs vous décodez manuellement pour couvrir it up). En supposant que vous vouliez faire les choses "correctement", la meilleure chose serait de déboguer et de trouver le vrai coupable.
Nick Andriopoulos

En fait, la solution a fonctionné pour moi partout où j'ai eu ce problème. Alors j'ai posté.
Subrata Sarkar

2
@NiladriSarkar ce que hexbolt essayait de dire, c'est que même si votre code fonctionne, ce n'est pas une solution viable, mais plutôt une solution sale, et devrait être évitée ...
Voir

-1

Essaye ça?

encodeURIComponent('space word').replace(/%20/g,'+')


1
Bienvenue dans StackOverflow! En général, les réponses sont plus utiles si elles incluent une explication sur les raisons pour lesquelles votre suggestion résoudra le problème de l'OP, plutôt qu'un simple extrait de code. De plus, comme cette question a déjà une réponse acceptée, ce serait une bonne idée d'ajouter des explications pour expliquer pourquoi votre réponse est plus correcte que celle-là.
DaveyDaveDave
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.