ReactのdangerouslySetInnerHTML使ってみた

何に使えるの？

マークダウンエディタを作りたい場合など、ブラウザ上で記述したHTMLのプレビューを作りたいときに使えます。
社内システムでHTMLのプレビュー画面が作れないか？という相談を受けたので調べて使ってみました。

dangerouslySetInnerHTML

dangerouslyuSetInnerHTML属性に__htmlプロパティを持つObjectを渡してあげると動作します。textには、入力されたテキストエリアの文字列が入っています。

const Preview = props => {
  const { text } = props
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: text
      }}
    />
  )
}

dangerouslyの由来

innerHTMLもそうですが、これを使うことでXSSの脆弱性を生み出すことがあります。
innerHTMLの仕様で<script>タグは使えませんが、onclickなどのイベントは実行することができるので、下記の様に書くことで任意のJavascriptコードを実行することができます。

<button onclick"alert('Hi!!!')">Click here!!!</button>

ということで直接もらった文字列を設定するのは良くないです。(↑は悪い例)
本家のドキュメントにも記載してありますが、↓のように必ず入力値の検証処理などを挟んで任意のコードを実行されないようにしましょう。

const Preview = props => {
  const { text } = props
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: sanitizing(text)
      }}
    />
  )
}

まとめ

• ReactのdangerouslySetInnerHTMLを触ってみました。
• dangerouslyの名前通りXSSになる危険性があるので用法用量を守って正しくお使いください。※ 使わなくて済むなら使わないほうがいいです。
• 今回のソースコードの完全版はgithubで公開しています。
  • サニタイズ部分はサボってますごめんなさい。

参考

• React - dangerouslySetInnerHTML
• MDN - element.innerHTML