打造一个自动检测页面是否存在XSS的插件（完结篇）

浓郁的风信子

0×01： 当form存在多个img时，会获取第一个，无法遍历下面的img

这个是“form表单检测XSS”功能的bug。是一个基友“温瞳”提出来的。我看了下代码，确实出现了这个问题。因为在第三章搭建测试环境那一小节的时候，我所测试的环境只存在一个img图片，并没有考虑到form表单出现多个图片的问题，这个bug会造成什么危害呢。就是当form表单的一个img是php结尾，但是第二个img是以png结尾，这将导致本次form直接丢掉，不再进行判断筛选。如果一个是png结尾，第二个是php结尾，那程序还会继续向下执行，占用空间也占用时间。

我们来看下代码：

A1.png

问题就出现这一行formImg = $(index).find("img").attr("src");
因为在jquery里，attr会自动获取第一个DOM的src属性，即使前面是多个DOM。

在这里我重构了tureForm变量。

原本的代码就可以删除了，也就是下面的代码：

A2.png

接下来就要走向重构之路了。

104行代码没有变，还是：

tureForm = $("form").filter(function(item,index){#code...})
首先我们先新建一个变量，用于储存img标签里src属性值的后缀。

var imgArray = [];
接下来就是把当前的img标签储存到imgArray里。这里使用了map函数，用来循环对象里的每一个键值。

$(index).find("img").map(function(number,imgSrc){
    #code...
});
还记得我在第三章说的，当every、filter、forEach、map、some这些函数的处理对象时Object对象，而不是Array数组时，传入函数里的第一个函数和第二个函数会调换么？这里的$(index).find("img")就是一个对象，所以在传个处理函数的时候，使用的是number,imgSrc。如果是数组的话，就是imgSrc,number顺序了。切记，顺序不能搞乱。

然后就是把src值压入imgArray数组：

imgArray.push($(imgSrc).attr("src"));
OK,让我们看下现在的返回值吧。

A3.png



A4.png

OK，现在已经压入数组了。接下来就是判断imgArray的长度是否大于0了，如果大于0，说明当前的form表单存在img图片。如果不大于0则不存在img图片。

if(imgArray.length > 0){
    #存在img图片所运行的code...
}else{
    #不存在img图片所运行的code...
}
现在我们先写当存在img图片时运行的代码。

先对imgArray循环：

for(i = 0;i < imgArray.length;i++){
     #code...
}
然后就是截取src地址，只保留后缀了

if(imgArray.indexOf("?") != "-1"){
    imgArray = imgArray.slice(0,imgArray.indexOf("?"));
}
formImg = formImg.substr(formImg.lastIndexOf("."),formImg.length);
这段代码和之前的代码除了变量名不一样，其他地方都是一样的。把formImg变量改为imgArray就行了。

接下来就是判断后缀了。

if((imgArray != ".png")&&(imgArray != ".jpg")&&(imgArray != ".jpeg")&&(imgArray != ".gif")){
    return false;
}else{
    return ($(index).prepend().find(":input:not(:submit)").length > 0);
}
当当前的form表单存在img标签，而且后缀不为png、jpg、jpeg、gif时就返回false，也就是说当前的form表单被丢弃了。如果后缀符合png、jpg、jpeg、gif其中一个。则再进行判断，当前form表单除了type=submit之外所有的input标签的长度是否大于0，

($(index).find(":input:not(:submit)").length > 0)这段代码的字符、效率都比原来好很多。原来的代码是：

$(index).find(":submit").length > 0 && ($(index).find(":text").length > 0 || $(index).find(":password").length || $(index).find(":radio").length > 0 || $(index).find(":checkbox").length > 0)
显而易见。这次的代码比原来的代码好很多。而且比原来的代码准确率也高了很多。

因为index是当前的form表单DOM，我们使用find函数搜索当前form表单下符合选择器条件的DOM，find(":input:not(:submit)")意思就是说检索当前form表单里所有的input标签，并且除了type为submit的input标签。

OK，现在这个bug已经完全修复了。下面是完整的代码：

tureForm = $("form").filter(function(item,index){
    var imgArray = [];
    $(index).find("img").map(function(number,imgSrc){
        imgArray.push($(imgSrc).attr("src"));
    });
    if(imgArray.length > 0){
        for(i = 0;i < imgArray.length;i++){
            if(imgArray.indexOf("?") != "-1"){
                imgArray = imgArray.slice(0,imgArray.indexOf("?"));
            }
            imgArray = imgArray.substr(imgArray.lastIndexOf("."),imgArray.length);
            if((imgArray != ".png")&&(imgArray != ".jpg")&&(imgArray != ".jpeg")&&(imgArray != ".gif")){
                return false;
            }else{
                return ($(index).find(":input:not(:submit)").length > 0);
            }
        }
    }else{
        return ($(index).find(":input:not(:submit)").length > 0);
    }
})
其他地方不需要再改动了。

0×02：在第一次筛选后，只能获取第一个input的name值

这个bug是我在实际操作中遇到的。接下来就来说说这个bug是多么可恶又是怎么死亡的吧。

这段代码出现在第121行（未修改版本，修改上一个bug后，行数在128行）

让我们看看这段代码长什么样子吧：

tureForm = $(tureForm).filter(function(item,index){
    return (!!$(index).find(":input").attr("name"));
})
和上一个bug的情况是一样的。都是因为attr会自动获取第一个DOM的name属性。

让我们先来看看这段代码导致危害性吧。

如果当前页面有一个form表单是下面这样的：

<form method="post">
    <input type="text">
    <input type="text" name="xss">
    <input type="submit">
</form>
那上面这个存在bug的代码，会直接把这个form表单丢弃，而不再做任何的操作与判断。准确性将大大降低。甚至比一个0×01节的bug还要严重的多。

为什么会这个form表单会被直接丢弃呢，我们来深入的了解下。

因为这一个form没有img，也存在除submit之外其他的input的标签。符合第一次筛选。于是这个form表单成功的进入到了第二个筛选代码处。Filter代码我就不解释了，之前有解释过。我们直接来看return代码：

$(index).find(":input").attr("name")
这里的index就是这个form表单，等价于$("form").find(":input").attr("name");
我们来看下。实际的输出：

AA.png

我们可以看到返回undefined，也就是没有获取到。接下来就是修改这段代码了。

tureForm = $(tureForm).filter(function(item,index){})不变。

先定义一个变量，用来储存input标签里的name属性值：

var inputName = $(index).find(":input:not(:submit)");
以上面的form标签为例，这段代码会返回：

<input type="text">
<input type="text" name="xss">
这两个input标签。然后使用for循环inputName变量。

for(i = 0;i < inputName.length;i++){
    #code...
}
我们先来看看现在的输出：

A5.png

A6.png

接下来就是if判断当前的input是否存在name属性值了。

if(inputName.getAttribute("name")){
    return true;
})
               

getAttribute函数是JavaScript原生的方法。和jquery里的attr 函数效果是一样的。如果没有找到name值，那么会隐性返回undefined，而undefined在if里代表的是false。

因为外部函数使用的filter，所以我们只需要返回true就可以了。

上面这个if 是为了让大家了解的。之前也说过return也可以当做if来使用。在实际上可以使用下面的代码：

return (inputName.getAttribute("name"));
效果是一样的。完整的代码如下：

tureForm = $(tureForm).filter(function(item,index){
    var inputName = $(index).find(":input:not(:submit)");
    for(i = 0;i < inputName.length;i++){
            return (inputName.getAttribute("name"));
    }
})
0×03：添加白名单

这个是在FreeBuf评论区的“冰海”提出来的建议。这个功能也确实应该补上。

因为之前的代码是在window全局里。无法使用return false;(return只能在function函数里使用)来阻止代码向下执行。

而“白名单”就是需要先判断，当当前域名在“白名单”列表里，就不再向下执行。这点在window全局里是无法使用return false;实现的。那就只用使用类似：

throw new Error('xxxx');
这种直接抛出错误，来让浏览器不再向下执行的hack方法了。以为你文章是面对新手，我就不使用这种hack方法了。

先在之前写JavaScript代码外部，添加匿名函数：

(function(){
     #之前写的JavaScript代码
})()；
如下：

A7.png

先新建一个变量urlWhiteList，用于存储URL白名单地址。

var urlWhiteList = ['baidu.com','360.cn','google.com'];
默认白名单是baidu.com、360.cn、google.cn。

下面就是for循环这个数组了。

for(var i = 0;i < urlWhiteList.length;i++){
    #code...
}
OK了后，就是if判断当前域名是否存在白名单里:

if(urlWhiteList.indexOf(host) != "-1"){
    return false;
}
这里为什么要使用indexOf，而不使用if(urlWhiteList == host)呢。

因为这样的话，可以使白名单里的域名，无论二级域名还是三级域名，都可以存在白名单，而不用每一个二级域名、三级域名都要添加到白名单里。当然如果你不想使用这个方法，可以使用我上面说的代码：

if(urlWhiteList == host)替换掉if(urlWhiteList.indexOf(host) != "-1")，就行了。完整代码如下：
var urlWhiteList = ['baidu.com','360.cn','google.com','xss.cn'];
for(var i = 0;i < urlWhiteList.length;i++){
    if(urlWhiteList.indexOf(host) != "-1"){
        return false;
    }
}
因为maxthon(遨游浏览器)没有提供储存用户输入的api接口，所以没有办法像chrome那样直接一个html+input添加。而chrome插件开发我还没有深入了解过他的API接口。所以想要添加白名单，大伙可以把插件下载到本地。解压后，打开base.js。Ctrl+F搜索urlWhiteList关键字，在数组后面添加白名单就行了。添加之后，打包按照就OK了。

Maxthon方法，打开http://bbs.maxthon.cn/forum.php?mod=viewthread&tid=611580

下载 mx-插件系统.zip ，里面的MxPacker可以解压、打包插件。

Chrome方法，请自行百度查询。

其他小修改：

在“form_Xss()”（form表单检测XSS）功能反馈处。直接在input标签里添加value值:

之前是

alert("当前页面action为" + actionUrl + "的form表单第" + xss + "个input存在XSS漏洞");
这个方法不咋样，很不直观。于是我在之前加上了使边框颜色变成红色：

$(tureForm).find("input").eq(xss - 1).css("border"," 3px solid red");
但是还是不怎么直观，于是我就添加了一段代码，使value值改变。代码如下：

$(tureForm).find("input").eq(xss - 1).css("border"," 3px solid red")
                                        .val("此输入框存在XSS ");
A8.png

下面是实际页面的反馈：

A9.png

怎么样，是不是比之前更加直观了呢。

其他问题与解答：

Q：有些img的src地址是乱写的。程序能准确的判别出来么？

A：可以的，在这里我们先假设下，当前的网页form表单里存在这样一段img标签代码：

<img src="testtesttest" alt="" />
在0×01节的重构代码中，有这样一段：代码

imgArray = imgArray.substr(imgArray.lastIndexOf("."),imgArray.length);
如果src等于testtesttest，那imgArray就等于testtesttest字符串了。我们现在再来看下，进一步的代码：

"testtesttest".substr("testtesttest".lastIndexOf("."),"testtesttest".length);
反馈如下：

AB.png

为什么会这样呢，因为lastIndexOf搜索不到字符串的时候，会返回-1，而"testtesttest".length又是testtesttest字符串的长度，subsyr是截取。导致返回testtesttest字符串的最后一个字符t。而在下面的代码里。是判断是否为png、jpg、jphe、gif：

if((imgArray != ".png")&&(imgArray != ".jpg")&&(imgArray != ".jpeg")&&(imgArray != ".gif")){
    return false;
}else{
    return ($(index).find(":input:not(:submit)").length > 0);
}
显然不是了，那么当的form表单就直接运行else里的代码了。

完整代码：

(function(){
    var onlyString = 'woainixss<>"';
    var protocol = window.location.protocol;
    var host = window.location.host;
    var href = window.location.href;
    var hostPath;
    var urlPath;
    var urlWhiteList = ['baidu.com','360.cn','google.com'];
    for(var i = 0;i < urlWhiteList.length;i++){
        if(urlWhiteList.indexOf(host) != "-1"){
            return false;
        }
    }
    if(href.indexOf("?") != "-1"){
        hostPath = href.slice(0,href.indexOf("?"));
    }else{
        hostPath = href;
    }
    urlPath = hostPath.split("/").splice(3);
    if(location.search != ""){
        parameter_Xss();
    }
    if(href.split("/")[3] != ""){
        pseudoStatic_Xss();
    }
    if($("form").length > 0){
        form_Xss();
    }
    function parameter_Xss(){ //URL参数检测XSS
        var i;
        var parameter = location.search.substring(1).split("&");
        var url = protocol + "//" + host + "/" + urlPath.join("/") + "?";
        for(i = 0;i < parameter.length;i++){
            var parameterData = parameter;
            parameter = parameter.split("=")[0] + "=" + parameter.split("=")[1] + onlyString;
            $.ajax({
                url: url + parameter.join("&"),
                type: 'get',
                dataType: 'text',
                async:false,
            })
            .done(function(data) {
                if(data.indexOf(parameter.split("=")[1]) != "-1"){
                    alert("当前URL参数" +  parameter.split("=")[0] + "存在XSS漏洞");
                    // $("body").append("<img src='http://xss.cn/getXSS.html?host=$" + host + "&$xss=$" + parameter.split("=")[0] + "&$url=$" + window.location.href + "&$rand=$" + Date.parse(new Date()) + "' style='display:none;'>");
                }
            })
            parameter = parameterData;
        }
    }
    function pseudoStatic_Xss(){    //伪静态检测XSS
        var fileURL;
        var fileUrlXss;
        var url;
        var xss = "";
        if(urlPath[urlPath.length-1].indexOf(".") != "-1"){
            fileURL = urlPath.pop();
            fileUrlXss = fileURL.split(".")[0] + onlyString + "." + fileURL.split(".")[1]
            $.ajax({
                url: protocol + "//" + host + "/" + urlPath.join("/") + "/" + fileUrlXss,
                type: 'get',
                dataType: 'text',
                async:false,
            })
            .done(function(data) {
                if(data.indexOf(fileUrlXss) != "-1"){
                    xss += fileURL + "|";
                }
            })
        }else{
            fileURL = "";
            if(urlPath[urlPath.length-1] == ""){
                urlPath.pop();
            }
        }
        for(var i = 0;i < urlPath.length;i++){
            urlPath += onlyString;
            url = protocol + "//" + host + "/" + urlPath.join("/") + "/" + fileURL;
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'text',
                async:false,
            })
            .done(function(data){
                if(data.indexOf(urlPath) != "-1"){
                    xss += urlPath.substring(0,urlPath.length-11) + "|";
                }
            })
            urlPath = urlPath.substring(0,urlPath.length-11);
        }
        if(xss == ""){
            return false;
        }else{
            xss = xss.substring(0,xss.length-1);
            alert("当前伪静态路径或者文件" + xss + "存在XSS漏洞");
            // $("body").append("<img src='http://xss.cn/getXSS.html?host=$" + host + "&$xss=$" + xss + "&$url=$" + window.location.href + "&$rand=$" + Date.parse(new Date()) + "' style='display:none;'>");
        }
    }
    function form_Xss(){ //form表单检测XSS
        var tureForm;
        var tureInput;
        var formImg;
        var actionUrl;
        var methodType;
        var sendData = "";
        var sendDataUrl;
        var i;
        var j;
        tureForm = $("form").filter(function(item,index){
            var imgArray = [];
            $(index).find("img").map(function(number,imgSrc){
                imgArray.push($(imgSrc).attr("src"));
            });
            if(imgArray.length > 0){
                for(i = 0;i < imgArray.length;i++){
                    if(imgArray.indexOf("?") != "-1"){
                        imgArray = imgArray.slice(0,imgArray.indexOf("?"));
                    }
                    imgArray = imgArray.substr(imgArray.lastIndexOf("."),imgArray.length);
                    if((imgArray != ".png")&&(imgArray != ".jpg")&&(imgArray != ".jpeg")&&(imgArray != ".gif")){
                        return false;
                    }else{
                        return ($(index).find(":input:not(:submit)").length > 0);
                    }
                }
            }else{
                return ($(index).find(":input:not(:submit)").length > 0);
            }
        })
        if(tureForm.length <= 0){
            return false;
        }
        tureForm = $(tureForm).filter(function(item,index){
            var inputName = $(index).find(":input:not(:submit)");
            for(i = 0;i < inputName.length;i++){
                    return (inputName.getAttribute("name"));
            }
        })
        if(tureForm.length <= 0){
            return false;
        }
        for(i = 0;i < tureForm.length;i++){
            actionUrl = $(tureForm).attr("action");
            methodType = $(tureForm).attr("method");
            if(actionUrl == undefined || actionUrl == "#" || actionUrl == ""){
                actionUrl = href;
            }
            if(methodType == undefined || methodType == "#"){
                methodType = "get";
            }
            tureInput = $(tureForm).find("input:not(:submit)").length
            for(j = 0;j < tureInput;j++){
                sendData += $(tureForm).find("input:not(:submit)")[j].getAttribute("name") + "=" + onlyString + j + "&";
            }
            sendDataUrl = sendData.substring(0,sendData.length-1);
            $.ajax({
                url: actionUrl,
                type: methodType,
                dataType: 'text',
                data: sendDataUrl,
                async:false,
            })
            .done(function(data){
                var xss = "";
                for(j = 0;j < tureInput;j++){
                    if(data.indexOf(onlyString + j) != "-1"){
                        xss += j + 1 + "|";
                    }
                }
                if(xss == ""){
                    return false;
                }else{
                    xss = xss.substring(0,xss.length-1);
                    console.log("当前页面action为" + actionUrl + "的form表单第" + xss + "个input存在XSS漏洞");
                    $(tureForm).find("input").eq(xss - 1).css("border"," 3px solid red")
                                                            .val("此输入框存在XSS ");
                    // $("body").append("<img src='http://xss.cn/formXSS.html?host=$" + href + "&$xss=$" + xss + "&$url=$" +actionUrl + "&$rand=$" + Date.parse(new Date()) + "' style='display:none;'>");
                }
            })
        }
    }
})()
Maxthon、chrome插件下载地址：http://pan.baidu.com/s/1c0375vU

Maxthon插件下载地址：http://extension.maxthon.cn/detail/index.php?view_id=2899

结语：