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

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

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

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

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

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

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

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

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

1. <a href="javascript:alert('hello')" ></a>
2. <iframe src="javascript:alert('hello')" />
3. <img src='x' onerror="alert('hello')" />
4. <video src='x' onerror="alert('hello')" ></video>
5. <div onclick="alert('hello')" onmouseover="alert('hello2')" ><div>

类似这种注入，我们需要在浏览器触发点击事件前，对 javascript:... 内容进行黑名单判断，以实现防护效果。对于 on* 也是一样，可以使用 addEventListener 防护内联事件注入：

1. // 定义 黑名单 策略
2. var blackList = [
3. 'xss',
4. 'flow..'
5. ];
6. // 黑名单匹配
7. function blackMatch(blackList, value) {
8. if (!blackList) return false;
9. for (var i=0; i < blackList.length; i++) {
10. var reg = new RegExp(blackList[i], 'i');
11. if (reg.test(value)) {
12. return true;
13. } else {
14. return false;
15. }
16. }
18. document.addEventListener('click', function(e) {
19. var el = e.target;
21. //查找 a标签 <a href="javascript:">
22. if (el.tagName === 'A' && el.protocol === 'javascript:') {
23. var code = el.href.substr(11);
25. if (blackMatch(blackList, code)) {
26. //非法输入
27. elem.href = 'javascript:void(0)';
28. }
29. }
30. }, true)

通常，攻击者会向页面中注入一个静态脚本链接，比如，注入 <scriptsrc="http://xxx/xss.js">。对于这类注入，我们需要在脚本执行前找出可疑脚本，并销毁掉。此处可使用 MutationObserver 高级 api，在页面加载变化时，对静态脚本文件进行监控：

1. // Mutation 监听DOM树变化
2. var observer = new MutationObserver(function(mutations) {
3. mutations.forEach(function(mutation) {
4. // 添加节点数
5. var nodes = mutation.addedNodes;
7. for (var i = 0; i <= nodes.length - 1; i++) {
8. var node = nodes[i];
10. //blacklist 黑名单策略列表
11. if (blackMatch(blackList, code)) {
12. node.parentNode.removeChild(node);
13. console.log('发现可疑模块:', node);
14. }
15. }
16. });
17. });
19. // 当页面元素节点添加和删除操作会被观察到
20. observer.observe(document, {
21. subtree: true,
22. childList: true
23. });