攻击
xss攻击
也叫跨站脚本攻击
本质
恶意代码未经过滤,与网站正常的代码混在一起,浏览器无法分辨哪些脚本是可信的,导致恶意脚本被执行。
由于直接在用户的终端执行,恶意代码能够直接获取用户的信息,利用这些信息冒充用户向网站发起攻击者定义的请求。
利用了用户对特定 Web 应用程序的信任
分类
1. 反射型XSS
描述:
反射型 XSS 漏洞常见于通过 URL 传递参数的功能,如网站搜索、跳转等。由于需要用户主动打开恶意的 URL 才能生效,攻击者往往会结合多种手段诱导用户点击。
防范:
使用encodeURIComponent对url中的参数进行编码
2. DOM型状XSS
描述:
在使用 .innerHTML
、.outerHTML
、.appendChild
、document.write()
等API时,用户容易把不可信的数据作为 HTML 插到页面上。
防范:
- 可以使用
DOMPurify
把脏字符串转化为干净字符串 - 尽量使用
.innerText
、.textContent
、.setAttribute()
等。
3. 存储型XSS
描述:
恶意脚本永久存储在目标服务器上。当浏览器请求数据时,脚本从服务器传回并执行,影响范围比反射型和DOM型XSS更大。
攻击的原因
没有做好数据过滤:前端提交数据至服务端时,没有做好过滤;服务端在接受到数据时,在存储之前,没有做过滤;前端从服务端请求到数据,没有过滤输出。
防范:
- 前端数据传递给服务器之前,先转义/过滤(防范不了抓包修改数据的情况)
- 服务器接收到数据,在存储到数据库之前,进行转义/过滤
- 前端接收到服务器传递过来的数据,在展示到页面前,先进行转义/过滤
csrf攻击
也叫跨站请求伪造攻击
本质
它强制经过身份验证的用户向当前对其进行身份验证的 Web 应用程序提交请求。利用了 Web 应用程序对经过身份验证的用户的信任。
如果 CSRF 攻击无法区分单个用户生成的请求和未经用户同意而生成的请求,则它会利用 Web 应用程序中的漏洞
如何工作?
强制用户提交状态更改请求。
例如:
- 提交或删除记录。
- 提交交易。
- 购买产品。
- 更改密码。
- 发送消息。
防范:
通过 CSRF 令牌,CSRF 令牌是用于防止 CSRF 攻击的安全随机令牌。令牌是唯一的,并且应该具有很大的随机值以使其难以猜测。
CSRF 安全应用程序为每个用户会话分配一个唯一的 CSRF 令牌。这些标记被插入到与关键服务器端操作相关的 HTML 表单的隐藏参数中。然后将它们发送到客户端浏览器。
DOMPurify
参考: https://github.com/cure53/DOMPurify
- 下载
npm i dompurify
- 引入
import DOMPurify from 'dompurify'
- 将脏字符串转化为干净字符串
const res = DOMPurify.sanitize(this.str)
例子:
代码语言:javascript复制// 插值表达式 // 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>
CSP安全策略
参考: https://content-security-policy.com/
https://blog.csdn.net/weixin_47450807/article/details/123224654
介绍
CSP 本质上就是建立白名单,开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则,如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。
分类
Content-Security-Policy
配置好并启用后,不符合CSP的外部资源就会被阻止加载Content-Security-Policy-Report-Only
表示不执行限制选项,只是记录违反限制的行为。它必须与resport-uri选项配合使用
开启方式
通常可以通过两种方式来开启 CSP:
- 设置 HTTP Header 中的 Content-Security-Policy
"Content-Security-Policy":策略
"Content-Security-Policy-Only":策略
- 设置 meta 标签的方式
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
如果HTTP头与Meta定义同时存在,则优先采用HTTP中的定义
写法
例如
代码语言:javascript复制// 限制所有的外部资源,都只能从当前域名加载
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;