WEB浏览器问题

 WEB浏览器是司空见惯的工具，也是一种很节约资源的设计。1990年欧洲一叫Tim Berner-Lee的哥们发明了首个WEB浏览器

—— WorldWideWeb。Tim Berner-Lee是一个了不起的哥们，HTTP协议，HTML语言，WEB服务器都是是他发明的，在万维网的历史上，

他功不可没。本章 我们聊聊WEB浏览器，其他章节我们也会探讨一下他的其他发明。

      WEB浏览器这种节约资源的设计理念，我们可以找一位古人来类比。话说北宋庆历年间（1041-1048）我国的毕昇，毕姥爷发明

了我们引以为傲的活字印刷。看到这里停一下，想想这相隔1000年的两个发明的共同点是什么。把你认为相同的都写下来，比如说，

两个发明人都是男人呀，都可以。

      在毕姥爷的活字印刷发明前400多年的隋朝人从刻章中得到启发，发明了雕版印刷。雕版印刷就是一个大的刻章，把需复印的材料

刻成一个个的书本这么大的刻章，然后把这个大刻章印在纸上，最后把这些纸装订成书。可见古人做一次复印，功夫费大了。那时候银

行要个身份证复印件，这个功夫做个新的都有富余。虽然雕版印刷比较笨，但是如果是发行量大的材料还是值得做的，如果只需要一两

份，手工抄写也比拿个刀在那里刻那么多大戳子，然后一张张的盖章方便。只要随便一想，雕版印刷都是一个费人力和财力的设计。在

这个再停一停，想想如果是我们自己来设计，对雕版印刷有何改进意见。

      毕姥爷是这样想的（我这么琢磨的），文章说白了就是文字的排列组合，所有的文章只是多种排列组合的一个特例。高考作文是800

字左右，我们就按照800个字算，常用汉字是3500个，那么高考作用一共有3500的800次方种情况，就算是取出言语不通的，也是个天文

数字。情况虽然很多，但是所有的文章中的字确是相同的。有人从陈鹤琴(1928)的一篇九十万字的文章中发现全篇仅用了4719个不同的汉

字。毛泽东所有的著作仅含3136个汉字。孙中山'三民主义'用了2134个汉字。'骆驼祥子'用了2413个汉字。毕姥爷聪明的想到，那就给每个

字刻一个戳子吧，对照着文章一个字一个字的往上盖戳子呗。毕姥爷对自己的创意很满意，然后开始着手刻戳子。这是毕姥爷又犯难了，

用啥做戳子呢，玉石，田黄，金银都太贵了，用木头吧，不够绿色环保，还需要砍伐森林，林业局知道了还要罚款。据沈括的《梦溪笔谈》

里面记载，毕姥爷使用了用胶泥刻字，火烧成陶土活字。这个办法非常给力，赞一个。向毕姥爷学习！毕姥爷终于要开始工作了，一个早上

小鸡啄米一样的盖戳子，毕姥爷也没有印出几页文章来。原来，雕版印刷不光提供了字，同时做了排版的工作，而毕姥爷在盖戳子的时候，

还需要考虑排版，如果把字给盖反了这咋整呢。排版的问题没有难住毕姥爷。同样是邻居二大爷沈括的《梦溪笔谈》里面说的，

 为了适应排版的需要，一般常用字都备有几个甚至几十个，以备同一版内重复的时候使用。遇到不常用的冷僻字，如果事前没有准备，可以

随制随用。为便于拣字，把胶泥活字按韵分类放在木格子里，贴上纸条标明。排字的时候，用一块带框的铁板作底托，上面敷一层用松脂、蜡

和纸灰混合制成的药剂，然后把需要的胶泥活字拣出来一个个排进框内。排满一框就成为一版，再用火烘烤，等药剂稍微熔化，用一块平板把

字面压平，药剂冷却凝固后，就成为版型。印刷的时候，只要在版型上刷上墨，覆上纸，加一定的压力就行了。为了可以连续印刷，就用两块

铁板，一版加刷，另一版排字，两版交替使用。印完以后，用火把药剂烤化，用手轻轻一抖，活字就可以从铁板上脱落下来，再按韵放回原来

木格里，以备下次再用。毕升还试验过木活字印刷，由于木料纹理疏密不匀，刻制困难，木活字沾水后变形，以及和药剂粘在一起不容易分开

等原因，所以毕升没有采用。原来毕姥爷没有使用木头做戳子还有其他原因。下面看一段摘录的文字：

        毕升的胶泥活字版印书方法，如果只印二三本，不算省事，如果印成百上千份，工作效率就极其可观了，不仅能够节约大量的人力物力，

而且可以大大提高印刷的速度和质量，比雕版印刷要优越得多。现代的凸版铅印，虽然在设备和技术条件上是宋朝毕升的活字印刷所无法比拟

