開発者ツール · HTML WYSIWYG エディター
編集者向けの DOM の説明: HTML がテキスト ファイルではなくツリーである理由
· 背景
html ドム コンテンツ編集可能
非プログラマ向けにドキュメント オブジェクト モデルを紹介し、ネスト ルール、親要素と子要素、およびブラウザが無効なネストを修復する方法を取り上げ、恣意的に見えるエディターの動作を説明します。
<p> が自動的に閉じられる理由 — 貼り付け後に変更されたマークアップで開きます
フラグメントがエディターを通過した後、段落が閉じたり移動したように見える場合があります。これは、作成者の元の文字シーケンスではなく、結果として得られるツリーが最終的に重要であるためです。 ToolAcre は別の変換を追加します。ブラウザー由来のソースをトークン化して、独自の許可リストに書き換えます。
ソースが変更された場合は、どの段階で変更されたかを尋ねます。ブラウザーがコンテンツ編集可能な DOM を変更したか、サニタイザーがエイリアスをマップしたり、ノードのラップを解除したり、受け入れられたタグのバランスをとったりした可能性があります。すべての違いを「ブラウザが修正した」と呼ぶと、この重要な境界が隠されてしまいます。
ボックスの中にボックス — 短い例とともにツリー モデルを紹介します
要素は、親子関係で接続されたボックスと考えてください。 `<p>Read <strong>carefully</strong>.</p>` では、p はテキストの親であり、強力なテキスト、およびその他のテキストです。強いは慎重に言葉の親です。ソースのインデントはツリーを示すことはできますが、関係を作成するものではありません。
ToolAcre のきれいなフォーマッタは、ブロック コンテナを行に配置し、周囲のテキストとともにインライン要素を保持します。リストにはインデントされた li 行が表示されます。この形式は、サニタイズされた出力を読み取るためのものです。実際のモデルは、ソースがコンパクトであるか行にまたがっているかに関係なく、ネストされた要素とテキスト ノードのままです。
許可されたネストは、ToolAcre のリライターによってバランスがとられています。ブラウザのコンテンツモデルはより広範です
HTML は、この編集者のポリシーよりもはるかに広範囲かつ詳細なコンテンツ モデルを定義します。 ToolAcre は特定のセットを許可しますが、すべてのセマンティック ネスト ルールを検証するわけではありません。そのスタックにより、許可されたタグ間で適切な形式のクロージャーが保証されます。これは、結果として得られるすべての関係が宛先にとって理想的な HTML であることを証明するものではありません。
たとえば、リストには適切なリスト項目が含まれている必要がありますが、汎用スタックはスキーマ検証ツールではないため、許可されている異常な組み合わせを保存できます。著者は、ツールバーまたはレビューされたソースを使用して賢明な見出し、段落、リストを作成し、正確さが重要な場合は宛先の要件に基づいて検証する必要があります。
ToolAcre は、完全な HTML 解析アルゴリズムではなく、スタックを使用して受け入れられたタグを修復します
ブラウザは、エラー回復機能を備えた完全な HTML 解析アルゴリズムを適用します。 ToolAcre はそれを再実装しません。そのトークナイザーは、ホワイトリストに必要な構造を認識し、交差する終了タグが出現すると、ライターは受け入れられた内部要素を閉じます。漂流クローズを落とし、最後に残りのオープンをクローズします。
ソースでは、モジュールを一般的な敵対的な入力 XSS フィルターとして扱わない理由として、パーサーの差分を明示的に挙げています。ブラウザは、意図的に不正な形式の文字列を別の方法で解釈する可能性があります。プレビュー サンドボックスは、ToolAcre 内での実行に独立した制限を提供しますが、サーバーには引き続き HTML5 対応の適切なサニテーションが必要です。
テキスト ノードと空白 — ツリー内にタグ間のスペースと改行が存在する理由を説明します
要素間のテキストは、空白文字を含むテキスト トークンになります。 Pretty フォーマッタは、pre の外側の通常の空白を縮小しますが、pre のコンテンツは正確に保持されます。プレーンテキスト変換では、ブロック末尾と br の後に改行が挿入され、過剰な空白行の実行が削減されます。
したがって、空白は各段階で異なる方法で関与します。視覚的な間隔は、テキスト、br、ブロック境界、または CSS から取得できます。目に見えるすべてのギャップをマージンとして扱うのではなく、ノードと文字を検査します。サニタイザーは、読者に表示される単語を変更せずに、空白の書式設定を正規化する場合があります。
作業例: 2 段落のメモをリストでトレース — 生成されたマークアップをツリーとして読み取り、親と子を識別します
`<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>` をビルドします。フラグメントには 3 つのルートレベルの子要素があります。段落にはテキストが含まれており、強力です。リストには 2 つの li の子が含まれており、それぞれにテキストが含まれています。
ソースからビジュアルに切り替え、またその逆に切り替えます。許可されたツリーはバランスを保つ必要があり、Pretty モードではリスト項目をインデントしながら見出しと段落を行に配置します。この演習は管理されています。不正な入力やブラウザの修復パスをすべて示すわけではありません。
この内容の対象外 — JavaScript DOM プログラミングまたは CSS ボックス モデル
この記事では、JavaScript DOM プログラミング、突然変異オブザーバー、選択 API、または CSS ボックス モデルについては説明しません。要素ツリーとレイアウト ボックス ツリーは関連していますが、同一ではありません。また、手書きのトークン リストがブラウザ DOM であるとも主張しません。
整然としたツリーからは一般化されたセキュリティに関する結論は得られません。攻撃者は解析の相違点や URL をターゲットにする可能性があるため、出力フィルタリング、サンドボックス プレビュー、およびサーバーのサニテーションが区別されたままになっています。ツリー モデルは、受信側システムのセキュリティ レビューを放棄するためではなく、構造について推論するために使用します。
要点: ツリーで考える — メンタル モデルと、ToolAcre の HTML WYSIWYG エディターのマークアップ出力に構築中のツリーがどのように表示されるかを要約します。
視覚的な動作が恣意的に見える場合は、ツリーで考えてください。意図した親、子、テキスト ノードを特定し、フィルタリングされたソースと比較します。 ToolAcre は、コンテンツ編集可能なドラフトと読み取り可能な書き換えられたフラグメントを組み合わせることで、この検査を実用化します。
強力なメンタル モデルは限界も明らかにします。ラップされていない div は親を失い、ドロップされたスクリプトはそのサブツリーを失い、b は強くなります。これらの変換が明確になると、修正は、マークアップが不明なままの繰り返しの視覚的なナッジではなく、構造的な決定になります。