web-dev-qa-db-fra.com

Comment échapper correctement aux guillemets dans les attributs HTML?

J'ai un menu déroulant sur une page Web qui se brise lorsque la chaîne de valeur contient un guillemet.

La valeur est "asd, mais dans le DOM, elle apparaît toujours sous la forme d'une chaîne vide.

J'ai essayé par tous les moyens que je connais 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 rendre ceci sur la page afin que le message de publication contienne la valeur correcte?

htmlxhtmlescaping
231
Chris

&quot; est le bon moyen, 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>

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

<option value='"asd'>test</option>
310
Andy E

Si vous utilisez PHP, essayez d’appeler la fonction htmlentities ou htmlspecialchars .

14
Lukasz Czerwinski

Par 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 syntaxe XML , les guillemets (simples ou doubles) sont obligatoires.

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

9
aij

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.

7
csonuryilmaz

Vous ne devriez autoriser que les données non fiables dans une liste blanche de bons attributs tels que: aligner, alink, alt, bgcolor, bordure, cellpadding, cellpacing, classe, couleur, cols, colspan, coords, dir, face, hauteur, hspace, ismap, lang marginheight, marginwidth, multiple, nohref, noresize, noshade, nowrap, ref, rel, rev, rangs, rowspan, défilement, forme, étendue, récapitulatif, tabindex, titre, usemap, valign, valeur, vlink, vspace, largeur

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

De même, si vous insérez des données non fiables dans un attribut SRC ou HREF, il s'agit en réalité d'une URL non fiable. Vous devez donc valider l'URL, assurez-vous qu'il N'EST PAS une javascript: URL, puis un encodage d'entité HTML.

Plus de détails sur tous les éléments ici: https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet

0
Jim Manico