不要在js里直接用innerhtml输出未经js过滤的用户内容,
即使这些内容已经经过服务器端php的htmlspecialchars或者htmlpurifier过滤.
比如下面的代码,页面将alert弹出字符串/xss/,因为js会把变量中的unicode字符\u003c和\u003e转换成输出.
//
$xss = '\u003cimg src=1 onerror=alert(/xss/)\u003e';
//xss
$xss = '\u003ca href=javascript:alert(string.fromcharcode(88,83,83))\u003exss\u003c/a\u003e';
header('content-type: text/html;charset=utf-8');
?>
<script> <br /> // php的htmlspecialchars不能过滤\u003c和\u003e,经过js赋值后,unicode字符\u003c和\u003e被转换成<和>. <br /> var xss = '<?php echo htmlspecialchars($xss, ent_quotes, 'utf-8'); ?>'; <br /> console.log(xss); <br /> //$("#xss").html(xss); //能够执行alert(/xss/) document.getelementbyid("xss").innerhtml = xss; <br /> //$("#xss").html(xss.replace(/, "<").replace(/>/g, ">")); //不能执行alert(/xss/) <br /> //$("#xss").text(xss); //不能执行alert(/xss/) document.getelementbyid("xss").innertext = xss; <br /> </script>
$(#xss).append(xss)跟$("#xss").html(xss)输出的都是html.
解决方法:
http://segmentfault.com/q/1010000004067521
你说的对,毕竟很多时候要把ajax加载的数据用innerhtml添加到页面.
值得注意的是,innerhtml本质也是输出html,
所以我们可以在输出前用js像php的htmlspecialchars那样
把特殊字符(&,",',)替换为html实体(&"'<>).
或者干脆直接用innertext(ie)和textcontent(firefox),也就是jquery的text()来输出文本内容.
firefox不支持ie的innertext,但支持textcontent.
stackoverflow上找到的两个实现:
function htmlspecialchars(str) {
return str
.replace(/&/g, "&")
.replace(/, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
function htmlspecialchars(str) {
var map = {
'&': '&',
' '>': '>',
'"': '"',
"'": '''
};
return str.replace(/[&"']/g, function(k) { return map[k]; });
}
其中g表示全局(global)替换的意思,也就是把字符串中的所有匹配的内容都进行替换.
不过js模仿php的htmlspecialchars是一刀切的方法,数据将丧失html特性. 请教下,对于前端ajax(pjax)过来后的html数据大家是怎么过滤xss输出的呢?