xss和csrf攻击的那些事儿-白红宇

xss

xss 的全称是Cross Site Script，缩写为了避免和样式css冲突，于是缩写为xss

中文意思是跨站脚本攻击。

xss攻击一般是指用恶意的脚本代码去篡改网页，以获取用户的隐私信息。

xss分类

反射型

反射型是通过url参数给网页注入恶意的脚本代码，现在我们启动一个服务器，服务器会根据查询字符串中user的值来显示欢迎谁

//url的反射型是将脚本注入到页面，危害较小let http = require('http');let queryString = require('querystring');let server = http.createServer((req,res)=>{    let query=req.url.split("?")[1];    let queryObj =  queryString.parse(query);    res.setHeader('Content-Type','text/html;charset=utf8');    res.end(`        欢迎${queryObj.user}    `)})server.listen(80,()=>{    console.log("服务器启动成功！")})复制代码

但如果输入localhost/?user=<script>alert('反射型xss')</script>网页就会被注入脚本，根据注入脚本的不同，攻击者可以借此获取用户的cookie等重要信息。

存储型

相比较反射型，存储型xss攻击危害更大，他会将xss的攻击脚本写入到数据库，每次从数据库中调用，用户便会受到攻击。

场景多是在用户输入评论，与发表文章的时候。

这里为了简化，假设通过网络请求，已经将数据写入了数据库，后端再将数据返回来插入到dom节点中

注：因为谷歌浏览器自动过滤了xss的攻击，所以这里并没有出现弹窗

xss攻击的注入点

html节点内容


    
         {
   {content}}//通过模板引擎注入
    
复制代码

html属性

//  如果 img路径='1"onerror="'//结果  "">复制代码

javascript代码，存在由后台注入的变量

复制代码

富文本

富文本需要保留html有xss攻击的风险

xss的解决办法

在响应头里设置(X-XXS-Protection,1)，用浏览器自带拦截

转义字符内容

转义<<和>> 避免节点内容被篡改

转义双引号&quto;，单引号'，空格 &#32(如果代码都有写引号，则空格是不需要转义的)

转义斜杆\\，避免js内容被注释

富文本内容过滤

富文本内容在上传到服务器时，过滤性能是最好的

一般有 按白名单保留了部分标签和属性 与 按黑名单转义标签和属性两种

如果标签属性太多，可以采用白名单保留部分标签和属性

var whiteList = {
   //存储白名单	'img':['src']}var xssFilter = function(html){    var cheerio =  require("cheerio");    var $ = cheerio.load(html);//用cheerio在服务端解析html    $('*').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()}复制代码

csrf

csrf全称是Cross Site Request Forgy，中文是跨站请求伪造

csrf的攻击方式

假设我现在有一个网站A，当管理员登录后，本地会存有管理员权限的cookie，此时发送请求http://localhost:80/delete可以删除文章，

let http = require('http');let data = "我是文章";let server = http.createServer((req,res)=>{  let path = req.url.split("?")[0];  res.setHeader('Content-Type','text/html;;charset=utf8');  if(path=='/login'){      res.setHeader('Set-Cookie','user=admin');      res.writeHeader(302,{
   'location':'/'});        res.end();  }  if(path=="/"){      res.write(`        去csrf      `)      res.end(data);  }  if(path=="/delete"){      //当用户登录后就可以删除文章     if(req.headers.cookie=='user=admin'){         data="";         res.writeHeader(302,{
   'location':'/'});        res.end();     }else{        res.writeHeader(302,{
   'location':'/'});        res.end();     }  }})server.listen(80,()=>{    console.log("服务器启动成功！")})复制代码

那么我建一个csrf的网站

<img src="http://localhost:80/delete"用图片去删除A网站的文章

let http = require('http');let server = http.createServer((req,res)=>{    res.setHeader('Content-Type','text/html;charset=utf8');    res.end(`    
    
     欢迎来到csrf网站
         
          `)})server.listen(8080,()=>{    console.log("服务器启动成功！")})复制代码

当管理员进入网站D时，A网站中的第10篇文章便会被删除

虽然img的src链接是在csrf网站发起的，但是url的路径跟A网站同源，所以可以拿到cookie

如何防范csrf攻击

csrf的特点：

csrf的网站会带有目标网站的cookie

csrf攻击不访问目标网站的前端

referer为csrf网站

根据这些特点，我们就可以有相应的对策：

禁止第三方网站带cookieres.setHeader('Set-Cookie','sameSite=strict')

每次用户发起请求，都使用验证码，不过体验不好

在页面中设置token

setHeader('Set-Cookie','token=123456')//每次用户发送请求，我就将input的值于其cookie中的token进行对比，//只要不相符合则拒绝请求，//能这么做是因为csrf攻击不能拿到目标网站中input里的token值复制代码

当referer来源不是本网站时，拒绝请求

总结

防范xss:

在响应头里设置(X-XXS-Protection,1)，用浏览器自带拦截转义字符内容

转义字符

富文本按白名单/黑名单过滤

防范csrf:

禁止第三方网站带cookieres.setHeader('Set-Cookie','sameSite=strict')

每次用户发起请求，都使用验证码，不过体验不好

在页面中设置token

当referer来源不是本网站时，拒绝请求

结语

文章写的不易，路过的大大们觉得不错点个赞。

本文作者：胡志武

时间：2019/6/15

如果本文有错漏处，请看官们多多指正

如需转载，请注明出处