持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情
前端攻击手段有哪些，该如何预防？
前端攻击手段也是一个很重要的技术点，在我们的项目达到了一定的量级之后，时不时就会收到各种各样的攻击，所以本章，我们来讲一下前端攻击手段有哪些，该如何预防？
XSS【1】
XSS是前端攻击中最常见的也是最著名的一个攻击手段。
- XSS （Cross-site scripting）：跨站脚本攻击
手段： 黑客将 JS 脚本插入到网页内容中，渲染时执行 JS 代码
- 数据从一个不可靠的链接进入到一个 Web 应用程序。
- 没有过滤掉恶意代码的动态内容被发送给 Web 用户。
例子：
例子中，我们创建了一个 输入框，并且我们使用 v-html命令进行解析输入的文字
<img src="0" onerror="alert(11)" />
当我们输入如上的字符串的时候，页面就会出现一个空白的图片。。。当然还有其他的情况，这里就进行一些简单的演示。。
甚至还可以这样获取你的 cookie。。。
预防
特殊字符替换(前端或者后端)，问题的源头在于js代码的注入，要注意两头的防范：
- 输入
在提交表单时，前端最好将文本内容转为html实体编码，也就是过滤掉<script>、<a>这样的内容，然后再提交到后台去。当然保险起见，后台也要再做一遍html实体转码，然后再入库。
- 输出
在显示文本内容时，最好也要做一次html实体编码转换后再显示，防止<script>标签生效。
ps: 其实在vue、react中会相对好一点，但是如果使用 v-html或者dangerouslySetInnerHTML的话....还是会出现这个情况。
CSRF【2】
这个也是一个比较常见的攻击手段
Cross site request forgery：跨站请求伪造（CSRF）是一种冒充受信任用户，向服务器发送非预期请求的攻击方式。
手段
黑客诱导用户去访问另一个网站的接口，伪造请求。
例如
这些非预期请求可能是通过在跳转链接后的 URL 中加入恶意参数来完成：
<img src="https://www.example.com/index.php?action=delete&id=123">
对于在 https://www.example.com 有权限的用户，这个 <img> 标签会在他们根本注意不到的情况下对 https://www.example.com 执行这个操作，即使这个标签根本不在 https://www.example.com 内亦可。
预防
- 严格的跨域请求限制
- 为 cookie 设置
SameSite不随跨域请求被发送Set-Cookie: key1=val1; key2=val2; SameSite=Strict; - 关键接口使用短信验证码等双重验证
- 实现 RESTful API
- 增加 secure token
- 等等...
点击劫持
Click Jacking
手段
诱导界面上蒙一层透明的 iframe，诱导用户点击；黑客在自己的网站，使用隐藏的 <iframe> 嵌入其他网页，诱导用户按顺序点击。
预防
- 使用 JS 预防
if (top.location.hostname !== self.location.hostname) {
alert("您正在访问不安全的页面，即将跳转到安全页面！")
top.location.href = self.location.href
}
- 增加 http header
X-Frame-Options:SAMEORIGIN，让<iframe>只能加载同域名的网页。
PS：点击劫持，攻击那些需要用户点击操作的行为。CSRF 不需要用户知道，偷偷完成。
拓展
DDoS【3】
分布式拒绝服务(Distributed Denial of Service)
手段
分布式、大规模的流量访问，使服务器瘫痪
ps: 这个其实和前端不相关了，阮一峰的网站就曾遭遇过 DDoS 攻击 www.ruanyifeng.com/blog/2018/0…
SQL 注入
所谓SQL注入式攻击，就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串，欺骗服务器执行恶意的SQL命令。
场景
假设我们正在登录
- 输入用户名：zhangsan
- 输入密码：123
然后服务端去数据库查询。
假设的登录查询的正确sql为
SELECT * FROM users WHERE username = 'admin' AND password = '123'
接下来我们会判断是否找到该用户。
但是！ 但是如果后端没做防注入处理，用户输入为 ' delete from users where 1=1; -- ，密码 '123'
那生成的 sql 语句就是 select * from users where username='' delete from users where 1=1; --' and password='123'
这样就会把 users 数据表全部删除。
防止 SQL 注入：服务端进行特殊字符转换，如把 ' 转换为 \'
详细
【1】Cross-site scripting（跨站脚本攻击）
【2】CSRF
【3】DDoS