xss防御

XSS攻击：跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。

xss攻击分类

分类

反射型：经过后端，不经过数据库
存储型：经过后端，经过数据库

xss攻击注入点

攻击注入点

xss攻击防御

• 浏览器防御。现代浏览器具有xss防御机制，防御范围有限。防御类型为反射型xss，即url参数再次出现在页面中，浏览器会进行拦截。防御内容为HTML节点内容与HTML属性。是一种非常有限的防御机制，不可以依赖。
• HTML节点内容转义。
  转义内容为< >。将尖括号转义为&lt,&gt

var escapeHtml = function(str){
      str = str.replace(/</g,'&lt;');
      str = str.replace(/>/g,'&gt;');
      return str;
}

• HTML属性攻击防御。
  用户输入的数据出现在了html属性上，而由于里面有引号，将属性提前关闭了，产生了其他属性，而内容中可能存在脚本。只需要将引号转义。

var escapeProperty = function(str){
      if(!str) return ' ';
      str = str.replace(/&/g, '&');
      str = str.replace(/"/g,'&quto;');
      str = str.replace(/'/g,''');
      return str;
}

可将上述两种合为一个方法

var escapeHtml = function(str) {
    if(!str) return '';
    str = str.replace(/&/g, '&');
    str = str.replace(/</g, '&lt;');
    str = str.replace(/>/g, '&gt;');
    str = str.replace(/"/g, '&quto;');
    str = str.replace(/'/g, '&#39;');
    // str = str.replace(/ /g, '&#32;');
    return str;
};

• js代码防御
  js中会插入来自后台或者用户输入的数据，但是这些数据可能会突破引号边界，产生新的语句。解决方案1:将引号转义,2:jsonencode。

var escapeForJs = function(str) {
    if(!str) return '';
    str = str.replace(/\\/g, '\\\\');
    str = str.replace(/"/g, '\\"');
    return str;
};
JSON.stringify(str)//建议使用这种方法

• 富文本防御
  使用黑名单防御。不建议使用
  按白名单保留部分标签和属性。将html解析成树状结构，根据dom树遍历，是否为允许属性。库Xss，可以实现将html解析成树状结构。

var xssFilter = function(html){
    if(!html) return '';
    var xss = require('xss');
    var ret = xss(html, {
        whiteList:{
            img: ['src'],
            a: ['href'],
            font: ['size', 'color']
        },
        onIgnoreTag: function(){
            return '';
        }
    });
    console.log(html, ret);
    return ret;
};

• CSP(Content Security Policy)内容安全策略
  CSP指的是内容安全策略，为了缓解很大一部分潜在的跨站脚本问题，浏览器的扩展程序系统引入了内容安全策略（CSP）的一般概念。这将引入一些相当严格的策略，会使扩展程序在默认情况下更加安全，开发者可以创建并强制应用一些规则，管理网站允许加载的内容。