如何正确转义html属性中的引号？

Question

我在网页上有一个下拉列表，当值字符串包含引号时，它会断开。

值为"asd但在DOM中始终显示为空字符串。

我已经尝试过各种我认识的方法来正确地逃避弦乐但无济于事。

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

知道如何在页面上呈现这一点，以便回发消息包含正确的值吗？

Answer 1

"是正确的方法，第三个测试：

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

您可以在下面或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>

或者，您可以使用单引号分隔属性值：

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

Answer 2

如果您使用的是PHP，请尝试调用htmlentities或htmlspecialchars函数。

Answer 3

根据HTML syntax，甚至HTML5，以下都是有效选项：

<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>

请注意，如果您使用的是XML syntax，则需要引号（单引号或双引号）。

Here's a jsfiddle showing all of the above working。

Answer 4

另一个选择是用单引号替换双引号，如果你不介意它是什么。但我没有提到这个：

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

我提到这个：

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

就我而言，我使用了这个解决方案。

Answer 5

你真的应该只允许不受信任的数据进入良好属性的白名单，例如：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

你真的想要从javascript处理程序以及id或name属性中保留不受信任的数据（它们可以破坏DOM中的其他元素）。

此外，如果您将不受信任的数据放入SRC或HREF属性，那么它实际上是一个不受信任的URL，因此您应该验证URL，确保它不是javascript：URL，然后是HTML实体编码。

关于这里所有的更多细节：https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet

Answer 6

无法在输入文本的值中转义引号...但您可以使用javascript（或jquery）：

<input type="input" name="myinput" id="myinput" value="" />
<script>document.getElementById("myinput").value="This input has a [\"]";</script>