这篇文章主要以前端安全中的XSS攻击来说起,对XSS攻击的定义、如何实现XSS攻击,以及对XSS的攻击防范的方法做尽可能详尽的探讨。希望你能从这篇文章中有所收获。下一篇我们一起来探讨前端的XSRF攻击(然而还没开始写,欢迎催更)。
什么是XSS攻击?
Cross-site scripting (XSS) is a type of security vulnerability typically found in web applications. XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users.
——Wikipedia
XSS 是 Cross-site scripting 的简称,为了与 CSS (层叠样式表)区分使用了 X
。通俗来说就是跨站点脚本攻击,通过在客户端注入可执行脚本的方式来实现攻击。
如果你对 XSS 没有直观的认识,我推荐你在 Google 的这个 XSS game 的网站体验一下,如何实现 XSS 攻击,有6个有趣的小游戏,需要你亲手试试看,网上也能找到对应的参考答案。
在站点注入脚本之后,黑客就可以通过脚本做很多的“坏事”,例如:窃取Cookie信息、监听用户行为、修改DOM和在页面生成浮窗广告。这些都会使得用户的信息和行为变得不安全。
XSS攻击的注入方式:
- 劫持HTML文件,通过
<script>
标签进行注入(参考 XSS game-Level2); - 在可执行的JS中,通过拼接数据来执行恶意脚本(参考 XSS game-Level3);
- 在页面可执行的元素中,添加可执行代码,例如
javascript:xxx
(参考 XSS game-Level5); - 在onload、onerror、onclick等事件中,注入不受控的代码。
XSS的分类
XSS攻击的常见分类有存储型XSS、反射型XSS和DOM型XSS,只有DOM型的XSS是于前端有关的,其他的防范主要是在后端方面。
存储型XSS
这里有一个小案例,比如你在看一个直播,这个直播是可以发送弹幕的,如果这个时候有一个人发送了一段 <script>bad code</script>
代码,其中代码的作用是获取当前直播的DOM节点,然后隐藏该元素。当弹幕从黑客端发送到服务器,再从服务器发送到每一个用户的页面上,在没有安全处理的情况下,这一场直播,就在这个页面“结束了”。
👆这是一个真实的案例,这个案例中发送的那一段代码,就是存储型的XSS攻击,恶意的脚本存储到后端的数据库,然后又传输回到每一个用户的页面,从而发生了攻击。
对存储型XSS攻击的防范
最简单直接的防范方式就是对UGC(用户生成的内容)进行转义,对一些特殊的字符,例如"& < > " ' /
"进行转义,但是根据不同的场景来看,这是不够完善的,你可以还需要进一步的对HTML的内容(标签、文字、内容……)、CSS的内联样式、内联的JS和JSON,包括跳转的链接做一一的处理。
通过对文本的转义来防止XSS攻击的这部分内容可以参考《Web安全系列(四):XSS 的防御》。(看完你会发现,做好安全防护不仅仅是技术活,也是体力活。)
反射型XSS
这一次我们的主角还是恶意脚本,但是这一次恶意脚本不是存储在数据库了,而是出现在URL里。强烈推荐你去玩一玩 Google XSS Game - Solving Level 5 这一关,再继续往下学习,我在这里等你。
区别反射型XSS攻击和存储型XSS攻击的点是:恶意代码存储的位置。
DOM型XSS
DOM型的XSS攻击与服务器没有太大的关系,不需要和服务器交互,直接通过HTTP劫持,修改对应的HTML文件来实现恶意代码的注入。
对DOM型XSS攻击的防范
为了不让恶意代码在网页中执行,谨记不能将不可信的数据当作代码来执行。
在DOM API中建议使用 .textContent/.setAttribute()
来替代 .innerHTML/.outerHTML/document.write()
。在Vue项目中不建议使用v-html
。
如何防止XSS攻击
上面介绍来一些防止XSS攻击的方法,其实对XSS攻击的防范主要分为三个方面:转义、CSP和使用HttpOnly
转义
在存储型XSS和反射型XSS攻击中,这个是一个关键的防范方式,通过对不同类型的文本和数据做对应的转义和很好的防止大部分的XSS攻击。
CSP
CSP是Content Security Policy,在实际应用中,我们是通过在HTTP头部添加Content-Security-Policy
的字段来实现的。
常见的CSP头字段如下:
Content-Security-Policy: default-src 'self' *.trusted.com
目前市面上浏览器对CSP的支持还是不错的:
在较为严格的CSP条件下,对XSS攻击的防范有以下的作用:
- 禁止加载外域代码,防止复杂的攻击逻辑;
- 禁止外域提交,网站被攻击后,用户数据不会泄漏;
- 禁止内联脚本执行;
- 禁止未授权的脚本执行;
- 通过CSP的上报功能,便于修复问题。
CSP的特性也能防止数据注入类型的攻击(data injection attacks)
HttpOnly
HttpOnly 是 Cookie 的一个属性,在设置Cookie的时候可以对Cookie设置该属性,该属性主要是防止Cookie被JS脚本获取,只能通过Http传输和访问。
我们需要明确的是HttpOnly本质上并不是防止XSS攻击的,主要是起到缓解的作用,在恶意脚本执行之后,是无法获取到对应的Cookie,防止来下一步攻击的进行和用户数据的进一步泄漏。
类型 | 存储区 | 插入点 |
---|---|---|
存储型XSS | 后端数据库 | HTML |
反射型XSS | URL | HTML |
DOM型XSS | 后端数据库/前端存储/URL | 前端Javascript |
以上就是对XSS攻击的知识点的分享,希望能对你有帮助。
参考资料: