--- theme: hydrogen highlight: atom-one-dark-reasonable --- **这是我参与8月更文挑战的第13天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831 "https://juejin.cn/post/6987962113788493831")** ## 前言随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然，浏览器自身也在不断在进化和发展，不断引入 CSP、Same-Site Cookies 等新技术来增强安全性，但是仍存在很多潜在的威胁，这需要前端技术人员不断进行“查漏补缺”，那么这篇文章就带领大家梳理Web安全的知识点，此篇是攻击篇，下篇将会带来防御篇~ ## 一、 XSS（跨站脚本攻击） `XSS (Cross-Site Scripting)`，跨站脚本攻击，因为缩写和`CSS`重叠，所以只能叫 XSS。跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的`HTML`标签或`JavaScript`进行的一种攻击。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a4e68b71f8743c1aa8c281c7c0b266d~tplv-k3u1fbpfcp-watermark.image) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/163ba1dbcae24e3e8226d0f83d9f002d~tplv-k3u1fbpfcp-watermark.image) ### 1. XSS的一些特点 - 通常难以从`UI`上感知（暗地执行脚本） - 窃取用户信息 - 绘制`UI`（例如弹窗），诱骗用户点击/填写表单 ### 2. XSS demo ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed3996d775494a9cac48d97f5bdc76d0~tplv-k3u1fbpfcp-watermark.image) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dfeeb7cef8c5497ab5bb60df0a64bcd3~tplv-k3u1fbpfcp-watermark.image) 提交这段恶意脚本后，在服务端渲染返回结果之后，这段恶意脚本就被恶意注入到HTML中，整个攻击就完毕了。 ### 3. XSS的分类 #### 存储型XSS 特点：
- 恶意脚本被存在数据库中 - 访问页面——>读数据——> 被攻击 - 危害最大，对全部用户可见存储型 `XSS` 的攻击步骤： 1. 攻击者将恶意代码提交到目标网站的数据库中。 1. 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在` HTML` 中返回给浏览器。 1. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。 1. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。举个🌰子，假如你正开开心心回家看着爱奇艺，在爱奇艺中了`XSS`攻击，你的用户名密码等可能就被窃取，从此电商网站上多了一个共享账户，而你还被踢了！！！😭 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/911a7cd79dd74f1195a33e31f13cb04e~tplv-k3u1fbpfcp-watermark.image) #### 反射型XSS 特点：
- 不涉及数据库 - 从URL上攻击反射型 `XSS` 的攻击步骤： 1. 攻击者构造出特殊的` URL`，其中包含恶意代码。 1. 用户打开带有恶意代码的 `URL` 时，网站服务端将恶意代码从` URL` 中取出，拼接在 `HTML` 中返回给浏览器。 1. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。 1. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。 URL： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa3c309a58b64634bcd0b0ef1c4cb25d~tplv-k3u1fbpfcp-watermark.image) 服务器端代码： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7ce36e745ec41aa9b558c806abfbf7c~tplv-k3u1fbpfcp-watermark.image) 如果不进行过滤，那么就会发生`XSS`攻击。 > 反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。 #### DOM型XSS 特点：
- 不需要服务器参与 - 恶意攻击的发起 + 执行，全在浏览器完成 `DOM 型 XSS`的攻击步骤： 1. 攻击者构造出特殊的` URL`，其中包含恶意代码。 1. 用户打开带有恶意代码的 `URL`。 1. 用户浏览器接收到响应后解析执行，前端 `JavaScript` 取出 `URL` 中的恶意代码并执行。 1. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。 URL: ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/144ab755bd124539ad7c807dbfaaf6ad~tplv-k3u1fbpfcp-watermark.image) 浏览器端代码： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/951c0e93899a47ef9443bf8f795a46bf~tplv-k3u1fbpfcp-watermark.image) > `DOM 型 XSS` 跟前两种 `XSS` 的区别：`DOM 型 XSS` 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 `JavaScript` 自身的安全漏洞，而其他两种 `XSS `都属于服务端的安全漏洞。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70fbf40d2ca74b9fb818d535f0cde84f~tplv-k3u1fbpfcp-watermark.image) #### 基于浏览器的XSS攻击特点：
- 利用了浏览器渲染`DOM`的特性（独特优化） - 不同浏览器，会有区别（按浏览器进行攻击） ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b39a69e40104d2c8105b1eef2f6a8ed~tplv-k3u1fbpfcp-watermark.image) ## 二、 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执行了自己定义的操作。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f3d040a24824d07a3d8c1243d353b63~tplv-k3u1fbpfcp-watermark.image) ### 3. CSRF攻击的分类 #### GET类型的CSRF GET类型的CSRF利用非常简单，只需要一个`HTTP`请求，一般会这样利用： ```js ![](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利用起来通常使用的是一个自动提交的表单，如： ```html ``` 访问该页面后，表单会自动提交，相当于模拟用户完成了一次`POST`操作。 POST类型的攻击通常比`GET`要求更加严格一点，但仍并不复杂。任何个人网站、博客，被黑客上传页面的网站都有可能是发起攻击的来源，后端接口不能将安全寄托在仅允许`POST`上面。 ## 三、 SQL注入 `SQL`注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的`SQL`语句，在管理员不知情的情况下实现非法操作，以此来实现欺骗，执行非授权的任意查询，从而进一步得到相应的数据信息。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ebdd9ea3cbf44fba5eae04ec7ade3e9~tplv-k3u1fbpfcp-watermark.image) ## 四、注入不止SQL - CLI - OS command - SSRF，服务端伪造请求，严格而言，`SSRF`不是injection，但是原理类似。 ## 五、 DoS(Denial of Service) > 通过某种方式（构造特定请求），导致服务器资源被显著消耗，来不及响应更多请求，导致请求挤压，进而雪崩效应。 **正则表达式——贪婪模式** > 重复匹配时[?] vs [no ?]：满足“一个”即可 vs 尽量多 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae76c6d34cbe4803856b2d9d84288cdd~tplv-k3u1fbpfcp-watermark.image) ### 基于正则表达式的Dos > 贪婪：n次不行？n-1次再试试？——回溯 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31dc6dffef844689a37edf46aefb140d~tplv-k3u1fbpfcp-watermark.image) ## 六、 DDoS(Distributed DoS) > 短时间内，来自大量僵尸设备的请求流量，服务器不能及时完成全部请求，导致请求堆积，进而雪崩效应，无法响应新请求。 **不搞复杂的，量大就完事儿了**
DDoS攻击特点:
- 直接访问IP - 任意API - 消耗大量带宽（耗尽） ### SYN洪水攻击 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7583e80751ca4af2add3f7562bd4920e~tplv-k3u1fbpfcp-watermark.image) 这个是最著名的攻击方式，攻击者会发生海量的`SYN`到服务器，服务器执行正常流程，但是攻击者一直发送`SYN`并没有发生`ACK`，服务器此时没法完成`TCP`的三次握手，所有的链接都不能被释放，很快达到最大连接数，服务器就不能响应请求了，这就完成了`DDoS`攻击。 ## 七、中间人攻击 > 中间人攻击就是浏览器和服务器彼此以为在相互沟通，而实际上是中间人在之中去窃取信息修改请求，比较典型的中间人有恶意的APP，譬如`Webview`,譬如你家的路由器。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5eebe40445743a0af6d603015c78c10~tplv-k3u1fbpfcp-watermark.image) 中间人为什么能进行上述进行上述攻击，主要靠下面三点： 1. 明文传输 2. 信息篡改不可知 3. 对方身份未验证 # 最后 ⚽到这，我们Web安全的攻击篇已经介绍完啦，相信阅读完你一定有了不小的收获！下篇将是Web安全防御篇~，可以关注我了解最新文章喔！
⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！😘
🏀GitHub 博客地址: https://github.com/Awu1227 。
🏉笔者还有其他专栏，欢迎阅读~
🏐[玩转CSS之美](https://juejin.cn/column/6975655497030434852)
🎱[Vue从放弃到入门](https://juejin.cn/column/6962133748536049672)
🎳[深入浅出JavaScript](https://juejin.cn/column/6975658288390078500)