SQLインジェクションとXSS

なぜ学ぶか： Webセキュリティの二大古典がSQLインジェクションとXSS。名前は怖いですが、仕組みは「ユーザー入力が『データ』ではなく『命令』として実行されてしまう」という一点。現代のツール（React・Supabase）は多くを自動で防いでくれますが、その「守りを自分から外す書き方」を知っておくことが大事です。

共通の原理：入力が『命令』になる

本来ただのデータであるべき入力が、SQLやHTMLの命令として解釈されると乗っ取られます。両者に共通する根っこです。

SQLインジェクション

入力をSQL文に直接つなげると、'; DROP TABLE ...のような文字列が命令として実行される攻撃。Supabaseの.eq()など正規の方法を使えば自動で防がれます。

XSS

入力に含まれた<script>が、他ユーザーの画面で実行される攻撃。Reactは{}の中身を自動でエスケープする（ただの文字として表示する）ので、通常は安全です。

自分で守りを外す危険な書き方

ReactのdangerouslySetInnerHTMLは名前の通り危険な窓。生SQLを文字列連結で組むのも同じ。AIがこれらを使っていたら要注意です。

コード例

// XSS: React は通常、自動でエスケープしてくれる
function Comment({ text }: { text: string }) {
  // text が "<script>..." でも、ただの文字として表示される（安全）
  return <p>{text}</p>;
}

// ❌ 危険: 自分で「守り」を外す書き方
function DangerousComment({ html }: { html: string }) {
  // 名前の通り危険。ユーザー入力を渡すと XSS の穴になる
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

ReactもSupabaseも「普通に使えば安全」に設計されています。危険なのはdangerouslySetInnerHTMLや生SQL連結のように、自分から守りを外す書き方。AIコードでこれらを見たら理由を確認しましょう。

ステップ 1 / 2

← カリキュラム一覧へ戻る

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。