背景

去年下半年，我在微信书架里加入了许多技术书籍，各种类别的都有，断断续续的读了一部分。

没有计划的阅读，收效甚微。

新年伊始，我准备尝试一下其他方式，比如阅读周。每月抽出1~2个非连续周，完整阅读一本书籍。

这个“玩法”虽然常见且板正，但是有效，已经坚持阅读五个月。

已读完书籍：《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript（上卷）》、《你不知道的JavaScript（中卷）》、《你不知道的JavaScript（下卷）》、《数据结构与算法JavaScript描述》。

当前阅读周书籍：《WebKit技术内幕》。

安全机制

网页安全模型

安全模型基础

当用户访问网页的时候，浏览器需要确保该网页中数据的安全性，如Cookie、用户名和密码等信息不会被其他的恶意网页所获取。HTML5定义了一系列安全机制来保证网页浏览的安全性，这构成了网页的安全模型。

域

在安全模型的定义中，域(Origin)这个概念是非常重要的，它表示的是网页所在的域名、传输协议和端口(Port)等信息，域是表明网页身份的重要标识。

根据安全模型的定义，不同域中网页间的资源访问是受到严格限制的，也就是网页的DOM对象、个人数据、XMLHttpRequest等需要受到控制，默认情况下，不同网页间的这些数据是被浏览器隔离的，不能互相访问，这就是HTML的“Same origin Policy”策略。

为什么要做这些限制呢？因为不同域之间的安全非常重要，信息很容易泄露，跨域(Cross Origin)的攻击是网页安全最主要的问题之一。

XSS

XSS的全称是Cross Site Scripting，其含义是执行跨域的JavaScript脚本代码。执行脚本这本身没什么问题。但是，由于执行其他域的脚本代码可能存在严重的危害，还有可能会盗取当前域中的各种数据。

因此，在HTML5规范之前，跨域的资源共享是不被允许的，既然没有能力分辨是否是攻击，那就阻止它，这多少有点因噎废食的感觉。为此，标准组织和WebKit使用了大量的技术来避免各种攻击的发生。例如，在HTTP消息头中定义了一个名为“X-XSS-Protection”的字段，此时，浏览器会打开防止XSS攻击的过滤器，目前主要的浏览器都支持该技术，下面详细介绍这些相关的技术。

CSP

Content Security Policy是一种防止XSS攻击的技术，它使用HTTP消息头来指定网站（或者网页）能够标注哪些域中的哪些类型的资源被允许加载在该域的网页中，包括JavaScript、CSS、HTML Frames、字体、图片和嵌入对象（如插件、Java Applet等）。

在HTTP消息头（如果读者不熟悉的话，建议查阅HTTP消息头规范）中，可以使用相应的字段来控制这些域和资源的访问，其主要是服务器返回的HTTP消息头。目前，不同浏览器中使用不同的字段名来表示，主要包含三种名称：Content-Security-Policy（由标准组织定义，目前最新的Chrome和Firefox版本都支持它）、X-WebKit-CSP（实验性的字段名，由Chrome和其他基于WebKit的浏览器使用）和X-Content-Security-Policy（Firefox所使用）。

CORS

根据“Same Origin Policy”原则，浏览器做了很多的限制以阻止跨域的访问，所以跨域的资源共享又变成了一个问题。标准组织为了适应现实的需要，制定了CORS(Cross Origin Resource Sharing)规范，也就是跨域资源共享，该规范也是借助于HTTP消息头并通过定义了一些字段来实现的，主要是定义不同域之间交互数据的方式。

当某个网页希望访问其他域资源的时候，就需要按照CORS定义的标准从一个域访问另外一个域的数据。

CORS使用HTTP消息头来描述规范定义的内容。

CORS定义的是一个网页如何才能访问被同源策略禁止的跨域资源，规定了两者交互的协议和方式。

WebKit的实现

首先是WebKit为了防止XSS攻击所做的努力。为了防止XSS攻击，需要在解释HTML的过程中进行XSS过滤，也就是对词法分析器分析之后的词语(Token)进行过滤，以发现潜在的问题。

其次是CSP方面的支持。Document类间接地继承了SecurityContext（略过图中的ScriptExecutionContext类，对于介绍安全机制没有什么帮助），自然Document也继承了CSP的设置，因为Document会在各处被使用，所以这样很方便调用CSP的功能。DOMSecurityPolicy是为了将CSP的信息暴露到JavaScript代码中，这样JavaScript代码可以获取CSP定义的内容。ResourceFetcher是获取资源的类，根据CSP的定义，对于各种类型的资源，在获取之前都需要检查该资源是否在CSP定义的允许范围内，如果不在，则拒绝请求，并报告错误。如果在，则发起请求，该请求需要依赖SecurityPolicy提供的一些信息。如此，CSP规范所定义的功能就被完整支持了。

最后是CORS的支持，其中最主要的是CrossOriginAccessControl部分。它不是一个类，里面只是包含了一组全局函数，用来帮助生成符合CORS规范的“Preflight”请求或者其他简单请求，同时包括处理来自回复端的消息。在WebKit使用WebURLLoader请求的时候，使用这些方法就能够生成相应的请求。

沙箱模型

原理

WebKit中并没有提供沙箱机制的支持，所以下面介绍主要以Chromium为基础来介绍在多进程架构中，沙箱模型的实现方式。

Chromium的沙箱模型是利用系统提供的安全技术，让网页在执行过程中不会修改操作系统或者是访问系统中的隐私数据，而需要访问系统资源或者说是系统调用的时候，通过一个代理机制来完成。

实现机制

因为沙箱模型严重依赖操作系统提供的技术，而不同操作系统提供的安全技术是不一样的，这样也就意味着不同操作系统上的实现是不一致的，需要分别针对不同平台展开来讨论。不过，不管是Linux还是Windows，或者是其他平台，Chromium都是在进程的粒度下来实现沙箱模型，也就是说需要运行在沙箱下的操作都在一个单独的进程中。所以，对于使用沙箱模型至少需要两个进程。

• 目标进程，也就是需要在沙箱中运行的代码。
• 代理进程，它需要负责创建目标进程并为目标进程设置各种安全策略，同时建立IPC连接，接受目标进程的各种请求，因为目标进程是不能访问过多资源的。

总结

安全机制对于浏览器和渲染引擎来说至关重要。一个不考虑安全机制的HTML5规范体系肯定不会受到广泛地使用，同时一个不安全的浏览器也不会得到广大用户的青睐。

本篇介绍的安全机制分成两个不同的部分，第一个部分是网页的安全，包括但是不限于网页数据安全传输、跨域访问、用户数据安全等。第二个部分是浏览器的安全，具体是指虽然网页或者JavaScript代码有一些安全问题或者存在安全漏洞，浏览器也能够在运行它们的时候保证自身的安全，不受到攻击从而泄露数据或者使系统遭受破坏。

作者介绍
非职业「传道授业解惑」的开发者叶一一。
《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。