ReactのdangerouslySetInnerHTMLとXSS 防御

はじめに

自己紹介カードをアプリで作成しようとしたさい、紹介文はHTMLで表現することになりました。
そのさい、dangerouslySetInnerHTMLを使い、XSS防御のことを学びました。

XSSとは？

特定のスクリプトをユーザーのブラウザで実行させることで個人情報漏洩などを引き起こす悪意のある攻撃のことです。
言い換えると、大事な情報を取るために、怪しまれないよう情報を取ることを指します。

dangerouslySetInnerHTMLとDOMPurify

ReactのdangerouslySetInnerHTMLを使うとXSS攻撃にあう可能性が高くなります。
DOMPurifyはXSS攻撃から守るために使われています。
「ユーザーが入力したHTMLを安全にブラウザに表示する」ことに特化しています。

使い方

dangerouslySetInnerHTMLとDOMPurifyを使ったコードが以下になります。
あくまでも一例です。

Card

import { Card, Text } from "@chakra-ui/react";
import DOMPurify from "dompurify";

export const Cards: FC = memo(() => {
    const [supabaseData, setSupabaseData] = useState<Users[]>([]);

    return (
            {supabaseData.map((user) => (
                <div key={user.user_id}>
                    <Text dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(`自己紹介: ${user.description}`) }}></Text>
                </div>
            ))}
    )
});

DOMPurify.sanitize()の中で今回ユーザーが入力したHTMLを保護するようにしています。

おわりに

XSSのことをなんとなくでしか知らなかったので勉強になりました。

参考文献