Comment échapper correctement les guillemets à l'intérieur des attributs HTML?

267

J'ai une liste déroulante sur une page Web qui se casse lorsque la chaîne de valeur contient un devis.

La valeur est "asd, mais dans le DOM, elle apparaît toujours comme une chaîne vide.

J'ai essayé de toutes les manières possibles d'échapper correctement à la chaîne, mais en vain.

<option value=""asd">test</option>
<option value="\"asd">test</option>
<option value="&quot;asd">test</option>
<option value="&#34;asd">test</option>

Comment puis-je afficher cela sur la page pour que le message de publication contienne la valeur correcte?

html xhtml escaping Chris
la source
Comment générez-vous la page?
SLaks
1
Et si vous utilisez des guillemets simples? <option value = '"asd'> test </option>
Wim ten Brink
5
Je dois souligner qu'aucune de ces réponses ne dit comment échapper correctement les chaînes pour une utilisation à l'intérieur des attributs html
reconbot
4
@reconbot Cela dépend de la façon dont le code HTML a été généré. La question portait sur les citations, donc techniquement la réponse acceptée répond à la question posée. Quant à savoir comment échapper correctement les chaînes, je n'ai pas de lien à portée de main pour le cas général, mais en PHP, vous utiliseriez htmlentities.
Matt Browne
doublon possible de la façon d'avoir des guillemets dans les valeurs d'entrée html
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Réponses:

344

&quot; est la bonne façon, le troisième de vos tests:

<option value="&quot;asd">test</option>

Vous pouvez voir cela fonctionner ci-dessous, ou sur jsFiddle .

alert($("option")[0].value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="&quot;asd">Test</option>
</select>
Développer l'extrait

Vous pouvez également délimiter la valeur d'attribut avec des guillemets simples:

<option value='"asd'>test</option>
Andy E
la source
17
La quatrième option d'OP, & # 34;, est également un moyen valide d'échapper aux guillemets. Il y a un avantage à utiliser des entités html numériques par rapport aux entités nommées, dans la mesure où les entités nommées ne couvrent pas tous les caractères, contrairement aux entités numériques. La liste HTML4 complète se trouve sur w3.org/TR/html4/sgml/entities.html .
ATK
38
@atk: oui, &quot;correspond au même caractère que &#34;, mais il n'y a aucun avantage à utiliser l'option numérique ici car &quot;c'est une entité nommée définie. &quot;est également plus facile à retenir.
Andy E
6
Je suis d'accord. Dans ce cas particulier, il est plus facile d'utiliser & quot ;. Je voulais seulement signaler le cas général.
ATK
4
@SIDU: changez-le en &amp;quot;a(remplacez le &par &amp;)
Andy E
4
^ boucle infinie
Omar Meky
16

Si vous utilisez PHP, essayez d'appeler htmlentitiesou de htmlspecialcharsfonction.

Lukasz Czerwinski
la source
2
les utiliser ne suffit peut-être pas, essayez <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='"); ?>' />- assurez-vous de les utiliser avec ENT_QUOTES, c'est sûr:, <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='", ENT_QUOTES); ?>' /> mais en plus de ENT_QUOTES, vous devez également ajouter ENT_SUBSTITUTE et ENT_DISALLOWED, personnellement, j'utilise ce wrapper depuis des années:function hhb_tohtml(string $str):string { return htmlentities($str, ENT_QUOTES | ENT_HTML401 | ENT_SUBSTITUTE | ENT_DISALLOWED, 'UTF-8', true); }
hanshenrik
12

Selon la syntaxe HTML et même HTML5 , les options suivantes sont toutes valides:

<option value="&quot;asd">test</option>
<option value="&#34;asd">test</option>
<option value='"asd'>test</option>
<option value='&quot;asd'>test</option>
<option value='&#34;asd'>test</option>
<option value=&quot;asd>test</option>
<option value=&#34;asd>test</option>

Notez que si vous utilisez la syntaxe XML, les guillemets (simples ou doubles) sont obligatoires.

Voici un jsfiddle montrant tout ce qui précède .

aij
la source
7

Une autre option consiste à remplacer les guillemets doubles par des guillemets simples si cela ne vous dérange pas. Mais je ne mentionne pas celui-ci:

<option value='"asd'>test</option>

Je mentionne celui-ci:

<option value="'asd">test</option>

Dans mon cas, j'ai utilisé cette solution.

csonuryilmaz
la source
9
Mais si la valeur contient des guillemets simples et doubles, cela échouera
Raptor
@Raptor J'ai dit que si la valeur contient des guillemets doubles, convertissez-les en guillemets simples. Si la valeur contient des guillemets simples, cela ne posera aucun problème.
csonuryilmaz
0

Vous ne devez vraiment autoriser que les données non fiables dans une liste blanche de bons attributs comme: align, alink, alt, bgcolor, border, cellpadding, cellspacing, class, color, cols, colspan, coords, dir, face, height, hspace, ismap, lang , marginheight, marginwidth, multiple, nohref, noresize, noshade, nowrap, ref, rel, rev, rows, rowspan, scrolling, shape, span, summary, tabindex, title, usemap, valign, value, vlink, vspace, width

Vous voulez vraiment garder les données non fiables hors des gestionnaires javascript ainsi que des attributs id ou name (ils peuvent encombrer d'autres éléments dans le DOM).

De plus, si vous placez des données non fiables dans un attribut SRC ou HREF, il s'agit vraiment d'une URL non fiable, vous devez donc valider l'URL, assurez-vous que ce n'est PAS une URL javascript:, puis un codage d'entité HTML.

Plus de détails sur tout cela ici: https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet

Jim Manico
la source
3
Je sais que c'est tard, mais presque tous ces attributs sont dépréciés dans HTML4.01 et supprimés dans 5. Cela n'a peut-être plus d'importance maintenant, car il existe de meilleures façons de se protéger, en le signalant simplement.
trysis
1
La question porte sur les données contenant des guillemets, et non sur les données non fiables.
Quentin
-3

Il n'y a aucun moyen d'échapper les guillemets dans la valeur d'un texte d'entrée ... mais vous pouvez utiliser javascript (ou jquery):

<input type="input" name="myinput" id="myinput" value="" />
<script>document.getElementById("myinput").value="This input has a [\"]";</script>
Miguel
la source
1
Votre déclaration "Il n'y a aucun moyen d'échapper aux guillemets dans la valeur d'un texte saisi" est tout à fait erronée. Voir la réponse acceptée de 2010 qui a reçu 276 votes positifs.
Quentin
Excusez-moi Quentin, mais CETTE RÉPONSE dit que ce n'est pas possible de le faire. Il dit que vous pouvez insérer un guillemet double codé html ou vous pouvez utiliser un guillemet simple pour délimiter un guillemet double, mais ce n'est pas un moyen d'insérer un guillemet double dans la valeur définie avec guillemet double. Il propose une alternative à quelque chose d'impossible, ce qui est le même que ce que je fais
Miguel
La façon d'insérer un guillemet double dans une valeur délimitée par un guillemet double est d' utiliser le codage html comme vous venez de le dire.
Quentin
(Bonjour Quentin ... nous sommes en ligne) Je dis juste que la valeur de cette chaîne n'est pas un guillemet double, c'est un & quot ;, ce n'est pas la même chose.
Miguel
2
Si vous insérez un & quot; dans une valeur et vous l'envoyez, dans le serveur vous recevez 6 caractères, du & au;. Vous ne recevez pas de double devis. Ce n'est pas pareil et ça ne marche pas pour moi
Miguel