前端安全 — 浅谈JavaScript拦截XSS攻击

XSS／跨站脚本攻击，是一种代码注入网页攻击，攻击者可以将代码植入到其他用户都能访问到的页面（如论坛、留言板、贴吧等）中。

如今，XSS 攻击所涉及的场景愈发广泛。越来越多的客户端软件支持 html 解析和 JavaScript 解析，比如：HTML 文档、XML 文档、Flash、PDF、QQ、一些音乐播放器以及浏览器的功能界面等。这些用户经常使用的场景往往都是 XSS 攻击的高发地带。

一、XSS攻击类型

1. 存储型XSS（持久型）

攻击者在表单内提交恶意 js 代码 ( 如 <script>alert('hello')</script> )，网站后端对提交数据不做任何安全处理，直接存储在数据库中。当其他用户访问这个已被攻击的网站，js 代码攻击就会被触发。这个类型的 XSS 攻击会存储在数据库中，持续时间长，影响范围大。

2. 反射型XSS（非持久型）

反射型 XSS 攻击，是正常用户请求一个非法资源时触发的攻击。此类型攻击通常需要用户主动去访问带攻击的链接，一旦点开了链接，大概率被成功攻击（比如：我有一部电影资源，请点击 http://xxxxx 下载）。

3. DOM XSS

基于 DOM 的 XSS 攻击是反射型攻击的变种。服务器正常返回数据，其攻击在于正常用户进行某种操作 ( js 操作) 时，触发攻击者的 URL 攻击代码，服务器难以检测出这是否为非法请求。

二、XSS攻击的危害

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

三、JavaScript拦截

随着互联网发展，XSS 攻击涉及场景越大，其造成的危害随之扩大。拦截与防护的关键，重中之重当然是从后端入手。然而，这并不意味着网页前端无需进行相应的拦截。前后端共同拦截，网站应对 XSS 攻击的防护才会更加周全。接下来，本文将浅析前端的 XSS 攻击拦截。

XSS 攻击简单来说就是代码的注入，特指恶意用户输入恶意程序代码。为了防范这类代码的注入，网站需要确保其用户输入的安全性。对于攻击验证，可以采用以下措施：

1. 编码，即转义用户的输入，把用户的输入解读为数据而不是代码；
2. 校验，对用户的输入及请求一律进行黑名单过滤检查，如对特殊字符进行过滤，设置输入域的匹配规则等，主要针对三类注入：内联事件及内联脚本、静态脚本、动态脚本；
3. 建立上报攻击信息，对攻击者攻击信息进行分析，增强黑名单。

1. 编码

在客户端使用 JavaScript 对用户输入进行编码时，有一些内置的方法和属性可以在自动感知上下文的情况下，对所有的输入数据进行编码。

一些自动编码的方法可参考下表：

上下文	方法
html元素	例：<div>userinput</div> → node.textContent = userInput
html属性	例：<input value="userInput"/> → node.setAttribute(attr,userInput)
URL查询值	例：http://example.com/?parameter=userInput → encodeURIComponent(userInput)
CSS值	例：color: userInput → Node.style.property=userInput

2. 内联事件及内联脚本

一些比较常见的注入方式，大部分都是 javascript:... 及内联事件 on* 。如：

 <a href="javascript:alert('hello')" ></a>
 <iframe src="javascript:alert('hello')" />
 <img src='x' onerror="alert('hello')" />
 <video src='x' onerror="alert('hello')"