XSS攻击原理分析与防护技术

跨站脚本攻击(Cross Site Scripting)，缩写为XSS。恶意攻击者往Web页面里插入恶意javaScript代码，当用户浏览该页之时，嵌入其中Web里面的javaScript代码会被执行，从而达到恶意攻击用户的目的。

一个简单的XSS攻击

代码：

async function(ctx, next){
    ctx.set('X-XSS-Protection',0);
    ctx.render('index',{from:ctx.query.from});
};

注意：插入X-XSS-Protection头部使浏览器XSS拦截器失效。

开始攻击：

你们发现网页执行了一段脚本，并且这段脚本是用户恶意输入的。这就是XSS攻击最简单的一个案例。把本来应该显示纯文本的地方，执行了一段黑客写入的脚本。

那XSS攻击有什么危害呢？

一、盗取各种用户账号
二、控制企业数据，包括读取、篡改、添加、删除企业敏感数据的能力
三、盗窃企业重要的具备商业价值的资料
四、非法转帐
五、强制发送电子邮件
六、网站挂马
七、控制受害者机器向其它网站发起攻击

XSS攻击的分类

一、反射型

又称为非持久性跨站点脚本攻击。漏洞产生的缘由是攻击者注入的数据反映在响应中。非持久型XSS攻击要求用户访问一个被攻击者篡改后的连接，用户访问该连接时，被植入的攻击脚本被用户游览器执行，从而达到攻击目的。也就是我上面举的那个简单的XSS攻击案例，经过url参数直接注入。而后在响应的数据中包含着危险的代码。

当黑客把这个连接发给你，你就中招啦！

二、存储型

又称为持久型跨站点脚本，它通常发生在XSS攻击向量(通常指XSS攻击代码)存储在网站数据库，当一个页面被用户打开的时候执行。持久的XSS相比非持久性XSS攻击危害性更大,容易形成蠕虫，由于每当用户打开页面，查看内容时脚本将自动执行。

该网页有一个发表评论的功能，该评论会写入后台数据库，而且访问主页的时候，会从数据库中加载出全部的评论。

当我添加一个评论，而且暗藏一个脚本，以下图：

当别人访问主页的时候，刚刚黑客写入的评论里面的脚本被浏览器当成代码执行了，用户莫名其妙受到攻击：

上面就是两种XSS攻击的两种基本类型。固然黑客不会弹出一个框框给你，告诉你被攻击，黑客不会这么傻的~他能够在用户不知情的状况下，盗取用户的cookie，改变网页业务逻辑等等。

XSS攻击的注入点

一、HTML节点内容
这个其实就是我以前演示的，HTML节点中暗藏攻击脚本。

二、HTML属性
这里img的src属性是由用户传递过来的值，当用户把图片地址写成：1"%20onerror="alert(%27哈哈被攻击%27)
你们看下面发生了什么：

三、JavaScript代码 （字符串提早关闭）
当JavaScript代码中有一个变量是由用户提供的数据，这个数据也有可能以前被写入了数据库。以下图，当用户输入的内容为：
小柚子";alert(%27哈哈你被攻击了！%27);"

四、富文本
你们都知道，富文本其实就是一段HTML。既然它是一段HTML，那么就存在XSS攻击。并且富文本攻击的防护相对比较麻烦。

XSS攻击防护

chrome浏览器自带防护,可拦截反射性XSS（HTML内容和属性），js和富文本的没法拦截，因此咱们必须得本身作一些防护手段。

一、HTML节点内容的防护

将用户输入的内容进行转义：

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

ctx.render('index', {comments, from: escapeHtml(ctx.query.from || '')});

二、HTML属性的防护

对空格，单引号，双引号进行转义

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

ctx.render('index', {posts, comments,
    from:ctx.query.from || '',
    avatarId:escapeHtmlProperty(ctx.query.avatarId || '')});

三、JavaScript的防护

对引号进行转义

var escapeForJS = function(str){
        if(!str) return '';
        str = str.replace(/\\/g,'\\\\');
        str = str.replace(/"/g,'\\"');
        return str;
}

四、富文本的防护
富文本的状况很是的复杂，js能够藏在标签里，超连接url里，何种属性里。

<script>alert(1)</script>
<a href="javascript:alert(1)"></a>
<img src="abc" onerror="alert(1)"/>

因此咱们不能过用上面的方法作简单的转义。由于状况实在太多了。

如今咱们换个思路，
提供两种过滤的办法：

1）黑名单
咱们能够把<script/> onerror 这种危险标签或者属性归入黑名单，过滤掉它。可是咱们想，这种方式你要考虑不少状况，你也有可能漏掉一些状况等。

2）白名单
这种方式只容许部分标签和属性。不在这个白名单中的，一概过滤掉它。可是这种方式编码有点麻烦，咱们须要去解析html树状结构，而后进行过滤，把过滤后安全的html在输出。
这里提供一个包，帮助咱们去解析html树状结构，它使用起来和jquery很是的相似。

npm install cheerio --save

var xssFilter = function(html) {
    if(!html) return '';
    var cheerio = require('cheerio');
    var $ = cheerio.load(html);
    //白名单
    var whiteList = {
        'html' : [''],
        'body' : [''],
        'head' : [''],
        'div' : ['class'],
        'img' : ['src'],
        'a' : ['href'],
        'font':['size','color']
    };

    $('*').each(function(index,elem){
        if(!whiteList[elem.name]) {
            $(elem).remove();
            return;
        }
        for(var attr in elem.attribs) {
            if(whiteList[elem.name].indexOf(attr) === -1) {
                $(elem).attr(attr,null);
            }
        }

    });

    return $.html();
}

console.log(xssFilter('<div><font color="red">你好</font><a href="http://www.baidu.com">百度</a><script>alert("哈哈你被攻击了")</script></div>'));

你们能够看到：

<script>不在白名单中，因此被过滤掉了。

五、CSP(Content Security Policy)

内容安全策略（Content Security Policy，简称CSP）是一种以可信白名单做机制，来限制网站中是否能够包含某来源内容。默认配置下不容许执行内联代码（<script>块内容，内联事件，内联样式），以及禁止执行eval() , newFunction() , setTimeout([string], ...) 和setInterval([string], ...) 。

示例：

1.只容许本站资源

Content-Security-Policy： default-src ‘self’

2.容许本站的资源以及任意位置的图片以及 https://segmentfault.com 下的脚本。

Content-Security-Policy： default-src ‘self’; img-src *;
script-src https://segmentfault.com