学习资料：https://www.attacker-domain.com/2013/04/deep-dive-into-browser-parsing-and-xss.html
概念
字符实体 character entities
是什么：转义序列，它定义了一般无法在文本内容中输入的单个字符或符号。
格式：以一个&符号开始，后面跟着一个预定义的实体的名称，或是一个#符号以及字符的十进制数字。
&entity_name;
&#entity_number;
HTML字符实体 HTML character entities
是什么：避免浏览器把输入数据误当成预留字符，用来在HTML页面中正确显示出预留字符文本效果的 对应字符实体。
例子：
|Result|Description|Entity Name|Entity Number|
||non-breaking space| | |
|<|less than|<|<|
|>|greater than|>|>|
|&|ampersand|&|&|
|"|double quotation mark|"|"|
|'|single quotation mark (apostrophe)|'|'|
字符引用 character references
一、字符值引用 Entity Number
例子：<对应的字符值引用为<
二、字符实体引用 Entity Name
例子：<对应的字符实体引用为<
词 tokens
也有叫Tags的
一、Tag Token
StartTag
EndTag
二、文本 Token
也有叫Text的
HTML元素
| 种类 | 元素 | 区别 | 解析器相关 | |
|---|---|---|---|---|
| 1 | Void elements | <area> <base> <br> <col> <embed> <hr> <img> <input><keygen> <link><menuitem> <meta> <param> <source><track> <wbr> | 不能包含任何内容 | |
| 2 | Raw text elements | <script><style> | 可以包含文本 | |
| 3 | RCDATA elements | <textarea><title> | 可以包含文本、字符引用 | 在RCDATA元素标签的内容中，唯一能够被解析器认做是标签的就是“</对应RCDATA标签>”。内容中的其他标签不会被创建，不会有脚本能够执行。 |
| 4 | Foreign elements | <MathML><svg> | 可以包含文本、字符引用、其他元素和注释、CDATA段 | CDATA元素中的内容将不会触发解析器创建开始标签。闭合CDATA元素的标志是“]]>”序列。因此如果用户想逃出CDATA元素，就要用未经任何编码的“]]>”序列 |
| 5 | Normal elements | 除了上面的四种 | 可以包含文本、字符引用、其他元素和注释 |
HTML解析
扩展：https://html.spec.whatwg.org/multipage/parsing.html
HTML解析器的工作逻辑-状态机
1、只要遇到一个'<'符号（后面没有跟'/'符号）就会进入“标签开始状态(Tag open state)”。
2、然后转变到“标签名状态(Tag name state)”，“前属性名状态(before attribute name state)”......最后进入“数据状态(Data state)”并释放当前标签的token。
3、当解析器处于“数据状态(Data state)”时，它会继续解析，每当发现一个完整的标签，就会释放出一个token。
例子：
<html>
<body>
<a href="http://www.1fragment.com <">Click <</a>
<textarea><</textarea>
</body>
</html>
| characters from the input stream | < | a | href | = | http://www.1fragment.com < | > | Click < | </a> | |
|---|---|---|---|---|---|---|---|---|---|
| HTML parser state | "Tag open state" | "Tag name state" | "before attribute name state" | “attribute name state" | “attribute value state" | "data state" | |||
| token | StartTag a | 文本token Click < | EndTag a |
| characters from the input stream | < | textarea | > | < | </textarea> |
|---|---|---|---|---|---|
| HTML parser state | "Tag open state" | "Tag name state" | “RCDATA state" | emit token | |
| token | StartTag textarea | 文本token < | EndTag textarea |
HTML解析器的状态
一共有哪些状态？
其中允许包含字符实体character entities的状态有3种(以上置为灰色的部分)
data state
RCDATA state
attribute value state
在这些状态中，HTML字符实体将会从“&#...”形式解码，对应的解码字符会被放入数据缓冲区中
URL解析
扩展：https://url.spec.whatwg.org/
URL解析器的工作逻辑-状态机
1、URL资源类型（例 http: 包含协议和冒号的部分）必须是ASCII字母（U+0041-U+005A || U+0061-U+007A），不然就会进入“无类型”状态。
你不能对协议类型进行任何的编码操作，不然URL解析器会认为它无类型。
2、URL编码过程使用UTF-8编码类型来编码每一个字符。
如果你尝试着将URL链接做了其他编码类型的编码，URL解析器就可能不会正确识别。
JavaScript解析
扩展：https://www.ecma-international.org/publications-and-standards/standards/ecma-262/
练习题
基础题1-6
升级题7-14
作业题15
Q：以下脚本是否能被执行？
Q1
<a href="%6a%61%76%61%73%63%72%69%70%74:%61%6c%65%72%74%28%31%29"></a>
1、HTML解析器解析，正常输出a标签 2、URL解析器开始解析href属性值里的链接。但由于对协议类型“javascript:”进行了编码，所以变成了无类型。URL中被编码的“javascript”没有被解码，不会被URL解析器识别
A：不
Q2
<a href="javascript:%61%6c%65%72%74%28%32%29">
1、HTML解析器解析完<a href="并处于“attribute value state时，解析器遇到“&”字符，识别到“属性值状态的字符引用”，进行了解码，<a href="javascript:%61%6c%65%72%74%28%32%29">HTML解析器工作完成。
2、URL解析器开始解析href属性值里的链接。javascript: 能够被URL解析器正确识别。然后URL解析器继续解析链接剩下的部分。
3、由于是“javascript”协议，JavaScript解析器开始工作并执行这段代码
A：是
Q3
<a href="javascript%3aalert(3)"></a>
1、HTML解析器解析，正常输出a标签
2、URL解析器开始解析href属性值里的链接。但由于对协议类型中的冒号部分进行了编码，所以变成了无类型。URL中被编码的“:”没有被解码，不会被URL解析器识别
A:不
Q4
<div><img src=x onerror=alert(4)></div>
1、HTML解析器解析完“
<div>“<”img src=x onerror=alert(4)“>”</div>A:不
Q5
<textarea><script>alert(5)</script></textarea>
1、HTML解析器解析完<textarea>并处于“RCDATA state”时，解析器遇到“&”字符，识别到“RCDATA状态中的字符引用”，会消耗一个字符引用（例如“<”）并释放出对应字符的token。解析器在解析这个字符引用后不会转换到“标签开始状态”。不会建立新标签。<textarea>“<”script“>”alert(5)“<“/script”>“</textarea>
A:不
Q6
<textarea><script>alert(6)</script></textarea>
1、HTML解析器解析完<textarea>并处于“RCDATA state”时，在这个状态中，遇到“<”字符，它会转换到“RCDATA小于号状态”。但是“<”字符后没有紧跟着“/”和对应的标签名，解析器会转换回“RCDATA状态”。<textarea>“<script>alert(6)</script>”</textarea>
A:不
Q7
<button onclick="confirm('7');">Button</button>
Q8
<button onclick="confirm('8\u0027);">Button</button>
Q9
<script>alert(9);</script>
Q10
<script>\u0061\u006c\u0065\u0072\u0074(10);</script>|-------|-------|
Q11
<script>\u0061\u006c\u0065\u0072\u0074\u0028\u0031\u0031\u0029</script>
Q12
<script>\u0061\u006c\u0065\u0072\u0074(\u0031\u0032)</script>
Q13
<script>alert('13\u0027)</script>
Q14
<script>alert('14\u000a')</script>
Q15
其他参考
gif 解析结果及过程状态 来源：https://nikodoko.com/posts/html-table-parsing/
How does a parser (for example, HTML) work? - Stack Overflow - https://stackoverflow.com/questions/3150293/how-does-a-parser-for-example-html-work
How browsers work - https://web.dev/howbrowserswork/
浏览器渲染引擎工作原理 - https://wuhou.fun/398.html
工具辅助
编解码-使用Burp Decoder · burpsuite - https://t0data.gitbooks.io/burpsuite/content/chapter11.html
查看浏览器活动-chrome https://developer.chrome.com/docs/devtools/performance-insights/#renderer
评论区