安全问题：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=
• chrome 发现路径存在异常 会有 xss 屏蔽功能
• 诱导用户点击（一次性）拿到用户 cookier

解决方式

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

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

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

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

$("#box").html(``)



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

解决方法
$("#box").html(``)

解决方法：

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

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

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

? 案例 ： 评论 功能

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

解决方法：

• 客户端传递给服务器时候，需要校验先过滤一下
• 服务器再做一次过滤
• 直接在输出的时候过滤
• function encodeHtml(str) {
  return str
  .replace(/&/g, "&")
  .replace(/"/g, """)
  .replace(/'/g, "'")
  .replace(/&/g, "&")
  .replace(/, "<")
  .replace(/>/g, ">")
  }

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的内容。