【React】dangerouslySetInnerHTMLを使う方法
悩んでいる人ReactのdangerouslySetInnerHTMLを使ってみたいんだけど、使い方が分からないんだよね…
こんな疑問にお答えします。
この記事で分かること
- 本記事の執筆者
本記事を書いている僕はエンジニア歴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(クロスサイトスクリプティング)に注意する。
この記事があなたのお役に立てば幸いです。
サイト内には、他にも初心者向けの記事を多く投稿していますので良ければ参考にしてみてください。
最後までお読みいただきありがとうございました！
あわせて読みたい
【React/Next.js】遷移元のURLを取得する方法！
Reactで遷移元のURLを取得したいんだけど、やり方が分からないんだよね… こんな疑問にお答えします。 この記事で分かること 遷移元のURLを取得する方法 本記事の執筆…
この記事が気に入ったら
フォローしてね！