前端过滤XSS攻击

Posted 2020-08-09 yinz163diudiu

日常开发过程中，对于存在用户交互的一些门户网站等，过滤xss攻击是必不可少的。

此处主要记录下我在工作过程中的简单处理方法。

 

前端过滤XSS攻击， 我这里用的是开源工程 js-xss,官网地址：http://jsxss.com/zh/index.html

 

查看官网可发现，与其他的js库一样，使用js-xss,只需（下载）引入xss.js文件到页面即可。

 注意 ： xss.js中主要使用到的方法为 filterXSS（）

由于我在开发过程中，提交数据多是以表单序列化直接提交的，所以我重写了一下表单序列化的函数，如下所示：

//序列化表单数据，返回k=v&k=v格式的字符串，查看jquery.js源文件，可发现此处主要是改写了一下$(form).serialize()方法
function serializeForm(id) {
    var form;
    if(typeof id == ‘string‘) {
        form = $("#" + id);
    } else if(typeof id == ‘object‘) {
        form = id;
    }
    var array = form.serializeArray();
    for(var i = 0; i < array.length; i++) {
        array[i].value = filterXSS(array[i].value,{   
            stripIgnoreTagBody :[‘script‘,‘iframe‘],
            stripIgnoreTag  :true
        });;
    }
    return $.param(array);
}

或者如下方法，返回json对象

//序列化表单数据，返回json对象
function getFormData(id) {
    var form;
    if(typeof id == ‘string‘) {
        form = $("#" + id);
    } else if(typeof id == ‘object‘) {
        form = id;
    }
    var array = form.serializeArray();
    var json = {};
    for(var i = 0; i < array.length; i++) {
        json[array[i].name] =  filterXSS(array[i].value,{
            stripIgnoreTagBody :[‘script‘,‘iframe‘],
            stripIgnoreTag  :true
        });
    }
    return json;
}

 

在进行ajax请求时，在提交表单数据时直接调用上面的其中之一即可（不需再调用$(form).serialize()）

到此，前端过滤xss就完成了。