001: 能不能说一说XSS攻击?

什么是 XSS 攻击?

XSS 全称是 Cross Site Scripting(即跨站脚本),为了和 CSS 区分,故叫它XSS。XSS 攻击是指浏览器中执行恶意脚本(无论是跨域还是同域),从而拿到用户的信息并进行操作。

这些操作一般可以完成下面这些事情:

  1. 窃取Cookie
  2. 监听用户行为,比如输入账号密码后直接发送到黑客服务器。
  3. 修改 DOM 伪造登录表单。
  4. 在页面中生成浮窗广告。

通常情况,XSS 攻击的实现有三种方式——存储型反射型文档型。原理都比较简单,先来一一介绍一下。

存储型

存储型,顾名思义就是将恶意脚本存储了起来,确实,存储型的 XSS 将脚本存储到了服务端的数据库,然后在客户端执行这些脚本,从而达到攻击的效果。

常见的场景是留言评论区提交一段脚本代码,如果前后端没有做好转义的工作,那评论内容存到了数据库,在页面渲染过程中直接执行, 相当于执行一段未知逻辑的 JS 代码,是非常恐怖的。这就是存储型的 XSS 攻击。

反射型

反射型XSS指的是恶意脚本作为网络请求的一部分

比如我输入:

http://sanyuan.com?q=<script>alert("你完蛋了")</script>

这样,在服务器端会拿到q参数,然后将内容返回给浏览器端,浏览器将这些内容作为HTML的一部分解析,发现是一个脚本,直接执行,这样就被攻击了。

之所以叫它反射型, 是因为恶意脚本是通过作为网络请求的参数,经过服务器,然后再反射到HTML文档中,执行解析。和存储型不一样的是,服务器并不会存储这些恶意脚本。

文档型

文档型的 XSS 攻击并不会经过服务端,而是作为中间人的角色,在数据传输过程劫持到网络数据包,然后修改里面的 html 文档

这样的劫持方式包括WIFI路由器劫持或者本地恶意软件等。

防范措施

明白了三种XSS攻击的原理,我们能发现一个共同点: 都是让恶意脚本直接能在浏览器中执行。

那么要防范它,就是要避免这些脚本代码的执行。

为了完成这一点,必须做到一个信念,两个利用

一个信念

千万不要相信任何用户的输入!

无论是在前端和服务端,都要对用户的输入进行转码或者过滤

如:

<script>alert('你完蛋了')</script>

转码后变为:

&lt;script&gt;alert(&#39;你完蛋了&#39;)&lt;/script&gt;

这样的代码在 html 解析的过程中是无法执行的。

当然也可以利用关键词过滤的方式,将 script 标签给删除。那么现在的内容只剩下:

什么也没有了:)

利用 CSP

CSP,即浏览器中的内容安全策略,它的核心思想就是服务器决定浏览器加载哪些资源,具体来说可以完成以下功能:

  1. 限制其他域下的资源加载。
  2. 禁止向其它域提交数据。
  3. 提供上报机制,能帮助我们及时发现 XSS 攻击。

利用 HttpOnly

很多 XSS 攻击脚本都是用来窃取Cookie, 而设置 Cookie 的 HttpOnly 属性后,JavaScript 便无法读取 Cookie 的值。这样也能很好的防范 XSS 攻击。

总结

XSS 攻击是指浏览器中执行恶意脚本, 然后拿到用户的信息进行操作。主要分为存储型反射型文档型。防范的措施包括:

  • 一个信念: 不要相信用户的输入,对输入内容转码或者过滤,让其不可执行。
  • 两个利用: 利用 CSP,利用 Cookie 的 HttpOnly 属性。

微信公众号: 前端三元同学

获取更多资料/联系加交流群