安全防范xss&csrf

最新推荐文章于 2024-04-14 13:08:27 发布

原莱_

最新推荐文章于 2024-04-14 13:08:27 发布

阅读量560

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_40934617/article/details/118462027

版权

vue 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

安全防范

1 篇文章 0 订阅

订阅专栏

安全防范

在这里插入图片描述

1、xss

XSS即 Cross Site Scripting （跨站脚本攻击）,

指的是攻击者想尽一切办法将一些可执行的代码注入到网页中，利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。

XSS 可以分为：存储型 XSS (也叫持久型 XSS)、反射型 XSS (也叫非持久型)。

1.1 存储型 XSS

存储型也就是攻击的代码被服务端写入进数据库中

这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。具有攻击性的脚本被保存到了服务器并且可以被普通用户完整的从服务的取得并执行，从而获得了在网络上传播的能力。

1.2 反射型 XSS

一般通过修改 URL 参数的方式加入攻击代码，诱导用户访问链接从而进行攻击。

这种常见于通过 URL 传递参数的功能，如网站搜索、跳转等。由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。

二者区别：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。

1.3 如何防御

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            text-align: center;
            margin-top: 120px;
        }
        .top input{
            width: 400px;
            height: 40px;
            font-size: 20px;
        }
        .top button{
            width: 140px;
            height: 40px;
            font-size: 20px;
        }
        .comment{
            margin-top: 20px;
        }
        .comment div{
            float: left;
            width: 33%;
            border-right: 2px #ccc solid;
            border-left: 2px #ccc solid;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="top">
        <input type="text"/>
        <button>
            评论
        </button>
    </div>
    <div class="comment">
        <div><ul></ul></div>
        <div><ul></ul></div>
        <div><ul></ul></div>
    </div>
    <script src="./jquery.min.js"></script>
    <script src="./xss.js"></script>
    <script>
        let comment = $('input')[0];
        let list1 = $('ul')[0]
        let list2 = $('ul')[1]
        let list3 = $('ul')[2]
        $('button')[0].onclick = function(){
            console.log(comment.value)
            list1.innerHTML += '<li>'+comment.value+'</li>'
            list2.innerHTML += '<li>'+escape(comment.value)+'</li>'
            list3.innerHTML += '<li>'+filterXSS(comment.value)+'</li>'
        }
        function escape(str){
            str = str.replace(/</g,'&lt;')
            str = str.replace(/>/g,'&gt;')
            str = str.replace(/'/g,'&#36;')
            str = str.replace(/"/g,'&quot;')
            str = str.replace(/\//g,'&#x2f;')
            return str
        }
    </script>
</body>
</html>

黑名单通过转义进行输入输出过滤

function escape(str) {
    str = str.replace(/&/g, '&amp;')
    str = str.replace(/</g, '&lt;')
    str = str.replace(/>/g, '&gt;')
    str = str.replace(/"/g, '&quot;')
    str = str.replace(/'/g, '&#39;')
    str = str.replace(/`/g, '&#96;')
    str = str.replace(/\//g, '&#x2F;')
    return str
}

白名单js过滤HTML

js https://github.com/leizongmin/js-xss/blob/master/dist/xss.js

使用方法
```
<script src="./xss.js"></script>
//使用方法
filterXSS(value)
```

CSP (Content Security Policy，内容安全策略) 白名单

//通过 HTTP 头信息的Content-Security-Policy的字段 设置允许执行白名单
Content-Security-Policy: default-src https://demo.example.cn https://demo.example2.cn; object-src 'none'

默认允许读取 https://demo.example.cn 和 https://cdn.example2.net 的资源

前端安全配置CSP

2、CSRF

CSRF：跨站点请求伪造（Cross-Site Request Forgeries），也被称为 one-click attack 或者 session riding。冒充用户发起请求（在用户不知情的情况下），完成一些违背用户意愿的事情。

在这里插入图片描述

参考：https://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html

CSRF攻击是源于WEB的隐式身份验证机制！WEB的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的

CSRF攻击的特点：

通常发生在第三方网站
攻击者不能获取cookie等信息，只是使用

攻击例子
CSRF.vue

<template>
  <div>
    <button @click='login'>登录</button>
    <button @click='zhuanzhang'>转账</button>
    
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
      login(){
        document.cookie ='token=sdsv;kjskdlksvd3535';
      },
      zhuanzhang(){
          if(document.cookie){
              this.$router.push({name:'CSRF1',query:{from:'A',amount:'8888',to:'B'}})
          }else{
              window.alert('请先登录')
          }
      }
      
  },
};
</script>

CSRF1.vue:

<template>
  <div>
    {{obj.from+'转了'+obj.amount+'给'+obj.to}}
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      obj:{}
    };
  },
  methods: {
      
  },
  mounted() {
      let obj = this.$route.query;
      this.obj = this.$route.query;
      console.log(obj)
      if(document.cookie){
          console.log(obj.from+'转了'+obj.amount+'给'+obj.to)
          axios.get('http://localhost:8080/transfer?from='+obj.from+'amount='+obj.amount+'to='+obj.to)
      }
  },
};
</script>

第三方攻击网站原生html


    <button id="bad">抽奖</button>
    <script src="./jquery.min.js"></script>
    <script>
        $('#bad').click(function(){
            window.open('http://localhost:8080/CSRF1?from=A&amount=8888&to=C')
        })
    </script>

如何防御

验证码：强制用户必须与应用进行交互，才能完成最终请求。此种方式能很好的遏制 CSRF，但是用户体验相对差。
尽量使用 post ，但是 post 也并不是万无一失，攻击者只需要构造一个form就可以。
Referer check：请求来源限制，此种方法成本最低，但是并不能保证 100% 有效，因为服务器并不是什么时候都能取到 Referer，而且低版本的浏览器存在伪造 Referer 的风险。
token：token 验证的 CSRF 防御机制是公认最合适的方案。

服务器下发一个随机 Token（算法不能复杂），每次发起请求时将 Token 携带上，服务器验证 Token 是否有效。

3、CSRF 与 XSS 区别

通常来说 CSRF 是由 XSS 实现的，CSRF 时常也被称为 XSRF（CSRF 实现的方式还可以是直接通过命令行发起请求等）。

XSS 是代码注入问题，CSRF 是 HTTP 问题。
XSS 是内容没有过滤导致浏览器将攻击者的输入当代码执行。CSRF 则是因为浏览器在发送 HTTP 请求时候自动带上 cookie，而一般网站的 session 都存在 cookie里面。
问题。
XSS 是内容没有过滤导致浏览器将攻击者的输入当代码执行。CSRF 则是因为浏览器在发送 HTTP 请求时候自动带上 cookie，而一般网站的 session 都存在 cookie里面。
XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。