如何正确地转义HTML属性内的引号?

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

值是"asd，但在DOM中它总是显示为空字符串。

我已经尝试了我所知道的所有方法来正确地转义字符串，但都无济于事。

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

我如何在页面上呈现这个，以便回发消息包含正确的值?

296180 次浏览
小开
最佳答案

&quot;是正确的方法，你的第三个测试:

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

你真的应该只允许不可信的数据进入一个好的属性白名单，如:align, alink, alt, bgcolor, border, cellpadding, cellspacing, class, color, cols, colspan, cods, 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

小开

另一个选择是用单引号代替双引号，如果你不介意的话。但我没有提到这个:

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

我提到了这个:

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

在我的例子中，我使用了这个解决方案。

小开

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

小开

对于HTML语法，甚至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语法，引号(单引号或双引号)是必需的。

下面是一个jsfiddle演示了上述所有工作。

小开

如果你正在使用JavaScript和Lodash，那么你可以使用_.escape ()，它转义了"， '， <， >和&。


提交答案