<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study

[雑LT_study](https://web-study.connpass.com/event/396644/) (2026/07/27) の登壇資料です。

Transcript

1. 君はこのHTMLをパースできるか"></a></title> <title><a id="</title> #雑LT_study 2026/07/27 pizzacat83 1
2. とりあえずブラウザにパースしてもらおう <title><a id="</title> 君はこのHTMLをパースできるか"></a></title> （ブラウザで開いて DevTools で DOM ツリー見てみましょう） 2
3. 第2問！ 君はこのHTMLをパースできるか"></a></div> <div><a id="</div> タグの代わりに div タグにしてみた （ブラウザで開いて DevTools で DOM ツリー見てみましょう） title 3
4. は、 今 <title> の中にいるかどうかで パーサーの振る舞いがまるで違う <a id="</X>hoge"></a> 4
5. HTML パーサーの仕様を見ると…… 5 引用元: https://html.spec.whatwg.org/multipage/parsing.html
6. HTML パーサーの仕様をもっと見ると…… 目次がもうデカい！→ 字句解析器: 84状態の状態機械 構文解析器: 21状態の状態機械 (& タグ毎大量分岐) 引用元: https://html.spec.whatwg.org/multipage/parsing.html 6
7. HTML なんもわかってなかったわ！ 自分が書いた HTML が意図通りにパースされるか不安になってきた テンプレートエンジンが生成した HTML が意図通りにパースされるのかも不安 ？？？「DOM ツリー作って .innerHTML 取れば 完璧な HTML になるのでは」 7
8. びっくり事実: DOM ツリーを シリアライズしてパースすると違う木になりうる ……と、仕様に注意書きがある 8 引用元: https://html.spec.whatwg.org/multipage/parsing.html
9. びっくり事実: DOM ツリーを シリアライズしてパースすると違う木になりうる 実例もある！ 9
10. この挙動使ってサニタイザすり抜けができた (今は修正済み) 詳細:「HTMLパーサー自作で理解するmXSS (CVE-2019-16728・CVE-2020-6413 篇)」 10
11. おわりに HTMLの仕様は膨大、複雑怪奇。でも パーサーを自分で書いてみると、意外と読み解ける ブラウザ自作を通して、Web仕様の理解を深めよう! 11