攻击

xss攻击

也叫跨站脚本攻击

本质

恶意代码未经过滤，与网站正常的代码混在一起，浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。

由于直接在用户的终端执行，恶意代码能够直接获取用户的信息，利用这些信息冒充用户向网站发起攻击者定义的请求。

利用了用户对特定 Web 应用程序的信任

分类

1. 反射型XSS

描述:

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

防范：

使用encodeURIComponent对url中的参数进行编码

2. DOM型状XSS

描述：

在使用 .innerHTML、.outerHTML、.appendChild、document.write()等API时，用户容易把不可信的数据作为 HTML 插到页面上。

防范：

1. 可以使用DOMPurify把脏字符串转化为干净字符串
2. 尽量使用 .innerText、.textContent、.setAttribute() 等。

3. 存储型XSS

描述:

恶意脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器传回并执行，影响范围比反射型和DOM型XSS更大。

攻击的原因

没有做好数据过滤：前端提交数据至服务端时，没有做好过滤；服务端在接受到数据时，在存储之前，没有做过滤；前端从服务端请求到数据，没有过滤输出。

防范：

• 前端数据传递给服务器之前，先转义/过滤(防范不了抓包修改数据的情况)
• 服务器接收到数据，在存储到数据库之前，进行转义/过滤
• 前端接收到服务器传递过来的数据，在展示到页面前，先进行转义/过滤

csrf攻击

也叫跨站请求伪造攻击

本质

它强制经过身份验证的用户向当前对其进行身份验证的 Web 应用程序提交请求。利用了 Web 应用程序对经过身份验证的用户的信任。

如果 CSRF 攻击无法区分单个用户生成的请求和未经用户同意而生成的请求，则它会利用 Web 应用程序中的漏洞

如何工作？

强制用户提交状态更改请求。

例如：

• 提交或删除记录。
• 提交交易。
• 购买产品。
• 更改密码。
• 发送消息。

防范：

通过 CSRF 令牌，CSRF 令牌是用于防止 CSRF 攻击的安全随机令牌。令牌是唯一的，并且应该具有很大的随机值以使其难以猜测。

CSRF 安全应用程序为每个用户会话分配一个唯一的 CSRF 令牌。这些标记被插入到与关键服务器端操作相关的 HTML 表单的隐藏参数中。然后将它们发送到客户端浏览器。

DOMPurify

参考：
https://github.com/cure53/DOMPurify

1. 下载

npm i dompurify
1

1. 引入

import DOMPurify from 'dompurify'
1

1. 将脏字符串转化为干净字符串

const res = DOMPurify.sanitize(this.str)
1

例子：

// 插值表达式 // template 代表组件要渲染的结构
<template>
  <div id="app">
    <!-- 解析标签 -->
    <!-- 不安全 -->
    <div v-html="str"></div>
    <!-- 安全 -->
    <div v-html="clean()"></div>
  </div>
</template>

// script 用于提供组件的逻辑代码，需要默认导出一个对象
<script>
import DOMPurify from 'dompurify'
export default {
  data() {
    return {
      str: '<img src="https://img.syt5.com/2019/1105/20191105050742778.jpg.564.300.jpg" οnlοad="console.log(123)"/>'
    }
  },
  methods: {
    clean() {
      const res = DOMPurify.sanitize(this.str)
      console.log(res)
      return res
    }
  }
}
</script>

// style 用于提供组件的样式
<style></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

CSP安全策略

参考：
https://content-security-policy.com/

https://blog.csdn.net/weixin_47450807/article/details/123224654

介绍

CSP 本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。

分类

1. Content-Security-Policy
   配置好并启用后，不符合CSP的外部资源就会被阻止加载
2. Content-Security-Policy-Report-Only
   表示不执行限制选项，只是记录违反限制的行为。它必须与resport-uri选项配合使用

开启方式

通常可以通过两种方式来开启 CSP：

1. 设置 HTTP Header 中的 Content-Security-Policy

"Content-Security-Policy":策略
"Content-Security-Policy-Only":策略
1
2
3

1. 设置 meta 标签的方式

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
1

如果HTTP头与Meta定义同时存在，则优先采用HTTP中的定义

写法

例如

// 限制所有的外部资源，都只能从当前域名加载
Content-Security-Policy: default-src 'self'

// default-src 是 CSP 指令，多个指令之间用英文分号分割；多个指令值用英文空格分割
Content-Security-Policy: default-src https://host1.com https://host2.com; frame-src 'none'; object-src 'none'  

// 错误写法，第二个指令将会被忽略
Content-Security-Policy: script-src https://host1.com; script-src https://host2.com

// 正确写法如下
Content-Security-Policy: script-src https://host1.com https://host2.com

// 通过report-uri指令指示浏览器发送JSON格式的拦截报告到某个地址
Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;
1
2
3
4
5
6
7
8
9
10
11
12
13
14