这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

前言

随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然，浏览器自身也在不断在进化和发展，不断引入 CSP、Same-Site Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要前端技术人员不断进行“查漏补缺”，那么这篇文章就带领大家梳理Web安全的知识点，此篇是攻击篇，下篇将会带来防御篇~

一、 XSS（跨站脚本攻击）

XSS (Cross-Site Scripting)，跨站脚本攻击，因为缩写和CSS重叠，所以只能叫 XSS。跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或JavaScript进行的一种攻击。

1. XSS的一些特点

通常难以从UI上感知（暗地执行脚本）
窃取用户信息
绘制UI（例如弹窗），诱骗用户点击/填写表单

2. XSS demo

提交这段恶意脚本后，在服务端渲染返回结果之后，这段恶意脚本就被恶意注入到HTML中，整个攻击就完毕了。

3. XSS的分类

存储型XSS

特点：

恶意脚本被存在数据库中
访问页面——>读数据——> 被攻击
危害最大，对全部用户可见存储型 XSS 的攻击步骤：

攻击者将恶意代码提交到目标网站的数据库中。
用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

举个🌰子，假如你正开开心心回家看着爱奇艺，在爱奇艺中了XSS攻击，你的用户名密码等可能就被窃取，从此电商网站上多了一个共享账户，而你还被踢了！！！😭

反射型XSS

特点：

不涉及数据库
从URL上攻击

反射型 XSS 的攻击步骤：

攻击者构造出特殊的 URL，其中包含恶意代码。
用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。 URL：服务器端代码：

如果不进行过滤，那么就会发生XSS攻击。

反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。

DOM型XSS

特点：

不需要服务器参与
恶意攻击的发起 + 执行，全在浏览器完成

DOM 型 XSS的攻击步骤：

攻击者构造出特殊的 URL，其中包含恶意代码。
用户打开带有恶意代码的 URL。
用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。 URL:

浏览器端代码：

DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

基于浏览器的XSS攻击

特点：

利用了浏览器渲染DOM的特性（独特优化）
不同浏览器，会有区别（按浏览器进行攻击）

二、 CSRF（跨站伪站请求）

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

1. CSRF的一些特点

在用户不知情的前提下
利用用户权限（cookie）
构造指定HTTP请求，窃取或修改用户敏感信息

2. CSRF demo

举个🌰子，用户收到一封邮件，然后其中有一个链接，用户点击链接跳转到恶意的页面B，在恶意页面B中发出了一个向域名A的请求，此时这个请求会带上域名A特有的cookie,域名A所处的服务器接受到这个请求之后去验证cookie,发现是合法用户，认为这是可以处理的请求，执行请求，返回结果。这就是跨站伪造请求的思路

受害者登录a.com，并保留了登录凭证（Cookie）。
攻击者引诱受害者访问了b.com。
b.com 向 a.com 发送了一个请求：a.com/act=xx。浏览器会默认携带a.com的Cookie。
a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求。
a.com以受害者的名义执行了act=xx。
攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作。

3. CSRF攻击的分类

GET类型的CSRF

GET类型的CSRF利用非常简单，只需要一个HTTP请求，一般会这样利用：

 ![](https://awps-assets.meituan.net/mit-x/blog-images-bundle-2018b/ff0cdbee.example/withdraw?amount=10000&for=hacker)

在受害者访问含有这个img的页面后，浏览器会自动向http://bank.example/withdraw?account=xiaoming&amount=10000&for=hacker发出一次HTTP请求。bank.example就会收到包含受害者登录信息的一次跨域请求。

POST类型的CSRF

这种类型的CSRF利用起来通常使用的是一个自动提交的表单，如：

 <form action="http://bank.example/withdraw" method=POST>
    <input type="hidden" name="account" value="xiaoming" />
    <input type="hidden" name="amount" value="10000" />
    <input type="hidden" name="for" value="hacker" />
</form>
<script> document.forms[0].submit(); </script>

访问该页面后，表单会自动提交，相当于模拟用户完成了一次POST操作。

POST类型的攻击通常比GET要求更加严格一点，但仍并不复杂。任何个人网站、博客，被黑客上传页面的网站都有可能是发起攻击的来源，后端接口不能将安全寄托在仅允许POST上面。

三、 SQL注入

SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，在管理员不知情的情况下实现非法操作，以此来实现欺骗，执行非授权的任意查询，从而进一步得到相应的数据信息。

四、注入不止SQL

CLI
OS command
SSRF，服务端伪造请求，严格而言，SSRF不是injection，但是原理类似。

五、 DoS(Denial of Service)

通过某种方式（构造特定请求），导致服务器资源被显著消耗，来不及响应更多请求，导致请求挤压，进而雪崩效应。

正则表达式——贪婪模式

重复匹配时[?] vs [no ?]：满足“一个”即可 vs 尽量多

基于正则表达式的Dos

贪婪：n次不行？n-1次再试试？——回溯

六、 DDoS(Distributed DoS)

短时间内，来自大量僵尸设备的请求流量，服务器不能及时完成全部请求，导致请求堆积，进而雪崩效应，无法响应新请求。

不搞复杂的，量大就完事儿了

DDoS攻击特点:

直接访问IP
任意API
消耗大量带宽（耗尽）

SYN洪水攻击

这个是最著名的攻击方式，攻击者会发生海量的SYN到服务器，服务器执行正常流程，但是攻击者一直发送SYN并没有发生ACK，服务器此时没法完成TCP的三次握手，所有的链接都不能被释放，很快达到最大连接数，服务器就不能响应请求了，这就完成了DDoS攻击。

七、中间人攻击

中间人攻击就是浏览器和服务器彼此以为在相互沟通，而实际上是中间人在之中去窃取信息修改请求，比较典型的中间人有恶意的APP，譬如Webview,譬如你家的路由器。中间人为什么能进行上述进行上述攻击，主要靠下面三点：

明文传输
信息篡改不可知
对方身份未验证

最后

⚽到这，我们Web安全的攻击篇已经介绍完啦，相信阅读完你一定有了不小的收获！下篇将是Web安全防御篇~，可以关注我了解最新文章喔！
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！😘
🏀GitHub 博客地址: github.com/Awu1227 。
🏉笔者还有其他专栏，欢迎阅读~
🏐玩转CSS之美
🎱Vue从放弃到入门
🎳深入浅出JavaScript

💣深入Web安全（攻击篇)

前言