前端修复xss漏洞的一种思路---动态修改URL，获取URL参数值和动态修改URL参数值

先说一下需求：

我们负责的网站被检测出来了xss漏洞，例如用户输入

http://www.xxxxx.cn/question.do?id=62><img%20src=1%20onerror=alert(1)><aaa="bad

会在页面出现alert(1)弹出框，并且传到后台的参数也是非法的。

于是就想到了利用js动态修改参数后再传到后台，这样既解决了前台弹出框的问题，又解决了后台接收非法参数的问题。

---

1. 获取参数值—要想动态修改参数，首先要获取url中的参数，js函数如下（从菜鸟教程抄的）

   function GetQueryString(name)
   {
       var query = window.location.search.substring(1);
          var vars = query.split("&");
          for (var i=0;i<vars.length;i++) {
                  var pair = vars[i].split("=");
                  if(pair[0] == name){return pair[1];}
          }
          return(false);
   };
   

2. 修改参数值—由于本例子参数比较固定，及时id=12这样的，参数值永远是数字，所以只需要根据正则匹配参数值第一个非数字的位置，然后截取参数值，从而动态修改url

   根据正则查找字符串中第一个匹配规则的索引，需要用到字符串的search方法

   var userIdVal=GetQueryString("id");//获取参数值
   console.log(userIdVal);
   var index = userIdVal.search(/\D/);//查找参数值第一个非数字的索引
   console.log(index);
   

3. 修改URL

   function replaceParamVal(paramName,replaceWith) {
       var oUrl = this.location.href.toString();
       var re=eval('/('+ paramName+'=)([^&]*)/gi');
       var nUrl = oUrl.replace(re,paramName+'='+replaceWith);
       this.location = nUrl;
   　　window.location.href=nUrl
   }
   
   

---

最后完整代码如下

function GetQueryString(name)
{
    var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == name){return pair[1];}
       }
       return(false);
};

function replaceParamVal(paramName,replaceWith) {
    var oUrl = this.location.href.toString();
    var re=eval('/('+ paramName+'=)([^&]*)/gi');
    var nUrl = oUrl.replace(re,paramName+'='+replaceWith);
    this.location = nUrl;
　　window.location.href=nUrl
}

var userIdVal=GetQueryString("id");
console.log(userIdVal);
var index = userIdVal.search(/\D/);
console.log(index);
if(index != -1){
	replaceParamVal('id',userIdVal.substring(0,index))
}