阅读 298

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("服务器启动成功!")
})
复制代码

1560565543127

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

1560565663687

  • 存储型

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

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

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

    <input type="text">
        <button>提交</button>
        <div class="showData"></div>
        <script>
            let Dinput = document.querySelector('input');
            let showDiv = document.querySelector('.showData');
            let btn = document.querySelector('button');
            btn.addEventListener('click',putData);
            function putData(){ 
                let xhr = new XMLHttpRequest();
                xhr.open('POST','/',true);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4&&xhr.status==200){
                        let divDom = document.createElement('div')
                        divDom.innerHTML = xhr.response;
                        showDiv.appendChild(divDom); 
                    }
                }
                xhr.send(Dinput.value);       
            }
    复制代码

    1560574336114

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

xss攻击的注入点

  1. html节点内容
<div>
    {{content}}//通过模板引擎注入
</div>
复制代码
  1. html属性
<img src="{{img路径}}">
//  如果 img路径='1"onerror=<script></script>"'
//结果
<img src="1"    onerror=<script></script>  "">
复制代码
  1. javascript代码,存在由后台注入的变量
<script>
let data = "{{content}}";
// 如果 content=' hello";alert(1)" '
//结果
data = "hello";alert(1)"";
</script>
复制代码
  1. 富文本

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

xss的解决办法

  1. 在响应头里设置(X-XXS-Protection,1),用浏览器自带拦截
  2. 转义字符内容
  • 转义<&lt;和>&gt; 避免节点内容被篡改
  • 转义 双引号&quto;,单引号&#39;,空格 &#32(如果代码都有写引号,则空格是不需要转义的)
  • 转义斜杆\\,避免js内容被注释
  1. 富文本内容过滤

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

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

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

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的攻击方式

1560576863801

假设我现在有一个网站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(`
        <a href="http://localhost:8080">去csrf</a>
      `)
      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(`
    <div>欢迎来到csrf网站<div>
    <img src='http://localhost:80/delete'>
    `)
})
server.listen(8080,()=>{
    console.log("服务器启动成功!")
})
复制代码

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

1560585914213

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

如何防范csrf攻击

csrf的特点:

  1. csrf的网站会带有目标网站的cookie
  2. csrf攻击不访问目标网站的前端
  3. referer为csrf网站

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

  1. 禁止第三方网站带cookieres.setHeader('Set-Cookie','sameSite=strict')
  2. 每次用户发起请求,都使用验证码,不过体验不好
  3. 在页面中设置token
<input type='hidden' value=123456>

setHeader('Set-Cookie','token=123456')

//每次用户发送请求,我就将input的值于其cookie中的token进行对比,
//只要不相符合则拒绝请求,
//能这么做是因为csrf攻击不能拿到目标网站中input里的token值
复制代码
  1. 当referer来源不是本网站时,拒绝请求

总结

防范xss:

  1. 在响应头里设置(X-XXS-Protection,1),用浏览器自带拦截转义字符内容
  2. 转义字符
  3. 富文本按白名单/黑名单过滤

防范csrf:

  1. 禁止第三方网站带cookieres.setHeader('Set-Cookie','sameSite=strict')
  2. 每次用户发起请求,都使用验证码,不过体验不好
  3. 在页面中设置token
  4. 当referer来源不是本网站时,拒绝请求

结语

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

本文作者:胡志武

时间:2019/6/15

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

如需转载,请注明出处

关注下面的标签,发现更多相似文章
评论