xss和csrf攻击的那些事儿

谁践踏了优雅 2022-01-12 05:33 241阅读 0赞

## 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节点中
    
        <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); } 复制代码
    
    注：因为谷歌浏览器自动过滤了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代码，存在由后台注入的变量

1.  富文本

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

### xss的解决办法 ###

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

*  转义<`<`和>`>` 避免节点内容被篡改
 *  转义 双引号`&quto;`，单引号`'`，空格 `&#32`(如果代码都有写引号，则空格是不需要转义的)
 *  转义斜杆`\\`，避免js内容被注释

1.  富文本内容过滤

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

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

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

## csrf ##

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

### csrf的攻击方式 ###

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

那么我建一个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篇文章便会被删除

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

### 如何防范csrf攻击 ###

csrf的特点：

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

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

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

## 结语 ##

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

本文作者：胡志武

时间：2019/6/15

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

如需转载，请注明出处