はじめに
こんにちは！@nyakako13 です。
少し前からReact,TypeScriptの学習をしています。
作成中のReactアプリでユーザーが入力したHTMLをレンダリングする部分があったので、ReactアプリでのHTMLレンダリングとサニタイズについて調べてみました。
サニタイズとは文字やコードを安全な形に変換する処理のことを指します。 具体的には、ユーザーからの入力や外部からのデータに含まれる有害な文字やコードを、実行や表示されない形に変換することです。 この処理により、Webサイトやアプリケーションが不正な操作をされるリスクを大幅に減少させることができます。
dangerouslySetInnerHTMLについては、こちらの記事も参考にさせていただきました。
方法①dangerouslySetInnerHTMLを使う
dangerouslySetInnerHTMLとは？
dangerouslySetInnerHTMLは、ReactがHTML文字列を直接DOMに挿入するための方法です。しかし、このメソッドは名前の通り危険で、適切なサニタイズを行わないとXSS攻撃の対象となる可能性があります。
サニタイズ用ライブラリのインストール
まず、dompurifyをインストールします。HTMLをサニタイズするためのライブラリです。
npm install dompurify
使用例
dangerouslySetInnerHTMLを使ってHTMLを挿入する前に、DOMPurifyを使ってサニタイズします。
import DOMPurify from "dompurify";
interface SanitizedComponentProps {
html: string;
}
const DangerouslySanitizedComponent = ({ html }: SanitizedComponentProps) => {
const sanitizedHtml = DOMPurify.sanitize(html);
return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }}></div>;
};
export default DangerouslySanitizedComponent;
方法②html-react-parserの使う
html-react-parserとは？
html-react-parserは、HTML文字列をReact要素に変換するライブラリです。これにより、HTMLを安全にレンダリングするための柔軟な方法が提供されます。
react-html-parserという似た名前のライブラリもあります。
html-react-parserは定期的に更新されており、最新のReactバージョンとの互換性が保たれています。一方、react-html-parserは更新頻度が低く、最新のReactバージョンと互換性が必ずしも保証されていない場合があります。基本的にhtml-react-parserを使う方が良さそうです。
気になる方はスター数や最終更新日を確認してみてください。
インストール
まず、html-react-parserとdompurifyをインストールします。
npm install html-react-parser dompurify
使用例
DOMPurifyでサニタイズしたHTMLをparseするだけ。簡単、スッキリ！
import DOMPurify from "dompurify";
import parse from "html-react-parser";
import { FC } from "react";
interface Props {
html: string;
}
const ParserSanitizedComponent: FC<Props> = ({ html }) => {
const sanitizedHtml = DOMPurify.sanitize(html);
return parse(sanitizedHtml);
// 比較用
// return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }}></div>;
};
export default ParserSanitizedComponent;
感想
dangerouslySetInnerHTMLは属性なので、何らかのタグと使う必要があり、不要なタグが一つ増えてしまいます。
使用ライブラリが増えてしまうというデメリットはありますが、それが問題なければhtml-react-parserを使う方が良いかなと個人的には感じました。
dangerously というドキドキワードをコード内に含めなくて良いのも精神安定的に良い気がしますw
おわりに
よかったらX(@nyakako13)もフォローしてもらえると嬉しいです。
Qiita100投稿まで残り84！
未経験や浅経験、厳しいと言われている年代でエンジニアへの転職活動されている方、負けずにがんばりましょう！！
参考