Skip to main content

2. 安全问题：CSRF 和 XSS

1 前言​

  • CSRF：基本概念、攻击方式、防御措施
  • XSS：基本概念、攻击方式、防御措施

有人问：SQL注入算吗？答案：这个其实跟前端的关系不是很大。

2 CSRF​

2.1 CSRF 的基本概念、缩写、全称​

CSRF（Cross-site request forgery）：跨站请求伪造。

2.2 CSRF 的攻击原理​

用户是网站 A 的注册用户，且登录进去，于是网站 A 就给用户下发cookie。

要完成一次CSRF攻击，受害者必须满足两个必要的条件：

  1. 登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）
  2. 在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。

cookie保证了用户可以处于登录状态，但网站B其实拿不到 cookie。

案例（钓鱼网站取钱）

2.3 CSRF 如何防御​

方法一、Token 验证：（用的最多）​

  1. 服务器发送给客户端一个token；
  2. 客户端提交的表单中带着这个token。
  3. 如果这个 token 不合法，那么服务器拒绝这个请求。

方法二：隐藏令牌：​

  • 把 token 隐藏在 http 的 head头中。

方法二和方法一有点像，本质上没有太大区别，只是使用方式上有区别。

方法三、Referer 验证：​

Referer 指的是页面请求来源。意思是，只接受本站的请求，服务器才做响应；如果不是，就拦截。（可以仿造）

方法四、添加验证码（体验不好）​

服务端生成图片发送给客户端

3 XSS​

3.1 XSS 的基本概念​

XSS（Cross Site Scripting）：跨域脚本攻击。

3.2 XSS 的攻击原理​

XSS攻击的核心原理是：不需要你做任何的登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本（可能是js、hmtl代码块等）。

最后导致的结果可能是：

  • 盗用Cookie
  • 破坏页面的正常结构，插入广告等恶意内容
  • D-doss攻击（消耗服务器带宽）

3.3 XSS 的攻击方式和防范措施​

1. 反射型（基于后端）​

发出请求时，XSS代码出现在url中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码。这个过程像一次反射，所以叫反射型XSS

​ 案例 用户 type 参数传递什么返回什么

  • ?type=<script>alart(1)</script>

  • chrome 发现路径存在异常 会有 xss 屏蔽功能

  • 诱导用户点击（一次性）拿到用户 cookier

解决方式

  • 服务端查询参数 加上encodeURLComponent(req.query.type)转码

2、DOM-Based(不基于后端)​

修改属性 插入内容 document.write...

​ 案例 输入图片地址 然后出现图片

$("#box").html(`<img src = '${$('#url').val()}'>`)

<img src ="xxx" onerror="alert(1)" id="" >

用户输入 xxx" onerror="alert(1)" id=" 页面就会一直弹框

解决方法
$("#box").html(`<img src = '${encodeURL( $('#url').val())}'>`)

解决方法：

  • 客户端对内容进行encodeURL（）

3、存储型（恶意脚本存储到服务器）​

存储型XSS和反射型XSS的差别在于，提交的代码会存储在服务器端（数据库、内存、文件系统等），下次请求时目标页面时不用再提交 XSS 代码。

​ 案例 ： 评论 功能 

用户评论的的时候添加恶意脚本   存储到服务器
然后其他人获取评论列表 就会被脚本攻击  （范围广）

解决方法：

  • 客户端传递给服务器时候，需要校验先过滤一下

  • 服务器再做一次过滤

  • 直接在输出的时候过滤

    function encodeHtml(str) {
      return str
        .replace(/&/g, "&amp;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&apos;")
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
    }

3.4 XSS 的防范措施（encode + 过滤）​

XSS 的防范措施主要有三个：

1. 编码：​

对用户输入的数据进行HTML Entity编码。

Encode的作用是将$var等一些字符进行转化，使得浏览器在最终输出结果上是一样的。

2、过滤：​

  • 移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等。（总而言是，过滤掉一些不安全的内容）
  • 移除用户输入的Style节点、Script节点、Iframe节点。（尤其是Script节点，它可是支持跨域的呀，一定要移除）。

3、校正​

  • 避免直接对HTML Entity进行解码。
  • 使用DOM Parse转换，校正不配对的DOM标签。

备注：我们应该去了解一下DOM Parse这个概念，它的作用是把文本解析成DOM结构。

比较常用的做法是，通过第一步的编码转成文本，然后第三步转成DOM对象，然后经过第二步的过滤。

还有一种简洁的答案：

首先是encode，如果是富文本，就白名单。

4 CSRF 和 XSS 的区别​

区别一：

  • CSRF：需要用户先登录网站A，获取 cookie
  • XSS：不需要登录。

区别二：（原理的区别）

  • CSRF：是利用网站A本身的漏洞，去请求网站A的api。
  • XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。