Help us understand the problem. What is going on with this article?

ReactのdangerouslySetInnerHTML使ってみた

More than 1 year has passed since last update.

何に使えるの?

マークダウンエディタを作りたい場合など、ブラウザ上で記述した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 do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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