# 安全防范

XSS 跨域脚本攻击
CSP 内容安全策略
CSRF 跨域请求伪造
- CSRF 防御
点击劫持
- 防御手段
中间人攻击

# XSS 跨域脚本攻击

TIP

XSS 攻击简单来说就是攻击者想尽一切办法把可执行的代码嵌入到页面中，以达到非法窃取某些数据或者破坏的目的。

依据情景的不同，XSS 攻击可分为几种类型。

# 反射性 XSS

反射性 XSS 也叫做非持久性 XSS，是指发生请求时，XSS 代码会出现在请求的 URL 中，作为参数提交到服务器，服务器接受并响应。响应结果中包含 XSS 代码，最后通过浏览器进行解析并执行，一个反射性 XSS 可能如下所示

function ajax(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(url.split('?')[1])
    }, 1500)
  })
}
var url = 'https://www.baidu.com/getUserInfo?name=<script>alert(document.cookie)</script>'
ajax(url).then(data => {
  document.body.insertAdjacentHTML('beforeend', data.split('=')[1])
})

1
2
3
4
5
6
7
8
9
10
11

# 存储型攻击

存储型 XSS 也叫持久性 XSS，它的主要攻击方式是将代码发送到服务器，最常见的存储型 XSS 攻击就是评论或者浏览攻击，一个存储型 XSS 可能如下图所示：

储存性XSS攻击

# DOM 型攻击

将攻击脚本写在 URL 中，诱导用户点击该 URL，如果 URL 被解析，那么攻击脚本就会被运行。和前两者的差别主要在于 DOM 型攻击不经过服务端

# XSS 防御

TIP

输入检查：将由用户输入的内容，进行必要的标签例如<script>、<iframe>转义，包括<、>、/等, 另外过滤一些危险属性或者方法，例如onerror方法、href属性、src属性等
设置 httpOnly：在服务端设置cookit属性httpOnly防止客户端通过document.cookie读取
开启 CSP：即开启白名单，可阻止白名单以外的资源加载和运行

# CSP 内容安全策略

TIP

CSP 内容安全策略本质上来说是建立白名单机制，告诉浏览器哪些外部资源可以加载和执行，我们只需要配置，拦截主要交给浏览器。

通常有两种方法设置 CSP：

通过设置HTTP Header的Content-Security-Policy
通过meta标签来设置，例如：<meta http-equiv="Content-Security-Policy">

# CSRF 跨域请求伪造

TIP

CSRF 攻击原理上是攻击者伪造一个后端请求地址，诱导用户进行点击，如果用户在已登录的情况下点击了这个危险链接，则后端服务器会认为是用户在正常访问，攻击者从而可以从请求中拿到一些信息，进而进行攻击。

# CSRF 防御

TIP

CSRF 防御有如下几种方式：

Get请求不对数据进行修改
设置 SameSite：不让第三方网站访问用户的Cookie，可以通过Cookie的SameSite属性
验证 Token：在进行请求时，附加refer验证和token验证
验证 Referer：通过验证请求头的 Referer 来验证来源站点，但请求头很容易伪造
阻止第三方网站请求

# 点击劫持

TIP

点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。

# 防御手段

设置 HTTP 响应头X-FRAME-OPTIONS，它可以设置DENY、SAMEORIGIN、ALLOW-FROM分别表示不允许iframe展示、只允许永远iframe展示、表示页面可以在指定来源的iframe中展示。

# 中间人攻击

TIP

中间人攻击是攻击方同时与服务端和客户端建立起了连接，并让对方认为连接是安全的，但是实际上整个通信过程都被攻击者控制了。攻击者不仅能获得双方的通信信息，还能修改通信信息。一般来说使用HTTPS协议可以有效防止中间人攻击，但并不是说HTTPS就可以高枕无忧，因为攻击者可以通过某种方式从HTTPS降级到HTTP进行访问。

中间人攻击