的，但是基本原理和方法是完全相同的。活字印刷的发明，为人类文化做出了重大贡献。这中间，中国的平民发明家毕升的功绩不可磨灭的。

可是关于毕升的生平事迹，人们却一无所知，幸亏毕升创造活字印刷的事迹，比较完整地记录在北宋著名科学家沈括的名著《梦溪笔谈》里。

       幸好有沈括，沈大叔的记载呀。我们今天才能对比着学习WEB浏览器。好了，看到这里，你在想想WEB浏览器和活字印刷的关系。

       现在让我们把时钟拨回到 上个世纪80年代，上面我们说过WEB浏览器1990年发明的，也就是说上个世纪80年代是没有WEB浏览器的，

你可以想象没有WEB浏览器是的时代吗。 想象一下没有了WEB浏览器你如何上淘宝呢，当然那是时候也没有淘宝。没有WEB浏览器应该就

没有网站了，也就没有现在的论坛个人博客这些东西吧。 

          【庖丁解牛】 用telnet 访问一下 bbs.sjtu.edu.cn，用过bbs就不用测试了。

操作过的兄弟应该看到上面的画面。这是一个很古老的技术，它的年龄比现在的WEB系统要大17岁。这个系统就是鼎鼎大名的BBS

Bulletin Board System中文名字电子布告栏系统。第一个BBS系统诞生于1973年8月，美国加州大学伯克利分校，它提供了简单的

信息公告和关键字搜索的功能。

      我们现在用的博客，论坛还有一些游戏都是来自BBS这个叔叔辈的产品。那么 Tim Berner-Lee大叔为啥不辞辛苦的开发WEB系统，

和雕版印刷向活字印刷的道理相同。BBS的每个页面都需要像刻雕版一些，把内容一个版面一个版面的摆好，复用率很低。其实

Tim Berner-Lee大叔的第一款浏览器和telnet的区别也不是很大，只是他的浏览器用HTML标签来代替ASCII码的格式。HTML标签用来做

排版的工作，真正的内容是放在对应排版格式的HTML标签之内的。可以看出第一款WEB浏览器还是一个雕版印刷，一直到了1994年

哈坤·利提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。哈坤于1994年

在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣

，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。

1996年12月CSS要求的第一版本被出版。  直到 1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷，才标志着CSS时代

的到来。CSS使得WEB浏览器的排版和文字，图片等资源分类开来，WEB浏览器进入和活字印刷的时代，相同的资源配以不同的CSS产生不同

的显示效果。HTML2.0或者XHTML的规则更能体现这种分类，HTML只完成DOM树的构建，CSS控制展示形式。

      在WEB浏览器进入活字印刷的时代，人们觉得WEB浏览器应该更为强大，能提供更好的交互才对，1997 年，JavaScript 1.1 作为一个草案

提交给欧洲计算机制造商协会（ECMA），它就是我们现在用的Javascript的第一个版本。其实早在 1992 年，一家称作 Nombas 的公司开发了一种

叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言，它就是JavaScript的雏形，当然发明之初没有想到它会在WEB浏览器乃至WEB系统

（nodejs这个javascript库已经用在WEB服务端的开发） 上的广泛应用。JavaScript赋予WEB浏览器是嵌入式编程，浏览器会主动加载javascript程序

然后根据根据程序的逻辑执行。JavaScript使得BBS时代那种，所有的逻辑判断都需要提交给服务器处理，然后由服务器将处理结果返回给客户端的

方式，多了一种在客户端做逻辑判断的选择。

    HTML完成一种对WEB资源的简单树形组织，我们把这种组织成为DOM树，淘宝的网站的DOM树可以简化为如下结构：

上面这个可以动来动去的DOM树，以咋样的方式展示给用户呢，WEB浏览器就是一个长方形的白板，DOM树上的内容如何摆放在这个白板上呢，他们依照CSS的要求，展示给用户。CSS文件里面描述了Body里面可以展示的资源的排版信息，浏览器就是按照CSS的位置信息，在展示窗口中摆放资源的。

      JavaScript是独立的一个功能，一句话总结就是提供WEB浏览器嵌入式编程功能。

      这里做个小结，WEB浏览器就像一个活字印刷的小公司，HTML就是原版资料内容，CSS是活字印刷的排版规则，新版的书可以和原版书的排版不一样，这个容易理解，JavaScrip是啥呢，是公司的老板，他可以命令排版的人使用哪个排版规则，也可以命令应刷那边书，当然他也可以罢工不干了。

     

        开始我们的WEB浏览器问题。WEB浏览器的问题是，它保持中立，暗箱操作和单向联系。

       WEB浏览器的中立特点体现在，不论从哪里取来的资源只要符合标准，它都会按照标准展示和执行，即使是他的发明人Tim Berner-Lee大叔，他都不给面子。

Tim Berner-Lee大叔给浏览器一个不符合标准的CSS，并且签上大名，浏览器照样不买账，不展示就是不展示。同样，就是Tim Berner-Lee大叔自己使用WEB浏览器

