【React】dangerouslySetInnerHTMLを使う方法

当ページのリンクには広告が含まれています。
いずみ

こんな悩みを解決できる記事を書きました!

僕は現役フリーランスエンジニア(歴年)で、資格は個保有しています。

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

ただし、使い方には注意が必要です。

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

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいね♪

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴5年
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資歴5年(仮想通貨・FXが得意)
  • Twitterフォロワー約2,000人
  • 運営者情報はこちら
いずみです
目次

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は何に使いますか?

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

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

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

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

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

まとめ

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

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

まとめ
  • dangerouslySetInnerHTMLはHTMLの埋め込みに使う。
  • dangerouslySetInnerHTMLは「__htmlプロパティを持つObjectを渡す」ことで使える。
  • dangerouslySetInnerHTMLを使う際はXSS(クロスサイトスクリプティング)に注意する。
まとめ♪
  • おすすめ本
¥2,673 (2023/07/24 11:20時点 | Amazon調べ)

Reactの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

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

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

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