> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# セキュリティチェックリスト

> バイブコーディングアプリがセキュリティのベストプラクティスに従っているかを確認するための包括的なセキュリティチェックリスト。

このガイドでは、バイブコーディングアプリがセキュリティのベストプラクティスに従っているかを確認するための包括的なセキュリティチェックリストを提供します。

Replitは多くのセキュリティ機能を[標準で](/references/security/overview)提供していますが、特定のアプリケーションのニーズに合わせてより多くのセキュリティ対策を理解・実装することが重要です。

<iframe src="https://www.youtube.com/embed/0D9FMFyNBWo" title="バイブコードセキュリティチェックリスト" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

## 前提条件

* Replitアカウント
* 使用するプログラミング言語の基本的な理解
* プロジェクトエディターの使い方
* Replitで構築中のアプリケーション

## フロントエンドセキュリティ

<AccordionGroup>
  <Accordion title="HTTPS everywhere" icon="lock">
    ReplitはすべてのアプリケーションでデフォルトでHTTPSを使用します。心配する必要はありません！
  </Accordion>

  <Accordion title="入力バリデーションとサニタイズ" icon="shield-check">
    クロスサイトスクリプティング（XSS）攻撃を防ぐために、常にユーザー入力をバリデーション・サニタイズしてください：

    ```javascript theme={null}
    // Bad: Direct use of user input
    element.innerHTML = userInput;

    // Good: Sanitize input before using
    import { sanitize } from 'some-sanitizer-library';
    element.innerHTML = sanitize(userInput);
    ```

    [Liteモード](/references/agent/agent-modes)に切り替えてAgentに聞いてください：

    ```
    Help me validate and sanitize inputs to protect against XSS attacks
    ```
  </Accordion>

  <Accordion title="機密データをブラウザに置かない" icon="eye-slash">
    APIキーなどの機密情報の保存にはReplit Secretsを使用してください。

    シークレットをクライアントサイドに渡したり、以下の場所に置かないようにしてください：

    * ローカルストレージ
    * セッションストレージ
    * クライアントサイドJavaScript
    * 適切なセキュリティ属性なしのCookie

    [Liteモード](/references/agent/agent-modes)に切り替えてAgentに聞いてください：

    ```
    Help me keep sensitive data out of the browser. Am I doing this correctly?
    ```
  </Accordion>

  <Accordion title="CSRF対策" icon="shield">
    フォームにクロスサイトリクエストフォージェリ（CSRF）対策を実装してください：

    ```javascript theme={null}
    // Example of CSRF token implementation
    const csrfToken = generateToken();
    session.csrfToken = csrfToken;
    ```

    [Liteモード](/references/agent/agent-modes)に切り替えてAgentに聞いてください：

    ```
    Help me implement CSRF tokens for forms
    ```
  </Accordion>
</AccordionGroup>

## バックエンドセキュリティ

