浅析 Web 安全之 XSS 与 CSRF

• 2.2.1 验证码

• 2.2.2 token

• 2.2.3 referer

• 总结及面试怎么讲

一个小插曲：写了两个多小时的时候网页崩溃了，当时心态都崩了，又重新写了一遍。

前言

==

整理面经的时候好多前端的面经里面都有和 web 安全相关的内容，所以就详细了解了一下，但是这几次面试其实都没有问到，今天晚上也问了面试官虽然 XSS 和 CSRF 和前端安全相关，但是其实前端能做的并不多，最多只是对一些特殊字符进行转义，但是其实主要的工作还是后端来做，所以前端到底能做什么来预防这些东西。面试官是这么跟我说的，他说前端只是一个大门，并不能挡住所有东西，但是还是要对这些东西有所了解。

所以呢，在安全方面，前端能做的东西真的不多，但是要有这个意识，如果你连防御的意识都没有的话那么写的程序肯定是有漏洞的，话不多说，接下来开始介绍 XSS 和 CSRF。

1. XSS 攻击

---

XSS 即跨站脚本攻击，英文名称 Cross Site Scripting。之所以不叫 CSS 因为 CSS 已经被层叠样式表用了。

1.1 攻击原理

1.1.1 反射型

反射型攻击主要是用户输入了一段可执行的代码，然后后台没有对输入进行处理，如

<-- 反射型 XSS -->

假设这是一个查询框，用户输入了下面一段代码

然后后台没有对数据进行任何处理，重定向到查询结果界面以后显示查询不到任何结果并且显示了警告 1；查看网页结构会发现结构变成如下这样

这段用户输入的代码变成了网页中的元素。

假设你点击了一段陌生的链接

localhost:8080?xss=<script>alert(1)</script>

其实这段代码和上面的操作是一样的，只不过这是别人发给你的链接，需要你来点击，当然这种链接很多人可能会有警惕，但是可以通过转换变成一个短网址

http://crogps.cn/j8Ca1R

这样还能看出来吗，于是你点击了以后，就显示了一个警告。

可能显示警告造不成太大的危害，如果里面是将你的 Cookie 发送攻击者的网站呢，或者链接了攻击者的 js，改变了页面的逻辑等等，那么危害就大了。但是这种攻击方式并不会保存到数据库中，而且需要用户点击，所以危害相对小一些。

1.1.2 存储型

存储型攻击攻击原理和反射型类似，不过存储型攻击输入的代码会被保存到数据库中，所有的用户都可以看到这些信息。

比如在微博的评论里面加入这么一条评论

点击这里有钱拿

如果后端没有做任何处理，将这条信息保存到数据库中。那么所有人都可以看到这条评论。并且显示的是一个链接的形式，如果用户好奇点击了，就会被引导到攻击者的网站，进行后续的操作。

点击的转化率不是太高，所以如果攻击者写的是这样的一条

因为该文件不存在，所以就会触发 onerror 事件。那么当用户加载评论的时候就会运行攻击代码，造成危害。

由于存储型攻击是将攻击代码存储到数据库中，并且可以扩散到所有人，所以危害特别大。

1.2 攻击方式

• 富文本攻击

• script 攻击

• html 内容

• html 属性

这些攻击方式的话和上面基本类似，除了富文本的攻击。富文本就是类似邮件和写博客时候的编辑框，可以设置字体颜色等，因为它本身用的就是 html 属性，所以它允许用户嵌入代码，如果这段代码是发给管理者的，就可能获取管理者的数据，造成危害，因此富文本的防御和其他的有所区别。

1.3 防御方式

1.3.1 浏览器自带防御机制

目前大多数浏览器都有自带的防御 XSS 攻击的机制，而且默认是开启的，但是这种防御机制只能防御一些基本的反射型的 XSS 攻击，功能十分有限。

1.3.2 对特殊字符进行转义

这也是前端唯一可以做的，当然也可以后端来做，即将特殊字符进行转义，因此浏览器解析的时候就不会将它渲染成元素，而是渲染成文字，具体操作如下

var escapeHtml = function(str){

if (!str) return ‘’;

str = str.replace(/</g,‘<’);

str = str.replace(/>/g,‘>’);

str = str.replace(/"/g,‘&quto;’);

str = str.replace(/‘/g,’‘’);

str = str.replace(/&/g,‘&’);

return str

};

1.3.3 设置白名单或黑名单

这个主要是针对富文本进行处理的，因为富文本允许用户输入代码。

主要思路就是将字符串解析成 dom 树，然后对 dom 树做黑名单或白名单处理。

黑名单即去掉指定的标签和属性，如

// 黑名单

var xssFilter = function(html){

if(!html) return ‘’;

// 过滤 script 标签

html = html.replace(/<\s*/?script\s*>/g,‘’);

// 过滤 a 标签如

html = html.replace(/javascript:[^‘"]*/g,’');

// 过滤 img 标签的 onerror 事件如

html = html.replace(/onerror\s*=\s*[‘"]?[^’“]*['”]?/g,‘’);

return html;

}

由于能触发的标签属性太多，不可能把所有情况都考虑到，所以可以考虑做白名单

白名单即只保留想要的属性和标签，实现方式如下

// 假设 htmlList 是解析完以后的 dom 节点

var xssFilter = function(htmlList){

if(!htmlList) return ‘’;

// 假设只允许 img 标签，并且只允许它带有 src 属性

var whiteList = {

‘img’:[‘src’],

};