【开发运行之鹿鹿故事4】安全性之XSS简析

休息了两天，鹿鹿接到了亲戚的电话：‘歪，鹿鹿呀，为啥我最近搜啥，广告就给我推啥呢？是不是我们上网干啥你们都知道啊，这可太可怕了!’
看着外面的鹅毛大雪，鹿鹿不禁想来一段 窦娥冤 抒发悲愤。
还是赶紧解释一下吧，省得误会越来越大。

---

1. 首先我们要明白一个概念 Cookies

官方解释：cookies中文名称为小型文本文件，指某些网站为了辨别用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。它满足RFC6265标准。

通俗来说，就是作为用户的你每访问一个网站，这个网站就会存储一些你的用户信息(比如用户名、密码、浏览记录、IP地址之类的)到Cookies里，当然到底存什么取决于这个网站。
事实上：普通网站都不会存储重要的信息，它们仅仅存一个你的登陆状态，也就是你拿用户名密码换取的令牌，还有就是网站针对你的判定(比如你在这个网站上的唯一标识是什么，你访问的是他们的哪台服务器，你使用的是哪个版本的产品)，这些信息你都不需要关心，它和你的隐私一点关系都没有。
一些安全的网站会将这些信息进行加密，目的是防止别人伪造这些信息欺骗网站。当然一些不太靠谱的网站还是会在Cookie里存你的用户名密码的，这是极其不安全的，信息很快就会被泄露。

---

2. XSS（Cross Site Scripting）攻击

那亲戚是访问了那些本身不靠谱的网站吗？有可能，也不一定。
那别的网站是怎么攻击的呢？这其实是一种常见的攻击--XSS 跨站脚本攻击

举个栗子，某博客网站S上的某作者小黑写了一篇文章，并且偷偷插入一段<script>代码，然后把文章发布。然后小白在网站S上去看这篇文章，这段代码开始执行，这段代码抓取小白的授权Cookie副本，于是小白的Cookie被获取到小黑的服务器，小黑获取到了小白的账号信息。如果Cookie里有用户密码，那就非常危险了，不光是小白的浏览记录，它的财产安全也会受到威胁了。

当然这和攻击者目的有关，如果小白真的访问了乱七八糟的网站，输入了过多的个人信息，只能勒紧腰带自认倒霉了；但是多数大网站的Cookie没有用户密码更不会出售用户信息，顶多呢，是让小黑可以短时间（Cookie会过期）内利用这个Cookie模拟下登陆状态发个帖啥的。

我们知道每次访问网站的时候浏览器都会将用户在该网站的Cookie发给网站服务器。

再举个栗子，小黑访问了一个网站A，网站A里有个来自某营销网站B的图片，图片中也植入了<script>代码。小黑在浏览器访问这张图片的时候会提供网站B的Cookie，咦，哪来的网站B的Cookie？
小黑在访问网站A的时候，同时也以B用户的身份访问了B网站。“他也没在B网站注册啊，怎么会是B网站用户？” 嘿嘿，不用他注册，因为也不需要他知道，B网站是自动分配一个帐户给小黑的，如果像A这样的网站多了，B网站想在不同网站之间都能定位到小黑，怎么办？把分配给他的帐户存在B的Cookie里就可以啦。那目的是啥呢？
B网站在拿到Cookie的同时，还获取到了网站A给他的一些信息，比如看了什么视频啊，新闻啊等等。其目的也是让营销网站B针对固定用户投放的广告更精准。
于是乎，之后小黑就可以在打开网页时，看到网站B根据自己之前的喜好投放的广告了~

这就是鹿鹿的这位亲戚遭遇的前因后果啦~

上面就是跨站脚本攻击的原理和危害，它可能无处不在，只要有可能植入脚本的地方，就有它存在的可能。

---

简单用代码演示一下，XSS到底是怎么进行脚本注入的。
打开任意一个网站，执行以下代码：

//方法一，添加script元素
var script = document.createElement('script');
script.textContent=alert(100);
//  立刻就会在页面进行执行，弹出数字100，脚本注入成功
-------------------------------------------------
//方法二，设置script属性src，引入脚本的网络地址
var script = document.createElement('script');
//  设置文件地址
script.src = 'http://yiifaa.com/index.js'
//  还可以执行回调函数
script.onload = function() {
}
-------------------------------------------------
//方法二，通过document.write方法
// 注意对/符号的转义 \\/  
var script = '<script>alert(100)<\\/script>';
document.write(script);

---

那么怎么预防它呢？

1. 前端替换关键字，例如替换<script>中<为&lt；>为&gt。这样恶意代码都会被转义，不再被浏览器执行。
2. secure属性 当设置为true时，表示创建的 Cookie 会被以安全的形式向服务器传输，也就是只能在 HTTPS 连接中被浏览器传递到服务器端进行会话验证，如果是 HTTP 连接则不会传递该信息，所以不会被窃取到Cookie 的具体内容。
3. HttpOnly属性 如果在Cookie中设置了"HttpOnly"属性，那么通过程序(JS脚本、Applet等)将无法读取到Cookie信息，这样能有效的防止XSS攻击。参考
4. 后端替换，参考。

好了，误会终于解除了，鹿鹿也保证在后续的工作中做好页面的安全性能，保护好大家的隐私！