✏️
マークアップエディタ記法の実装とXSS対策
テキストエリアに入れる値をマークアップしたい。
テキストエリアの値の変更をonChangeイベントで発生させる。
マークダウン記法を設定するために、markedをインストールする。
markedのセットアップに関しては以下の記事を参考にしてください。
今回のセットアップに関しては、テキストエリアの段落記載をプレビューに反映させるためのものです。
マークアップテキストをパースする。
以下の記述では、allowedTagsにはタグの機能を許可するものを書く。
disallowedTagsModeには今回はrecursiveEscapeを書く。(今回はタグをエスケープしたいので。)
入力したテキストはXSS対策が必要である。
例:<button onClick={()⇒alert("イタズラしちゃうぞ");}>押しましょう</button>
例のコードのbuttonタグが全て通ってしまい、押してしまうとwindowアラートが発生する。
XSS対策ができていれば、出力後の値はbuttonタグをbuttonタグと解釈せず、HTMLとして解釈してくれる。
XSS対策としてサニタイズが必要であるため、以下のsanitize-htmlをインストールする。
以下の記述では、allowedTagsにはタグの機能を許可するものを書く。
disallowedTagsModeには今回はrecursiveEscapeを書く。(今回はタグをエスケープしたいので。)
以下のコードが全体像である。
テキストエリアに入れた値がマークアップされて、プレビューの下に返ってくる。