HTML的大量DOM操作和防XSS

2016-09-04

DOM操作

在好多百度的答案里，如果要对DOM进行操作，都是直接append，然后拼接出来HTML字符串

$("body")
    .append(
        '<div id="iamloading__box" data-load="load">'
        + '<div id="iamloading__box_center"><img id = "loading-image" src= ""></div>'
        + '</div>'
    );

这就会产生一个问题 好多XSS都是这么产生的

使用JQuery防止XSS

为了防止XSS，而且拼接HTML字符串是在是太无语了，感觉笨笨的 JQuery 1.4 可以通过函数拼接HMTL标签并且防止XSS

这个函数是 jQuery( html, attributes ) 在1.4之后加入JQuery

1	$("<div>",{id:"point",class:"blank"}).appendTo($dom)

这样就会产生一个

1	<div id="point" class="blank"></div>

的DOM节点，并且使用appendTo被拼接到某个dom后边，即使在class里故意填入XSS代码，也会被Escape成内容防止XSS产生

1
2
3

var xss = '<script>alert("xss")</script>'
var attr = {class:xss}
$('<option>',attr).appendTo($dom)

大量DOM操作

虽然使用JQuery可以防止XSS，但是如果遇见大面积的DOM操作，还是比较麻烦的，特别是在Table里循环接收tr的时。不仅可读性差，而且不好操作。

前端的大量DOM操作一直都是一个比较纠结的问题，我查了一些解决方案，AngularJS，React等等，都感觉太复杂了，而且文件都比较大，其实React是一个比较好的方案，毕竟是Facebook的看家本领，但是学习曲线又太高，最后我发现了一个叫Riot的库，它专门批判了一翻React来表扬自己，确实挺好用的，功能比较简单，而且兼容其它的前端库

具体方案可以参考[Riot API][]或者我的简单教程。