Reactアプリケーションのセキュリティは、ユーザー体験の信頼性と安全性を確保する上で重要な課題です。本章では、XSSやCSRFなどの攻撃に対する対策、セキュリティ監査ツールの活用、型を用いた安全なデータ処理について解説します。

1. ReactアプリケーションでのXSS対策

XSS (クロスサイトスクリプティング) とは

• 概要:
  • 攻撃者が悪意のあるスクリプトをWebページに挿入し、ユーザーのデータを盗む攻撃。

Reactでの対策

1. デフォルトのエスケープ機能:

   • ReactはJSX内での文字列挿入を自動的にエスケープします。
   • 例:

   const userInput = "<script>alert('XSS')</script>";
   return <div>{userInput}</div>; // スクリプトは無効化される

2. dangerouslySetInnerHTMLの使用を最小限に:

   • 必要に応じて明示的なエスケープ処理を行う。
   • 例:

   const sanitizedHtml = DOMPurify.sanitize(userInput);
   return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;

3. ライブラリの活用:

   • DOMPurify を使用してHTMLをサニタイズ。

2. CSRFと認証トークンの安全な取り扱い

CSRF (クロスサイトリクエストフォージェリ) とは

• 概要:
  • ユーザーの認証済みセッションを悪用して、不正なリクエストを実行する攻撃。

対策方法

1. CSRFトークンの導入:

   • サーバー側でトークンを生成し、リクエストに添付。
   • トークンを検証してリクエストの正当性を確認。
   • 例:

   import axios from "axios";
   
   const csrfToken = document.querySelector("meta[name='csrf-token']")?.getAttribute("content");
   
   axios.post("/api/action", { data: "example" }, {
     headers: { 'X-CSRF-Token': csrfToken },
   });

2. SameSite属性の利用:

   • CookieにSameSite属性を設定し、異なるサイトからのリクエストを制限。
   • 例:

   Set-Cookie: sessionId=abc123; SameSite=Strict; Secure

3. JWT (JSON Web Token) のセキュリティ:

   • トークンをローカルストレージではなくHttpOnly Cookieに保存。
   • トークンの有効期限を短く設定し、必要に応じてリフレッシュトークンを利用。

3. Webアプリケーションのセキュリティ監査ツール

OWASP ZAP (Zed Attack Proxy)

• 特徴:
  • オープンソースのWebアプリケーションセキュリティスキャナー。
  • 自動的に脆弱性を検出。

基本的な使用方法

1. インストール:

   brew install owasp-zap

2. プロキシ設定:
   • ブラウザのプロキシ設定をZAPに向ける。
3. スキャン:
   • Webアプリケーションに対してスキャンを実行し、脆弱性を特定。

その他のツール

• Burp Suite: 高度なペネトレーションテストツール。
• Snyk: 依存関係の脆弱性をチェック。
• Dependabot: GitHubでの依存関係のセキュリティアラート。

4. 型を用いた安全なデータ処理

型を利用するメリット

• 安全性:
  • 型チェックにより予期しないデータエラーを防止。
• 可読性:
  • データ構造が明確になり、コードの理解が容易に。

TypeScriptによる型安全な処理

• 入力データの型定義:

  interface User {
    id: string;
    name: string;
    email: string;
  }
  
  const validateUser = (user: User) => {
    if (!user.email.includes("@")) {
      throw new Error("Invalid email address");
    }
    return user;
  };

• APIレスポンスの型定義:

  interface ApiResponse {
    success: boolean;
    data: User;
  }
  
  const fetchUser = async (): Promise<ApiResponse> => {
    const response = await fetch("/api/user");
    return response.json();
  };

型を用いたバリデーションライブラリ

• Zod: 型定義とバリデーションを統合。
• 例:

  import { z } from "zod";
  
  const UserSchema = z.object({
    id: z.string(),
    name: z.string(),
    email: z.string().email(),
  });
  
  const validate = (user: unknown) => {
    return UserSchema.parse(user);
  };

---

セキュリティ対策は、Reactアプリケーションの堅牢性を高める重要な要素です。本章で紹介した技術やツールを活用し、セキュリティリスクを最小限に抑えたアプリケーションを構築しましょう。