【React】dangerouslySetInnerHTMLを使う方法

Q: dangerouslySetInnerHTMLは何に使いますか？

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

Q: dangerouslySetInnerHTMLはどのように使うのですか？

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

2023年7月29日

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

この記事で解決できる悩み

dangerouslySetInnerHTMLは何に使うのか？
dangerouslySetInnerHTMLの使い方は？
dangerouslySetInnerHTMLを使う際の注意点は？

いずみ

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

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

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

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

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

いずみ

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

執筆者／監修者

フリーランスエンジニア（保有資格13個）
ブログ・アフィリエイト歴5年
ブランドせどりで月利50万円⇨脱サラ
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です。