jQuery的val()和prop()方法会对值进行HTML转义吗？

Question

我在文档中找不到关于 val() 和 prop() 以及转义的相关内容。

它们是否被设计用于在作为设置器时转义值？

- Matt Fenwick

---

浏览器 jQuery 源代码的好链接 -> http://james.padolsey.com/jquery/ - Manse

Answer 1

不需要。`.val()` 用于设置表单字段的 `value` 属性，因此在那里不需要转义。您将通过 DOM 设置值，因此不像通过字符串拼接构造 HTML。 另一方面，`.prop()` 根本不与属性交互 - 只是 DOM 属性，因此您也不需要担心 HTML 转义它们。

---

编辑：为了澄清，我假设你之所以问这个问题，是因为你担心 `.prop()` 或 `.val()` 成为 XSS 攻击向量（或者只是给自己惹麻烦的机会）？ 如果是这样，您需要记住，通过 DOM 设置属性和属性时，您设置的值基本上是沙盒化到您正在交互的属性或值中。例如，给定以下内容：

<div id="foo"></div>

而且您试图滥用属性值，例如：

$('#foo').attr('rel', '"></div><script>alert("bang");</script><div rel="');

您可能担心这会导致类似以下的结果：

<div id="foo" rel=""></div><script>alert("bang");</script><div rel=""></div>

尽管看起来很恶劣，但这种情况永远不会发生。确实会有一个rel属性，其值为那个恶意字符串，但不会创建任何新的标记或DOM节点。该字符串本身没有被转义 - 它只是被视为一个字符串而已，不会被解释为标记。

- jmar777

---

那么将元素的“value”设置为“evil"string”永远不会引起任何问题吗？ - Matt Fenwick

正确的 - 任何危险都将在您从元素中检索值之后对该值进行操作时的下游发生。这也假定您是通过.val()或其他DOM API支持的方法进行设置的。我刚刚加入了一些澄清说明。 - jmar777

@jmar777对于使用jquery .attr()方法设置图像的src是否也是一样的呢？比如说$("#profile_pic").attr('src', profile_image); 我需要担心编码变量profile_image吗？当我尝试使用ESAPI encodeForHTMLAttribute()进行编码时它并不起作用，所以我猜我不需要担心？谢谢。 - Sarah

@Sarah，你说得对，这里不需要编码。分配给src属性的值不会被解释为标记。 - jmar777

@jmar777 谢谢。还有一个相关的问题。如果我不使用jquery .attr()，而是通过字符串拼接准备img html，并按如下方式插入图像url：'<img src="' + image_src + '"/>' ....？显然，您可以使用某些特殊字符“退出”属性。那么我应该使用encodeForHTMLAttribute()吗？谢谢。 - Sarah

@Sarah 很抱歉回复晚了，但是是的，通过字符串拼接生成HTML时一定要非常小心！如果不注意编码，那绝对是XSS攻击向量。我不熟悉encodeForHTMLAttribute()（看起来像是ColdFusion实用程序？），但我建议在这里进一步阅读该主题：https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet#RULE_.232_-_Attribute_Escape_Before_Inserting_Untrusted_Data_into_HTML_Common_Attributes - jmar777

Answer 2

他们期望的是字符串，而不是HTML。你不需要转义任何内容。

这些方法本身也不会进行任何转义，它们使用的底层DOM API也处理字符串，而不是HTML。

一旦开始使用JavaScript，你几乎永远不需要担心HTML语法，唯一的例外是处理innerHTML属性时，它明确地处理DOM与HTML之间的序列化和反序列化。

- Quentin

---

值得澄清的是，底层的DOM API也没有真正转义任何内容。当您设置属性和属性值时，您不会创建新的标记或DOM节点或任何类似的内容，因此转义不是什么问题。 - jmar777

@Quentin。对于使用jquery .attr()方法设置图像的src属性，情况是否相同？例如$("#profile_pic").attr('src', profile_image); 我需要担心编码变量profile_image吗？当我尝试使用ESAPI encodeForHTMLAttribute()进行编码时，它无法正常工作，所以我猜我不需要？谢谢。 - Sarah

Answer 3

我只想补充一点，当在具有可能导致代码执行的副作用的属性中插入值时，确实需要担心。这些包括可用于xss的图像src属性。请参见：https://www.owasp.org/index.php/Script_in_IMG_tags

- Guy L.