バイト列がDOMになる — 閉じ忘れても表示される理由

通し例題の index.html は <h1>Hello</h1> の1行だけで、DOCTYPE も html も head も body もありません。この開始タグの扱いを仕様の逐語で追います。

開始状態は "initial" で、DOCTYPE の場所にタグが来たので Anything else に落ちます。

If the document is not an iframe srcdoc document, then this is a parse error; if the parser cannot change the mode flag is false, set the Document to quirks mode. In any case, switch the insertion mode to "before html", then reprocess the token.

2つのことが起きます。parse error になり、Document が quirks mode に設定されること。そして reprocess the token —— トークンは消費されず次のモードで再び処理されます。

続く "before html" の Anything else は Create an html element whose node document is the Document object. Append it to the Document object.、"before head" は Insert an HTML element for a "head" start tag token with no attributes.、"in head" は Pop the current node (which will be the head element) off the stack of open elements.、"after head" は Insert an HTML element for a "body" start tag token with no attributes.。いずれも末尾に「同じトークンを再処理する」とあります。

> new DOMParser().parseFromString("<h1>Hello</h1>", "text/html").documentElement.outerHTML
'<html><head></head><body><h1>Hello</h1></body></html>'
 
> new DOMParser().parseFromString("<h1>Hello</h1>", "text/html").compatMode
'BackCompat'
 
> new DOMParser().parseFromString("<!DOCTYPE html><h1>Hello</h1>", "text/html").compatMode
'CSS1Compat'

要素は4個 —— html・head・body・h1 で、3個は書いていません。compatMode は BackCompat、DOCTYPE を足すと CSS1Compat に変わり、仕様の言う quirks mode がここに現れます(quirks mode になる、というところまでが本レッスンの範囲です)。

なお、パースの前に「バイト列をどの文字集合として読むか」が決まっている必要があります。前のレッスンで見た Content-Type の charset は encoding sniffing algorithm の4段目 If the transport layer specifies a character encoding, and it is supported, return that encoding with the confidence certain. にあたり、上に BOM とユーザー上書き、下に prescan・親文書・履歴・自動判別が続きます。どれも当たらなければ最終段階 return an implementation-defined or user-specified default character encoding, with the confidence tentative. です。「既定は UTF-8」とは書かれていません(locale 別の推奨表では ja が Shift_JIS)。通し例題には BOM も meta charset も無いのでここまで落ちます。

同じ「壊れた入力」でも逆の扱いになる例が、第41週『なぜ入力がコードになるのか — インジェクションの原理』で扱う SQL のプレースホルダです。

あのレッスンの言い方では、「構文は1の時点で確定しています」 —— 問い合わせ文の構造を先に全部定義し、値は後から渡します。だから後から渡した値は構文を作り直せません。危険の正体は特定の記号ではなく、「値が構文になれる位置」 にあることだと説明されます。

裏返すと、文字列を組み立てた場合は値が構文の位置に入り込み、成立しない並びが来ればその問い合わせは実行されずにエラーになります。構文が確定しない限り先へ進まないからです。

HTML は逆で、<p>a<div>b</div>c</p> のように入れ子が破綻してもパーサは止まらず木を出します。ただし出てくる木は書いたものとは違います。

> new DOMParser().parseFromString("<p>a<div>b</div>c</p>", "text/html").documentElement.outerHTML
'<html><head></head><body><p>a</p><div>b</div>c<p></p></body></html>'

<div> は <p> の中に入っていません。"in body" の div 開始タグの規則が If the stack of open elements has a p element in button scope, then close a p element. だからです。c は p の外、body 直下に置かれます。最後の </p> は対応する p がもう無いので this is a parse error; insert an HTML element for a "p" start tag token with no attributes. —— 空の <p></p> が末尾に増えます。c が「2つ目の p に入る」のではありません。