本文最后更新于：8 个月前
通过实践，更加深刻的了解认识XSS攻击
XSS实践探究
参考链接：前端安全系列（一）：如何防止XSS攻击？ - 美团技术团队 (meituan.com)
关于XSS攻击的基本介绍见另一篇介绍
一、理论
XSS攻击的三种类型：
- 储存型：恶意代码被保存到服务端，服务端返回HTML时，恶意代码一起被插入到HTML中，恶意代码立即执行
- 反射型：同上，但是恶意代码不会立即还行，注入到链接上，用户点击时执行
- DOM型：JS脚本把不可信的数据当做代码执行了
XSS攻击的两个要素：
- 攻击者提交恶意代码 —— 防范：输入过滤，前端过滤；后端也要过滤（攻击者越过前端直接向后端注入）
- 浏览器执行恶意代码 —— 防范：防止HTML出现注入、防止JS执行时，执行恶意代码
防止HTML注入的方式：
- 使用纯前端渲染，把代码和数据分开，明确告诉浏览器要设置的是文本innerText，还是属性setAttribute()，还是样式style
- 对HTML进行充分转义（模板引擎、各种转义库）
二、实践演示
1、简单版本
在本地html中，分别注入一个script脚本，恶意链接。
成功注入的条件：
- 用户输入的内容UGC，没有经过任何处理被赋值给了innerHTML
代码如下：
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
| <!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>XSS攻击</title>
<style>
section {
margin: 48px 24px;
}
input {
width: 300px;
}
</style>
</head>
<body>
<section>
<h4>（1）演示一，输入一个script脚本，并赋值给元素的innerHTML，注入脚本</h4>
输入示例1："><img src=1 onerror="alert(xss)"/> <br>
输入示例2: <script> alert('1') </script><br>
<input type="text" value="" id="input_1">
<button id="btn_1">确定</button>
<div id="display_1"></div>
<br>
<p>观察结果：输入示例1，恶意代码被执行。输入示例2，脚本没有执行（不知道为啥）</p>
</section>
<section>
<h4>（2）演示二，输入一个恶意链接，赋值给元素的innerHTML</h4>
在下面输入：<a href="javascript:alert('XSS')"> 点击一下 </a>
<br>
<br>
<textarea name="input_2" id="input_2" cols="30" rows="5"></textarea>
<br>
<button id="btn_2">确定</button>
<div id="display_2"></div>
<br>
<p>观察结果：成功注入了一个恶意链接，用户点击之后自动执行脚本</p>
</section>
<script>
const display_1 = document.getElementById('display_1')
const input_1 = document.getElementById('input_1')
document.getElementById('btn_1').addEventListener('click', () => {
display_1.innerHTML = input_1.value
})
const display_2 = document.getElementById('display_2')
const input_2 = document.getElementById('input_2')
document.getElementById('btn_2').addEventListener('click', () => {
display_2.innerHTML = input_2.value
})
</script>
</body>
</html>
|
2、复杂版本
- 评论区输入恶意代码，发送到后端被保存
- 访问文章，服务器读取文章和评论信息，拼接成HTML 发送给客户端
- 客户端收到的HTML中包含了恶意脚本，恶意脚本立即执行（储存型XSS）或点击链接之后触发执行（反射型XSS）
为了模拟出上述情况，需要：
- 服务端，能够提供 供用户访问的网页，需要是动态的，因为需要拼接评论
- 数据库，保存文章数据、评论数据
实现不易，先算了吧（苦笑）