上网，浏览器也不会因为发明人在使用而表现的更好。WEB浏览器因为数据室从淘宝去的就会偏向淘宝，不会因为马云在上淘宝就会给他更多的权利。一句话总结，

WEB浏览器是一个古板的依照标准办事的系统，只要符合标准，他愿意给任何人服务，不论是天使还是魔鬼。

        既然WEB浏览器是完全中立的，那么我们能做的就是提供给浏览器的数据应该是无害的。如果我们自己的发布信息的网站这个容易保证，我不做恶就天下太平了，

至少别人访问我们的网站是安全的。可惜，淘宝的系统不是这种可控的理想网站。绝大多数情况下，淘宝的系统是以信息公示的角色从在。大量的应用场景如下：用户

张三通过浏览器将一些信息提交给淘宝系统，然后，我们的系统会就张三的信息作为资源配合HTML，CSS以及JavaScript拼接成符合WEB浏览器标准的资源提供给，所有

来访问这些资源的用户，访问资源的用户通过ＷＥＢ浏览器来展示来自淘宝的资源。这里面有一个因为WEB浏览器的中立性导致的问题，用户会认为淘宝是一个可信任的

网站，会放心的操作，即使有一些异常也会选择相信淘宝，但是浏览器不会因为淘宝网的数据而帮助我们判断一些危险操作，比如说XSS的漏洞。

        在这种浏览器保持中立的情况下，如果我们淘宝的系统也保持中立，将张三提交上来的数据，原样发放给来访用户会有哪些危险。最常见的场景，对于上传场景，

如果张三将一个病毒以图片的方式上传到我们的服务器，访问这张图片的人，就会下载病毒到自己电脑，浏览器可并不会因为用户认为要看图片而提醒用户那不是图片，

而是病毒。这个工作就需要我们在服务器上来做，在张三上传的时候，我们必须去验证上传的数据是否是我们预期的数据。

       上传的问题，其实还是好处了，我们只需要在服务端验证就OK了。最烦的是用户提交的字符串信息，比如说留言板的信息。用户也许留言的内容就是HTML，CSS以及

JavaScript，如果是这些，浏览器的中立性也会导致出现问题。如果我们预期用户的输入中没有HTML，CSS，JavaScript这些内容，那倒也好处理，正则匹配一下用户提交

的内容如果有HTML，CSS，JavaScript的特征码，去掉就ＯＫ了。但是如果是富文输入，还有一些，支持源码编辑的留言框，问题就复杂了。因为有的标签魔鬼和天使都需要，HTML，CSS，JavaScript也是中立的。这是，我们只有设置白名单，并且挑选那些友好的标签作为白名单。

       古人云明枪易躲暗箭难防，WEB浏览器的暗箱操作非常的多。这个也是正常的，就如何我们看书，不需要关心书是如何印刷出来。除非，一天我们因为看一本书涂有

毒液的书而中毒身亡，警察叔叔才会去关心书的制造过程。现在我们越来越多的发现因为WEB浏览器的暗箱操作导致用户受害的案例，这就要求我们必须分析一下浏览器

的暗箱操作。

       对img标签的自动加载和不判断。当浏览器碰到<img src="URL">这样的HTML标签是，会自动向URL请求资源，也许你会说，着有啥奇怪的，浏览器想URL请求图片呗。错啦，哥们你错大方了，浏览器对<img src="URL">这个标签的处理是，它标记这个位置应该是一个图片，同时它向URL发送一个GET请求（自动发哦，暗箱操作的）

，接下来浏览器把取得资源当做图片来展示，你是这样想的对吧，错啦，浏览器些会判断HTTP协议的第一行的第一个字段，如果是200，我们的浏览器才会去把实体中的内容当做图片的解析并且展示，如果302或者301呢，再走一步吧您呐，去访问Location中URL了。更惨的是，401呢，浏览器会莫名其妙的给你弹出一个输入密码的框框

这个需要浏览器处理HTTP协议的知识了，这里我们不做深入，在沟通问题那章节我们详细分析浏览器对HTTP协议的解析过程。这里，各位只要知道浏览器对<img src="URL">标签的处理是首先要经一次判定的，如果不符合要求，浏览器不是说做图片获取失败的相应，而是去执行其他操作。

      302,301的自动跳转，同样这个后面仔细介绍。

      JavaScript的自动执行，前面我们已经强调了，JavaScript提供给浏览器是嵌入式编程功能，浏览器会完美的执行JavaScript的命令，这些我们是不得而知的。

     浏览器器的单向联系特性表现在。服务器不能主动给浏览器信息，比如说我们网站已经更新了，我们可以同旺旺提醒用户，我们的网站已经更新了，但是我们不能通过

浏览器来完成这样的工作。当然，可以使用JavaScript周期性的向服务器请求任务达到旺旺的效果，本质上还是单线联系。

      结束了，总结一下。