如何正确地在HTML属性中转义引号？

267

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

值为"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 xhtml escaping

— 克里斯
source

您如何生成页面？

— SLaks 2010年

1

如果使用单引号怎么办？<option value =“'asd'> test </ option>

— Wim 10 Brink

5

我必须指出这些答案中没有一个说过如何正确地在html属性中使用转义字符串

— reconbot

4

@reconbot这将取决于HTML的生成方式。问题是关于引号的，因此从技术上讲，公认的答案可以回答所提出的问题。至于如何正确地转义字符串，对于一般情况，我没有可用的链接，但是在PHP中，您可以使用htmlentities。

— 马特·布朗

html输入值

— Ciro Santilli郝海东冠状病六四事件法轮功

343

" 是正确的方法，这是您的第三项测试：

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

— 安迪
source

17

OP的第四个选项＆＃34;也是转义引号的有效方法。与命名实体相比，使用数字html实体有一个好处，因为命名实体不会覆盖所有字符，而数字实体却可以覆盖所有字符。完整的HTML4列表位于w3.org/TR/html4/sgml/entities.html。

— atk 2010年

38

@atk：是的，与"映射到相同的字符"，但是在此处使用数字选项没有任何好处，因为它"是已定义的命名实体。 "也更容易记住。

— Andy E 2010年

6

我同意。在这种特定情况下，使用会更容易。我只想指出一般情况。

— atk 2010年

4

@SIDU：它改变&quot;a（替换&用&）

— 安迪·ê

4

^无限循环

— Omar Meky

16

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

— 卢卡斯·切尔温斯基（Lukasz Czerwinski）
source

2

仅仅使用它们可能还不够，请尝试<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); }

— hanshenrik

12

根据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。

— 爱
source

7

另一个选择是如果您不介意用双引号替换单引号。但是我没有提到这一点：

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

我提到这一点：

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

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

— csonuryilmaz
source

9

但是，如果值包含单引号和双引号，则将失败

— Raptor

@Raptor我说过，如果该值包含双引号，请将其转换为单引号。如果该值包含单引号，则不会有问题。

— csonuryilmaz

1

如果您使用的是Javascript和Lodash，则可以使用_.escape（），以转义“，”，<，>和＆。

看到这里：https : //lodash.com/docs/#escape

— 安德鲁
source

0

您实际上只应将不受信任的数据放入具有良好属性的白名单中，例如：align，alink，alt，bgcolor，border，cellpadding，cellspacing，class，color，cols，colspan，coords，dir，face，height，hspace，ismap，lang ，marginheight，marginwidth，多个，nohref，noresize，noshade，nowrap，ref，rel，rev，行，rowpan，滚动，形状，跨度，摘要，tabindex，标题，usemap，valign，值，vlink，vspace，宽度

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

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

有关此处所有内容的更多详细信息，请访问：https : //www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet

— 吉姆·马尼科
source

3

我知道这很晚了，但是几乎所有这些属性在HTML4.01中都已弃用，而在5中已删除。现在无论如何都可能没关系，因为有更好的方法来保护自己，只需要指出来即可。

— trysis 2014年

1

问题是问的是带有引号的数据，而不是不信任的数据。

— 昆汀

-3

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

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

— 米格尔
source

1

您的陈述“无法在输入文本的值中转义引号”是完全错误的。请参阅2010年已接受的，获得276张赞成票的答案。

— 昆汀

请问昆汀，但是那回答说那没办法。它说您可以插入html编码的双引号，也可以使用简单的引号分隔双引号，但是无法将双引号插入到用双引号定义的值中。它提出了替代不可能的事情的替代方案，这与我所做的相同

— Miguel

将双引号插入由双引号分隔的值中的方法是使用html编码，正如您刚才所说的。

— 昆汀'18

（您好Quentin ...我们在线）我只是说那个字符串的值不是双引号，而是一个“，”是不一样的。

— Miguel

2

如果您插入＆；输入一个值，然后在服务器中从＆到;接收6个字符。您不会收到双引号。这是不一样的，对我也不起作用

— Miguel