[网络协议]Web 前端安全问题 - XSS、CSRF、界面操作劫持

前言

最近在读一本书《Web 前端黑客技术揭秘》。几年前的书了，虽然里面有些技术知识已经过时了，但基础知识还是不变的。本文就当作是一篇读后感吧。

一、XSS （Cross Site Scripting），跨站脚本攻击

主要是指攻击者可以在页面中插入恶意脚本代码，当被攻击者访问页面时，浏览器会解析并执行这些恶意代码，从而，攻击者可以突破页面访问权限，冒充受害者。

XSS 主要有三种类型：反射性 XSS（也叫非持久型 XSS）、存储型 XSS（也叫持久型 XSS）、DOM 型 XSS。

1??、反射型 XSS：指攻击者将恶意代码拼写在 URL 中，作为输入提交到服务端，服务端解析后响应，在返回的响应内容中也带上了这段 XSS 代码，最后浏览器解析执行了这段代码。这个过程就像一次反射，故称为反射型 XSS。

2??、存储型 XSS：提交的恶意代码会存储在服务端（不管是数据库、内存、还是文件系统等），每次访问目标页面都会触发 XSS。（存储型 XSS 的攻击是最隐蔽，危害最大的。）

例如：留言板、个性签名等。

用户提交一条包含 XSS 代码的留言提交到服务端，如果这段代码没有进行任何处理直接存储到数据库，那么目标用户查看留言板时，浏览器当作正常的 HTML 与 JS 解析执行了这段代码，就触发了 XSS 攻击。

3??、DOM 型 XSS：相较于反射型 XSS 而言，DOM XSS 不要经过服务端解析响应的直接参与，触发 XSS 靠的就是浏览器端的 DOM 解析，可以认为完全是客户端的事情。

危害：

• 挂马；
• 盗取用户 Cookie；
• Dos（拒绝服务）客户端浏览器；
• 钓鱼攻击，高级钓鱼技巧；
• 编写针对性的 XSS 病毒，删除目标文章、恶意篡改数据等；
• 劫持用户 Web 行为，甚至进一步渗透内网；
• 爆发 Web 2.0 蠕虫；
• 蠕虫式的 DDos 攻击；
• 蠕虫式挂马攻击、刷广告、刷流量、破坏网上数据等。

XSS 防御手段：

1. ?参数校验。
2. ?字符转义。

二、CSRF (Cross Site Request Forgery) ，跨站请求伪造

攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到以受害者名义对被攻击的网站执行某项操作的目的。和 XSS 攻击方式相比，CSRF 隐蔽性更强。

?CSRF 类型

• 按照请求类型区分：GET 型、?POST 型
• 按照攻击方式区分：HTML CSRF 攻击、JSON HiJacking 攻击、Flash CSRF 攻击?

1??、GET 型：简单的使用 img 标签发送一个 http?请求即可。例如：

 <img src="http://www.a.com/blog/del?id=1" /> 

在受害者访问含有这个 img 的页面后，浏览器会自动向http://www.a.com/blog/del?id=1发出一次HTTP请求，a.com 就会收到包含受害者登录信息的一次跨域请求。

2??、POST 型：通常利用一个自动提交的表单发送一个 post 请求。例如：

 <form action="http://www.a.com/blog/add" method=POST>
    <input type="hidden" name="title" value="hi" />
    <input type="hidden" name="content" value="csrf_here" />
</form>
<script> document.forms[0].submit(); </script> 

当目标网站 A 的用户被欺骗访问了恶意网站 B 的该页面时，一个跨域的伪造的 POST 表单请求就发出了。同时，这个请求带上了目标网站 A 的用户 Cookie。

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

3??、HTML CSRF 攻击：发起 CSRF 请求的可以是 HTML 元素，这一类是最普遍的 CSRF 攻击。

HTML 中能够设置 src/href 等链接地址的标签都可以发起一个 GET 请求，如：

<link href="">
<img src="">
<iframe src="" frameborder="0"></iframe>
<script src=""></script>
<a href=""></a>
<video src=""></video>
<audio src=""></audio>

CSS 样式中的：

@import ""
background: url("")

还有通过 JavaScript 动态生成的标签对象或 CSS 对象发起的 GET 请求，而发出的 POST 请求只能通过 form 提交方式。

危害：

• ?篡改目标网站上的用户数据；
• ?盗取用户隐私数据；
• ?作为其他攻击向量的辅助攻击手法；
• ?传播 CSRF 蠕虫。

防御手段：

• ?同源检测（Origin 和 Referer 验证）。
• ?Token 验证 或者 双重 Cookie 验证 以及配合 Samesite Cookie。

三、界面操作劫持

这是一种基于视觉欺骗的 Web 会话劫持攻击，它通过在网页的可见输入控件上覆盖一个不可见的框 (iframe)，使得用户误以为在操作可见控件，而实际上用户的操作行为被其不可见的框所劫持，执行不可见框中的恶意劫持代码，从而完成在用户不知情的情况下窃取敏感信息、篡改数据等攻击。

主要分为三种：

• 点击劫持（Clickjacking）
• 拖放劫持（Drag&Drop jacking）
• 触屏劫持（Tapjacking）

举例：

A 页面上有一个按钮，点击时调用 alert() 函数。

<button onclick="alert('A页面!')">A 页面按钮</button>

B 页面上有一个没有绑定点击事件的按钮，同时在 firame 中引入 A 页面，通过设置它的样式，让 A 页面透明显示，并将其中的按钮与 B 页面的按钮位置重叠。

<button>当前页面按钮</button>
<iframe src="http://www.a.com/a.html" frameborder="0" style="opacity: 0.5; position:absolute; left: 0; top:0"></iframe>

当用户想点击 B 页面按钮时，实际上点击的却是 A 页面按钮。

危害：

• 删除与篡改数据；
• 偷取隐私甚至爆发蠕虫。

防御手段：

• X-Frame-Options 防御；
• Frame Busting 脚本防御；
• 使用 token 进行防御。