javascript防止xss攻击

javascript防止xss攻击

XSS（Cross Site Scripting），跨站脚本攻击，是一种允许攻击者在另外一个用户的浏览器中执行恶意代码脚本的脚本注入式攻击。本来缩小应该是CSS，但为了和层叠样式（Cascading Style Sheet,CSS）有所区分，故称XSS。

记录一下自己开发过程中遇到的问题

• 输入标签不是用文本框或者文本域的，比如用用div做可编辑标签，html有一个属性contenteditable，如果设置为true表示可编辑，设置为plaintext-only表示只能输入纯文本，但是目前仅仅只是谷歌支持的比较好

  <div contenteditable="plaintext-only"></div>

• 用innerText(JQ为text())不用innerHTML(JQ为html())

• 用浏览器内部转换器实现转换

  • html转码

    首先动态创建一个容器标签元素，如DIV，然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)，最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了。

  • html解码

    首先动态创建一个容器标签元素，如DIV，然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)，最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。

    var HtmlUtil = {
     2     /*1.用浏览器内部转换器实现html转码*/
     3     htmlEncode:function (html){
     4         //1.首先动态创建一个容器标签元素，如DIV
     5         var temp = document.createElement ("div");
     6         //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
     7         (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
     8         //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
     9         var output = temp.innerHTML;
    10         temp = null;
    11         return output;
    12     },
    13     /*2.用浏览器内部转换器实现html解码*/
    14     htmlDecode:function (text){
    15         //1.首先动态创建一个容器标签元素，如DIV
    16         var temp = document.createElement("div");
    17         //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
    18         temp.innerHTML = text;
    19         //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
    20         var output = temp.innerText || temp.textContent;
    21         temp = null;
    22         return output;
    23     }
    24 };
    

• 使用正则表达式也是一种常用的处理方式，实现原理就是使用替换的方式来实现转码和解码，转码时把**<>，空格符，&，’，""**替换成html编码，解码就把html编码替换成对应的字符，实现代码如下：

  var HtmlUtil = {
   2     /*1.用正则表达式实现html转码*/
   3     htmlEncodeByRegExp:function (str){  
   4          var s = "";
   5          if(str.length == 0) return "";
   6          s = str.replace(/&/g,"&");
   7          s = s.replace(/</g,"&lt;");
   8          s = s.replace(/>/g,"&gt;");
   9          s = s.replace(/ /g,"&nbsp;");
  10          s = s.replace(/\'/g,"&#39;");
  11          s = s.replace(/\"/g,"&quot;");
  12          return s;  
  13    },
  14    /*2.用正则表达式实现html解码*/
  15    htmlDecodeByRegExp:function (str){  
  16          var s = "";
  17          if(str.length == 0) return "";
  18          s = str.replace(/&amp;/g,"&");
  19          s = s.replace(/&lt;/g,"<");
  20          s = s.replace(/&gt;/g,">");
  21          s = s.replace(/&nbsp;/g," ");
  22          s = s.replace(/&#39;/g,"\'");
  23          s = s.replace(/&quot;/g,"\"");
  24          return s;  
  25    }
  26 };