JavaScriptにAPIキーを直書きしてしまうと、誰でも簡単にそのAPIキーを取得できるため、セキュリティ上非常に危険です。APIキーを安全に管理するためのチェックリスト

JavaScriptにAPIキーを直書きしてしまうと、誰でも簡単にそのAPIキーを取得できるため、セキュリティ上非常に危険です。APIキーの盗難を防ぐためには、以下の方法を検討してください。

### 解決方法

1. **APIキーをサーバーサイドで管理する**  

   クライアントサイド（ブラウザ）にAPIキーを埋め込まず、サーバーサイド（バックエンド）でAPIキーを管理します。クライアントからは、サーバーにリクエストを送り、サーバーが代わりにGPT-4 APIを呼び出してその結果を返す形にします。

2. **プロキシサーバーを設置する**  

   プロキシサーバーを作成し、クライアントからプロキシサーバーを経由してAPIリクエストを行う方法です。プロキシサーバーがAPIキーを使用してAPIを呼び出し、クライアントに結果を返します。

3. **環境変数でAPIキーを管理する**  

   サーバーサイドでAPIキーを環境変数に設定し、コード上には直接記載しないようにします。こうすることで、APIキーが漏洩するリスクを減らします。

### 必要なもの

- **サーバーサイドの設定**: Azure上でサーバーサイドのコードを実行できる環境を設定します。例えば、Azure FunctionsやAzure App Serviceなどを使用できます。

- **APIキーの管理**: Azure Key Vaultを使用してAPIキーを安全に管理することができます。サーバーサイドのコードからKey VaultにアクセスしてAPIキーを取得します。

### 修正の手順

1. **バックエンドの構築**:

   - Azure FunctionsやAzure App Serviceを使用して、サーバーサイドのAPIエンドポイントを構築します。

   - このエンドポイントが、クライアントからのリクエストを受け取り、GPT-4 APIを呼び出し、その結果を返す役割を果たします。

2. **APIキーの管理**:

   - Azure Key VaultにAPIキーを保存します。

   - サーバーサイドのコードで、Azure Key VaultからAPIキーを取得して使用します。

3. **フロントエンドの修正**:

   - 現在JavaScriptに直書きしている部分を、サーバーサイドのエンドポイントにリクエストを送る形に修正します。

### サンプルコード

以下は簡単なサンプルコードです。

#### バックエンド (Node.js + Express)

```javascript

const express = require('express');

const axios = require('axios');

const { DefaultAzureCredential } = require('@azure/identity');

const { SecretClient } = require('@azure/keyvault-secrets');

const app = express();

const port = process.env.PORT || 3000;

const credential = new DefaultAzureCredential();

const vaultName = "your-keyvault-name";

const url = `https://${vaultName}.vault.azure.net`;

const client = new SecretClient(url, credential);

async function getAPIKey() {

  const secret = await client.getSecret("your-api-key-secret-name");

  return secret.value;

}

app.use(express.json());

app.post('/api/gpt4', async (req, res) => {

  try {

    const apiKey = await getAPIKey();

    const response = await axios.post('https://api.openai.com/v1/engines/gpt-4/completions', {

      prompt: req.body.prompt,

      max_tokens: req.body.max_tokens

    }, {

      headers: {

        'Authorization': `Bearer ${apiKey}`

      }

    });

    res.json(response.data);

  } catch (error) {

    res.status(500).send(error.toString());

  }

});

app.listen(port, () => {

  console.log(`Server running on port ${port}`);

});

```