如何正确转义 HTML 属性中的引号？答案

【问题标题】：How do I properly escape quotes inside HTML attributes?如何正确转义 HTML 属性中的引号？
【发布时间】：2011-04-30 05:51:07
【问题描述】：

当值字符串包含引号时，我在网页上有一个下拉菜单。

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

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

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

如何在页面上呈现它，以便回发消息包含正确的值？

【问题讨论】：

你是如何生成页面的？
如果使用单引号会怎样？
我必须指出，这些答案都没有说明如何正确转义字符串以在 html 属性中使用
@reconbot 这将取决于 HTML 的生成方式。这个问题是关于引号的，所以从技术上讲，接受的答案回答了所提出的问题。至于如何正确转义字符串，对于一般情况，我没有方便的链接，但在 PHP 中你会使用 htmlentities。
how to have quotation marks in html input values 的可能重复项

标签： html xhtml escaping

【解决方案1】：

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

【讨论】：

OP 的第四个选项 " 也是转义引号的有效方法。使用数字 html 实体而不是命名实体有一个好处，因为命名实体不会覆盖所有字符，而数字实体可以。完整的 HTML4 列表位于 w3.org/TR/html4/sgml/entities.html。
@atk: 是的，&quot; 映射到与&#34; 相同的字符，但是在这里使用数字选项没有任何好处，因为&quot; 是一个已定义的命名实体。 &quot; 也更容易记住。
我同意。在这种特殊情况下，使用“.我只是想指出一般情况。
@SIDU：将其更改为&amp;quot;a（将&amp;替换为&amp;）
^ 无限循环

【解决方案2】：

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

【讨论】：

仅使用它们可能还不够，尝试<option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='"); ?>' /> - 确保将其与 ENT_QUOTES 一起使用，这是安全的：<option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='", ENT_QUOTES); ?>' />，但除了 ENT_QUOTES，您还应该添加 ENT_SUBSTITUTE 和 ENT_DISALLOWED，我个人多年来一直使用这个包装器：function hhb_tohtml(string $str):string { return htmlentities($str, ENT_QUOTES | ENT_HTML401 | ENT_SUBSTITUTE | ENT_DISALLOWED, 'UTF-8', true); }

【解决方案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.

【讨论】：

【解决方案4】：

如果您不介意的话，另一种选择是用单引号替换双引号。但我不提这个：

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

我提到这个：

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

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

【讨论】：

但是如果值包含单引号和双引号，这将失败
@Raptor 我说如果值包含双引号，请将它们转换为单引号。如果值中包含单引号，则没有问题。

【解决方案5】：

如果您使用 JavaScript 和 Lodash，则可以使用 _.escape()，它会转义 "、'、<、> 和 &。

【讨论】：

【解决方案6】：

您确实应该只允许不受信任的数据进入良好属性的白名单，例如：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，行，行跨度，滚动，形状，跨度，摘要，tabindex，标题，usemap，valign，值，vlink，vspace，宽度

您确实希望将不受信任的数据排除在 javascript 处理程序以及 id 或 name 属性之外（它们可能会破坏 DOM 中的其他元素）。

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

这里有更多详细信息：https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet

【讨论】：

我知道这已经很晚了，但几乎所有这些属性在 HTML4.01 中都已弃用并在 5 中删除。无论如何现在可能无关紧要，因为有更好的方法来保护自己，只需指出它出来。
问题是询问带有引号字符的数据，而不是不可信的数据。