How browsers work

前言

为了继续DVWA里面的XSS学习，我查阅了许多文章；其中有大部分文章写道XSS的核心就是需要分清楚服务器解析,浏览器解析,JS解析.知道什么时候能触发JS解释器对payload进行解析。所以写下这篇How browsers work来记录一下自己对浏览器工作原
理的学习，参考文章是这篇文章是以色列开发人员塔利·加希尔的研究成果。她在查阅了所有公开发布的关于浏览器内部机制的数据，并花了很多时间来研读网络浏览器的源代码。文章链接https://web.dev/howbrowserswork/#dom

浏览器的主要功能

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您想要访问的网络资源。这里所说的资源一般是指HTML文档，也可以是 PDF、图片或其他的类型。资源的位置由用户使用 URI(统一资源标示符)指定。

浏览器的高层架构(High Level Structure)

1.用户界面：包括地址栏、前进后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面。
2.浏览器引擎：在用户界面和渲染引擎之间传送指令。
3.渲染引擎 - 负责显示请求的内容。如果请求的内容是HTML，它就负责解析HTML和CSS内容，并将解析后的内容显示在屏幕上。
4.网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
5.用户界面后端：用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
6.JavaScript 解释器：用于解析和执行 JavaScript 代码，比如chrome的javascript解释器是V8。
7.数据存储：这是持久层。浏览器需要在硬盘上保存各种数据，例如Cookie。新的HTML规范HTML5定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

渲染引擎(The rendering engine)

主流程(The main flow):
渲染引擎一开始会从网络层获取请求文档的内容，通常以8K分块的方式完成;获取了文档内容之后，渲染引擎开始正式工作，其基本流程：
1.渲染引擎解析HTML文档，并将文档中的标签转化为dom节点树，即”内容树”。同时，它也会解析外部CSS文件以及style标签中的样式数据。这些样式信息连同HTML中的”可见内容”一道，被用于构建另一棵树——”渲染树(Render树)”。
2.渲染树由一些带有视觉属性(如颜色、大小等)的矩形组成，这些矩形将按照正确的顺序显示在频幕上。
3.渲染树构建完毕之后，将会进入”布局”处理阶段，即为每一个节点分配一个屏幕坐标。再下一步就是绘制painting，即遍历render树，并使用UI后端层绘制每个节点。

解析与DOM树构建(Parsing and DOM tree construction)

解析一个文档就是指将这个文档翻译成一个可以让代码理解和使用的有意义的结构。　解析一般可分为两个子过程：语法分析和词法分析。词法分析就是将输入分解为符号，符号是语言的词汇表——基本有效单元的集合。对于人类语言来说，它相当于我们字典中出现的所有单词。
1.文法(Grammars)
　　解析是以文档所遵循的语法规则(编写文档所用的语言或格式)为基础的。所有可以解析的格式都必须对应确定的语法(由词汇和语法规则构成)。这称为与上下文无关的文法。人类语言并不属于这样的语言，因此无法用常规的解析技术进行解析。
2.解析器-词法分析器(Parser－Lexer combination)
词法分析就是将输入分解为符号，符号是语言的词汇表——基本有效单元的集合。对于人类语言来说，它相当于我们字典中出
现的所有单词。
　解析工作一般由两个组件共同完成：
　　(1)词法分析器（有时也称为标记生成器），负责将输入内容分解成一个个有效标记。词法分析器知道如何将无关的字符（比如空格和换行符）分离出来。；
　　(2)解析器负责根据语言的语法规则分析文档的结构，从而构建解析树。

解析是一个迭代的过程。通常，解析器会向词法分析器请求一个新标记，并尝试将其与某条语法规则进行匹配。如果发现了匹配规则，解析器会将一个对应于该标记的节点添加到解析树中，然后继续请求下一个标记。
如果没有规则与该标记匹配，解析器就会将标记存储到内部，并继续请求下一个标记，直至找到可与所有内部存储的标记匹配的规则。
3.解析示例(Parsing example):解析“2＋3-1”这个表达式
词汇表：我们用的语言可包含整数、加号和减号。
语法规则：(1)构成语言的语法单位是表达式、项和运算符。(2)该语言可以包括多个表达式。(3)一个表达式定义为两个项通过一
个操作符连接(4)运算符可以是加号或减号。(5)项可以是一个整数或一个表达式。
分析：所以先进行词法分析；我们先遇到了2；然后根据语法规则5可知项可以是一个整数或者一个表达式，符合语法规则；匹配第二个字串是2+3；此时符合语法规则3；接下来匹配下一个项-1；因为根据语法规则5可以知道项可以是一个整数或者一个表达式，所以可以知道2+3是一个项，然后1又是一个项；所以又符合语法规则三一个表达式定义为两个项通过一个操作符连接。

