浏览器家族的安全反击战

1.前言

创新互联一直在为企业提供服务，多年的磨炼，使我们在创意设计，网络营销推广到技术研发拥有了开发经验。我们擅长倾听企业需求，挖掘用户对产品需求服务价值，为企业制作有用的创意设计体验。核心团队拥有超过十多年以上行业经验，涵盖创意，策化，开发等专业领域，公司涉及领域有基础互联网服务四川联通机房服务器托管、APP应用开发、手机移动建站、网页设计、网络整合营销。

上次我说过，我们浏览器的主要工作就是把HTML，JavaScript，CSS等文件从服务器端取下来，然后解析、渲染，展示成美奂美伦的页面呈现给人类。

我们还替人类保护一个叫做Cookie的小东西，网站会把Cookie发送给浏览器让我们保存起来，等到访问同一个网站的时候，我们再把他发过去。

这个Cookie用来证明某个用户已经和服务器交互过，更重要的是证明已经登录过系统，不用再次登录了。

JavaScript这小子在我们这里承担了越来越重要的职责，从对DOM树的改动，到利用AJAX访问服务器端，他可以说是风光无限。

（详情参见上一篇文章《浏览器：一个家族的奋斗》）

可是我们都忽视了一个重要的问题：安全，这个东西差点让我们家族遭受灭顶之灾。

2.Cookie失窃

有一天，我的主人登录了"爱存不存"银行(www.icbc.com)，这个银行网站给我发了一个Cookie，证明主人登录过了， 主人在“爱存不存”银行网站做了一些操作，但是忘记了退出，然后开了一个新的Tab页访问了一个叫做www.beauty.com ,我知道这个网站不怀好意，拼命地提醒主人，但是他仍然经不住网站上那些图片的诱惑，执意把这个网站打开。

我没有办法，只好下载这个不怀好意网站的HTML,JavaScript，CSS， 让我没有想到的是这里的JavaScript竟然想访问“爱存不存”银行的Cookie。

“这个Cookie是爱存不存银行给我的，不属于www.beauty.com，你为啥要访问？” 我问他。

“没事，我好奇，想看看别的网站的Cookie长什么样”  他轻松地回答。

我将信将疑地把Cookie给了他，他不知道做了什么花样，似乎是往www.beauty.com发了一个请求，然后就把Cookie还给了我。

很快我的主人就发现，他在“爱存不存”银行的私房钱不翼而飞了。

FireFox嘲笑我说：“你这个家伙啊，怎么能够把Cookie这么重要的东西随随便便地给别人呢？ ‘爱存不存’银行的Cookie被黑客偷走了，那些黑客不用登录就可以冒充用户在‘爱存不存’网站做操作了。”

“啊？ 有这么严重？ 可他是JavaScript，照理说可以访问啊？”

“唉，你要知道，这个JavaScript和那个Cookie不是同一个网站的，怎么能访问呢。”

由于这件事，主人再我不理我了，从此开始宠幸FireFox。

3.密码失窃

FireFox也没得意很久，他也很快中了招。

这一次，主人还是忍不住去www.beauty.com看图片，FireFox这次很小心，不把任何别的网站的Cookie发给这里的JavaScript。

但这一次beauty.com改变了策略，它用iframe的方式放置了一个淘宝的登录网页到beauty.com页面中，淘宝恰恰是主人最喜欢的，主人一看，不错啊，还有快捷登录方式，于是主人就输入了自己真实的用户名和密码，没想到Beauty.com的JavaScript 已经把这个淘宝登录Form的action指向了自家网站，等到主人点了登录按钮以后， 用户名和明文的密码就这样被窃取了。

于是FireFox也被打入冷宫。

4.家族会议

黑客猖獗，类似的安全事故不断出现，我们家族的成员纷纷中招，家族赶紧召集会议，商量对策，防止人类把我们家族给废掉。

我和FireFox在会议上声讨现在的人类实在是喜欢访问那些不良网站，族长Mozilla说没办法这是人类的本性，无论如何也无法改变，如果改了就不是人类了。

“虽然我们控制不了人类的行为，但是我们浏览器家族可以做点改变，增加安全性！” Mozilla族长充满正义感和使命感，他下达了一个命令：“以后我们家族确定一条铁规：除非两个网页是来自于统一‘源头’， 否则不允许一个网页的JavaScript访问另外一个网页的内容，像Cookie，DOM，LocalStorage统统禁止访问！” 

我仔细咂摸这句话的含义，其实是说各个网页如果不同源的，就被隔离了，只能在自己的一亩三分地中折腾。

“什么叫同一个源头？” FireFox问道。

“就是说{protocol,host,port} 这三个东西必须得一样！ 我给你们举个例子， 例如有这么一个网页： http://www.store.com/product/page.html， 下面的表格列出了各种不同情况。”

这个同源策略确实严格， 不同源的网页无法访问另外一个网页的DOM,Cookie, 像beauty.com那样的恶意网站想偷走Cookie/密码就不容易了。

我想到了主人之前购物经常访问的http://www.store.com/, 这个页面中有一段装载jquery.js的代码：

这个jquery.js是来自于不同的源（static.store.com）， 难道他就没法操作www.store.com页面的内容了吗？ 如果不能操作，这个jquery.js就没有任何用处啦！

我把这个困惑给大家说了下， FireFox马上附和： “没错，难道我们要强制人类把所有的JavaScript代码放到www.store.com下吗？ 人类肯定不能容忍！ ”

“嗯，这是个好问题”  Mozilla族长说，“这样，我给你们开个口子，对于使用