【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の勉強なら「」が分かりやすくておすすめですよ♪

いずみ

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

  • クソおすすめ本
¥4,480 (2024/06/01 23:28時点 | Amazon調べ)
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。

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

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