<AccordionGroup>
  <Accordion title="認証の基本" icon="key">
    認証を実装する際：

    * 可能な場合はReplit Authを使用する
    * カスタム認証を構築する場合は確立されたライブラリを使用する
    * パスワードを平文で保存しない

    Agentに聞いてください：

    ```
    Help me implement authentication for my application with Replit Auth
    ```
  </Accordion>

  <Accordion title="認可チェック" icon="user-lock">
    アクションを実行する前に必ず権限を確認してください：

    ```javascript theme={null}
    // Example authorization check
    if (!user.canAccess(resource)) {
      return res.status(403).send('Access denied');
    }
    ```

    Agentに聞いてください：

    ```
    Help me implement authorization checks for my application
    ```
  </Accordion>

  <Accordion title="APIエンドポイントの保護" icon="shield">
    APIエンドポイントを安全にする：

    * 機密エンドポイントに認証を追加する
    * 適切なCORS設定を実装する
    * レート制限を検討する

    [Liteモード](/references/agent/agent-modes)に切り替えてAgentに聞いてください：

    ```
    How do I properly authenticate endpoints in my app?
    ```
  </Accordion>

  <Accordion title="SQLインジェクション対策" icon="database">
    AgentはデフォルトでORMを使用するため、SQLインジェクションを防ぐのに役立ちます。カスタムデータベースクエリを書く場合：

    ```javascript theme={null}
    // Bad: String concatenation in queries
    db.query(`SELECT * FROM users WHERE username = '${username}'`);

    // Good: Parameterized queries with ORM
    db.query('SELECT * FROM users WHERE username = ?', [username]);
    ```
  </Accordion>

  <Accordion title="セキュリティヘッダー" icon="code">
    アプリケーションに重要なセキュリティヘッダーを追加してください：

    ```html theme={null}
    <!-- In index.html or through your back-end -->
    <meta http-equiv="X-Frame-Options" content="DENY">
    <meta http-equiv="X-Content-Type-Options" content="nosniff">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
    ```

    [securityheaders.com](https://securityheaders.com)でサイトをスキャンして推奨事項を確認できます。

    [Liteモード](/references/agent/agent-modes)に切り替えてAgentに聞いてください：

    ```
    Can you add the security headers to my application?
    ```
  </Accordion>
</AccordionGroup>

## 継続的なセキュリティプラクティス

<AccordionGroup>
  <Accordion title="依存関係を最新の状態に保つ" icon="arrow-rotate-right">
    脆弱性を持つ可能性のある古いパッケージを定期的に確認してください：

    ```bash theme={null}
    npm audit
    ```
  </Accordion>

  <Accordion title="適切なエラー処理" icon="exclamation">
    エラーメッセージで機密情報を公開しないでください：

    ```javascript theme={null}
    // Bad: Exposing sensitive details
    catch (err) {
      res.status(500).send(`Database error: ${err.message}`);
    }

    // Good: Generic error message
    catch (err) {
      console.error(err); // Log internally
      res.status(500).send('An error occurred');
    }
    ```

    Agentに聞いてください：

    ```
    Help me implement proper error handling for my application
    ```
  </Accordion>

  <Accordion title="Cookieのセキュリティ" icon="cookie">
    Cookieを使用する際：

    * JavaScriptアクセスを防ぐためにHttpOnlyフラグを設定する
    * HTTPSを必須にするためにSecure属性を使用する
    * CSRFを防ぐためにSameSite属性を実装する

    Agentに聞いてください：

    ```
    Help me secure my cookies for my application
    ```
  </Accordion>

  <Accordion title="ファイルアップロードのセキュリティ" icon="upload">
    アプリケーションでファイルアップロードを許可する場合：

    * ファイルタイプとサイズを制限する
    * 可能であればマルウェアをスキャンする
    * Replitのオブジェクトストレージにファイルを保存する
    * ユーザー提供のファイル名を使用せず、新しいファイル名を生成する

    Agentに聞いてください：

    ```
    Help me secure my file uploads for my application
    ```
  </Accordion>

  <Accordion title="レート制限" icon="clock">
    特に認証関連のAPIエンドポイントにレート制限を実装してください：

    ```javascript theme={null}
    // Example rate limiting middleware
    const rateLimit = require('express-rate-limit');

    const limiter = rateLimit({
      windowMs: 15 * 60 * 1000, // 15 minutes
      max: 100 // limit each IP to 100 requests per windowMs
    });

    app.use('/api/', limiter);
    ```

    Agentに聞いてください：

    ```
    Help me implement rate limiting for my application
    ```
  </Accordion>
</AccordionGroup>

## チェックリスト

セキュリティプラクティスを管理するためのチェックリストです。

## フロントエンドセキュリティ

|   | セキュリティ対策            | 説明                                 |
| - | ------------------- | ---------------------------------- |
| ☐ | HTTPS everywhere    | 基本的な盗聴や中間者攻撃を防ぐ                    |
| ☐ | 入力バリデーションとサニタイズ     | すべてのユーザー入力をバリデーションしてXSS攻撃を防ぐ       |
| ☐ | ブラウザに機密データを保存しない    | ローカルストレージやクライアントサイドコードにシークレットを置かない |
| ☐ | CSRF対策              | フォームと状態変更リクエストに対してアンチCSRFトークンを実装する |
| ☐ | フロントエンドにAPIキーを公開しない | API認証情報は常にサーバーサイドに保持する             |

## バックエンドセキュリティ

|   | セキュリティ対策       | 説明                                               |
| - | -------------- | ------------------------------------------------ |
| ☐ | 認証の基本          | 確立されたライブラリ、適切なパスワード保存（ハッシュ+ソルト）を使用する             |
| ☐ | 認可チェック         | アクションを実行する前に必ず権限を確認する                            |
| ☐ | APIエンドポイントの保護  | すべてのAPIエンドポイントに適切な認証を実装する                        |
| ☐ | SQLインジェクション対策  | パラメータ化クエリまたはORMを使用し、ユーザー入力で生のSQLを使用しない           |
| ☐ | 基本的なセキュリティヘッダー | X-Frame-Options、X-Content-Type-Options、HSTSを実装する |
| ☐ | DDoS対策         | 組み込みのDDoS軽減機能を持つCDNまたはクラウドサービスを使用する              |

## 実践的なセキュリティ習慣

|   | セキュリティ対策          | 説明                                     |
| - | ----------------- | -------------------------------------- |
| ☐ | 依存関係を最新の状態に保つ     | ほとんどの脆弱性は古いライブラリから来る                   |
| ☐ | 適切なエラー処理          | エラーメッセージで機密の詳細を公開しない                   |
| ☐ | Cookieのセキュリティ     | HttpOnly、Secure、SameSite属性を設定する        |
| ☐ | ファイルアップロードのセキュリティ | ファイルタイプ、サイズをバリデーションし、悪意のあるコンテンツをスキャンする |
| ☐ | レート制限             | すべてのAPIエンドポイント、特に認証関連に実装する             |