4.转换(Translation)
　　很多时候，解析树还不是最终结果。解析通常是在转换过程中使用的，而转换是指将输入文档转换成另一种格式。编译就是一个例子。编译器可将源代码编译成机器代码，具体过程是首先将源代码解析成解析树，然后将解析树翻译成机器代码文档。如果没有规则(即没有找到相应的语法规则)，解析器就会引发一个异常。这意味着文档无效，包含语法错误。

HTML解析器(HTML Parser)

1.解析算法(The parsing algorithm)
此算法由两个阶段组成：符号化及构建树。符号化是词法分析的过程，将输入内容解析成多个标记，HTML标记包括起始标记、结束标记、属性名称和属性值。标记生成器识别标记，传递给树构造器，然后读取下一个字符以识别下一个标记，如此反复直到输入的结束。

2.标记化算法(The tokenization algorithm)
基本示例 - 将下面的 HTML 代码标记化：

<html>
  <body>
    Hello world
  </body>
</html>

(1)此时的初始化是“数据状态”。遇到字符串 < 时，状态会更改为“标记打开状态”。
(2)然后此时接收一个a-z的字符时会创建“起始标记”，状态更改为“标记名称状态”。
(3)“标记名称状态”会一直保持到接收到 > 字符。在这个期间接收到的字符都会附加到新的标记名称上面，此时我们创建的标记
是html标记。
(4)遇到 < 标记时，会发送当前的标记，状态改回“数据状态”
此时我们来看一下状态的变化：数据状态–>标记打开状态(<)–>标记名称状态(a-z)–>数据状态(>)
(5)现在我们回到“数据状态”。接收到 Hello world 中的 H 字符时，将创建并发送字符标记，直到接收中的 < 。我们将为 Hello world 中的每个字符都发送一个字符标记。
(6)现在我们回到“标记打开状态”，接收到/时，会创建end tag token 并改为“标记名称状态”；由上述可知我们会一直保持这
个状态到遇到 > 为止；才会将标记改为“数据状态”

3.树构建算法
　在创建解析器的同时，也会创建 Document 对象。在树构建阶段，以 Document 为根节点的 DOM 树也会不断进行修改，向其中添加各种元素。标记生成器发送的每个节点都会由树构建器进行处理。规范中定义了每个标记所对应的 DOM 元素，这些元素会在接收到相应的标记时创建。这些元素不仅会添加到 DOM 树中，还会添加到开放元素的堆栈中。此堆栈用于纠正嵌套错误和处理未关闭的标记。其算法也可以用状态机来描述。这些状态称为“插入模式”。
让我们来看看示例输入的树构建过程：

<html>
  <body>
    Hello world
  </body>
</html>

(1)树构建阶段的输入是一个来自标记化阶段的标记序列。第一个模式是“initial mode”。接收 HTML 标记后转为“before html”模式，并在这个模式下重新处理此标记。这样会创建一个 HTMLHtmlElement 元素，并将其附加到 Document 根对象上。
(2)然后状态将改为“before head”。此时我们接收“body”标记。即使我们的示例中没有“head”标记，系统也会隐式创建一个 HTMLHeadElement，并将其添加到树中。
(3)现在我们进入了“in head”模式，然后转入“after head”模式。系统对body标记进行重新处理，创建并且插入HTMLBodyEl
ment,同时模式转变为“body”
(4)现在，接收由“Helloworld”字符串生成的一系列字符标记。接收第一个字符时会创建并插入“Text”节点，而其他字符也将附加到该节点。
(5)接收 body 结束标记会触发“afterbody”模式。现在我们将接收HTML结束标记，然后进入“after after body”模式。接收
到文件结束标记后，解析过程就此结束。

CSS 解析

正如上图所展示的，我们浏览器渲染过程分为了两条主线：1.HTML Parser 生成的 DOM 树；2.CSS Parser 生成的 Style Rules ；在这之后，DOM 树与 Style Rules 会生成一个新的对象，也就是我们常说的 Render Tree 渲染树，结合 Layout 绘制在屏幕上，从而展现出来。
其解析过程可见此篇博客https://www.cnblogs.com/ypppt/p/13690607.html