html（）vs innerHTML jquery / javascript& XSS攻击 [英] html() vs innerHTML jquery/javascript & XSS attacks
问题描述
我正在测试自己的代码中的xss攻击。下面的例子是一个简单的框，用户可以输入任何他想要的内容。按下测试！后按钮，JS会将输入字符串显示为两个div。这是我用来解释更好的问题的一个示例：
< HTML>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script>
< script type =text / javascript>
函数testIt（）{
var input = document.getElementById（'input-test'）。value;
var testHtml = document.getElementById（'test-html'）;
var testInnerHTML = document.getElementById（'test-innerHTML'）;
$（testHtml）.html（input）;
testInnerHTML.innerHTML = input;
}
< / script>
< head>这是一项测试< / head>
< body>
< input id =input-testtype =textname =foo/>
< input type =buttononClick =testIt（）;值= 测试！/>
< div id =test-html>
< / div>
< div id =test-innerHTML>
< / div>
< / body>
如果您尝试复制它到.html文件并运行它，它会正常工作，但如果您尝试输入< script> alert（'xss'）< / script> ，一个警告框将被抛出：`test-html'div（带有html（）函数）中的一个。
我真的不明白为什么会发生这种情况，而且，使用萤火虫检查代码会给我这个结果（在注入脚本之后）
< body>
这是一个测试
< input id =input-testtype =textname =foo>
< input type =buttonvalue =test！的onclick = 调用testIt（）; >
< div id =test-html> < / DIV>
< div id =test-innerHTML>
< script>
alert（'xss'）
< / script>
< / div>
< / body>
您可以看到 test-html div是空的，并且 test-innerhtml div包含脚本。有人能告诉我为什么吗？是因为html（）对脚本注入或类似的东西更安全吗？
在此先感谢，最好的问候。
要查看jquery为什么将其删除的解释，可以在这里看到John Resig的回复： https://forum.jquery.com/topic/jquery-dommanip-script-tag-will-be-removed
希望这可以帮助
I'm testing xss attacks on my own code. The example beneath is a simple box where an user can type whatever he wants. After pressing "test!" button, JS will show the input string into two divs.This is an example I made to explain better my question:
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function testIt(){
var input = document.getElementById('input-test').value;
var testHtml = document.getElementById('test-html');
var testInnerHTML = document.getElementById('test-innerHTML');
$(testHtml).html(input);
testInnerHTML.innerHTML = input;
}
</script>
<head>this is a test</head>
<body>
<input id="input-test" type="text" name="foo" />
<input type="button" onClick="testIt();" value="test!"/>
<div id="test-html">
</div>
<div id="test-innerHTML">
</div>
</body>
if you try to copy it into a .html file and run it, it will work fine, but if you try to input <script>alert('xss')</script>, only one alert box will be thrown: the one inside `test-html' div (with html() function).
I really can't understand why this is happening, and also, inspecting the code with firebug gives me this result (after injecting the script)
<body>
this is a test
<input id="input-test" type="text" name="foo">
<input type="button" value="test!" onclick="testIt();">
<div id="test-html"> </div>
<div id="test-innerHTML">
<script>
alert('xss')
</script>
</div>
</body>
as you can see test-html div is empty, and test-innerhtml div contans the script. Can someone tell me why? Is because html() is more secure against scripts injection or something similar?
Thanks in advance, best regards.
JQuery strips out the script tags, which is why you aren't seeing it append to the dom let alone executing.
To see an explanation of why jquery strips it out, you can see John Resig's reply here: https://forum.jquery.com/topic/jquery-dommanip-script-tag-will-be-removed
Hope this helps
这篇关于html（）vs innerHTML jquery / javascript& XSS攻击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
