30
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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で公開しています。
    • サニタイズ部分はサボってますごめんなさい。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
30
Help us understand the problem. What are the problem?