【React】dangerouslySetInnerHTMLを使う方法

悩んでいる人

ReactのdangerouslySetInnerHTMLを使ってみたいんだけど、使い方が分からないんだよね…

こんな疑問にお答えします。

  • 本記事の執筆者
プロフィール
  • フリーランスエンジニア(保有資格約20個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • Twitterフォロワー約2,000人
いずみん

本記事を書いている僕はエンジニア歴7年です。
Reactは業務経験があるので、かなり有益な情報を発信できるかと思います。

結論、dangerouslySetInnerHTMLはHTMLの埋め込みなどに便利です。

ただし、名前の通り、使い方には注意が必要です。

本記事を読んでもらえれば、dangerouslySetInnerHTMLを使う方法が理解できるので早速見ていきましょう。

いずみん

すぐ読み終わるので、是非最後まで読んでみてください!

目次

dangerouslySetInnerHTMLは何に使う?

dangerouslySetInnerHTMLはHTMLの埋め込みに使います。

HTMLを埋め込むのに便利ですが、スクリプトも実行される危険性があるので注意しましょう。

いずみん

XSS(クロスサイトスクリプティング)の要因になるので注意してくださいね。
⇨dangerouslyとあるのはセキュリティ的に危険だからです。

dangerouslySetInnerHTMLの使い方

dangerouslySetInnerHTMLは、「__htmlプロパティを持つObjectを渡す」ことで使えます。

const App = () => {
  const html = `
    <html>
      <script>
        alert('うんち');
      </script>
      <body>
        <div>
          <button onClick="alert('うんち')">うんち爆弾</button>
        </div>
      </body>
    </html>
  `;

  return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
};

↑のようにhtmlを渡してあげればOKです。

dangerouslySetInnerHTMLを使う際の注意点

dangerouslySetInnerHTMLを使う際は、XSS(クロスサイトスクリプティング)に注意しましょう。

埋め込むHTMLが決まっている場合は問題ありませんが、動的に変わる場合はサニタイズした方が良いかもしれません。

いずみん

固定のHTMLを埋め込むだけなら十分使えるので、用途を考えて使用しましょう。

よくある質問|dangerouslySetInnerHTML

dangerouslySetInnerHTMLは何に使いますか?

HTMLの埋め込みに使います。

dangerouslySetInnerHTMLはどのように使うのですか?

__htmlプロパティを持つObjectを渡す」ことで使えます。

dangerouslySetInnerHTMLを使う際の注意点はありますか?

HTMLを埋め込むので、XSS(クロスサイトスクリプティング)に注意しましょう。

まとめ|dangerouslySetInnerHTMLを使う方法

今回は、dangerouslySetInnerHTMLを使う方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • dangerouslySetInnerHTMLはHTMLの埋め込みに使う。
  • dangerouslySetInnerHTMLは「__htmlプロパティを持つObjectを渡す」ことで使える。
  • dangerouslySetInnerHTMLを使う際はXSS(クロスサイトスクリプティング)に注意する。

この記事があなたのお役に立てば幸いです。

サイト内には、他にも初心者向けの記事を多く投稿していますので良ければ参考にしてみてください。

最後までお読みいただきありがとうございました!

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次