---
url: https://sugarat.top/bigWeb/browser/safe.md
---
# 安全
在现代网络中，安全相关的问题是非常繁杂的，种类颇多
这里只介绍Web开发中经常碰到的一些安全问题：
* SQL注入
* XSS
* CSRF
* 点击劫持
* 中间人攻击
## SQL注入
### 什么是SQL注入
后台人员使用用户输入的数据进行拼接组装SQL查询语句时,遇到恶意输入就会返回不应该返回的内容
### 简单示例
**普通的查询语句**
```sql
SELECT * FROM articles WHERE id = $id
```
**1. 客户端发送的正常请求**
```js
/api/articlres/article?id = 12
```
拼接后的SQL
```sql
SELECT * FROM articles WHERE id = 12
```
**2. 注入SQL发送的恶意请求**
```js
/api/articlres/article?id=1%20or%201=1
```
这里的 `%20`是空格经过UrlEncode过后的内容
拼接后的sql
```sql
SELECT * FROM articles WHERE id = 12 or 1=1
```
这样就扩大了查询数据的范围，导致查询异常或者 返回原本不该返回的数据
### 如何防范
加入过滤和验证机制：
* 将参数的所有内容当做值，而不是当做字符串的一部分
* 使用正则表达式过滤传入的参数
* 检查传入内容是否包含非法的关键字
## XSS
### 什么是 XSS
`XSS`全称`Cross Site Scripting` ，`即跨站脚本`攻击
攻击者可以将代码注入页面，然后可以进行一系列损害用户利益的事情
* 窃取Cookie
* 监听用户行为
* 修改 DOM 伪造登录表单
* 在页面中生成浮窗广告
* 恶意跳转
* ...
恶意代码未经过滤，与网站正常的代码混在一起，以至于浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行
XSS 可以分为两类：`持久型`和`非持久型`
**持久型**
持久型也就是攻击的代码被服务端写入进数据库中,在页面加载的时候执行
常见于服务端渲染的时候出现
示例
```html
Document
```
```js
function renderPage() {
// ajax获取数据
// 解析字符串生成对应dom节点
const script = document.createElement('script')
script.innerHTML = 'alert(123)'
document.body.appendChild(script)
}
renderPage()
```
**非持久型**
一般通过修改 URL 参数的方式加入攻击代码，诱导用户访问链接从而进行攻击
```html
{{name}}
```
**jquery触发此错误示例**
```html
Document
大标题
```
test.js
```js
const data = [
'1',
'2',
''
]
data.forEach(str=>{
$('#list').append(`${str}`)
})
```
### 如何防范
#### 转义字符
> 不相信任何用户的输入
转译用户输入的内容
```js
function escape(str) {
str = str.replace(/&/g, '&')
str = str.replace(//g, '>')
str = str.replace(/"/g, '&quto;')
str = str.replace(/'/g, ''')
str = str.replace(/`/g, '`')
str = str.replace(/\//g, '/')
return str
}
```
或者利用现代浏览器的特性
自动处理特殊字符
```js
function filterStr(str) {
const div = document.createElement('div')
div.textContent = str
return div.innerHTML
}
filterStr('') // <div></div>
```
### CSP
CSP - 内容安全策略
本质上就是建立白名单，明确告诉浏览器哪些外部资源可以加载和执行
可以通过这种方式来尽量减少 XSS 攻击。
**使用方式**
* 设置 HTTP Header 中的 Content-Security-Policy
* 设置 meta 标签的方式 ``
```html
```
上述策略解释
* 脚本：只信任当前域名
* `