バイブコーディングでフロントにAPIキーを書いたらハッキング被害＆高額請求｜実例とセキュリティ対策も紹介

// app/page.tsx
"use client";

import { useState } from "react";

const openaiApiKey = "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; // ← ⚠️ 危険！フロントに直書き！

export default function Page() {
  const [input, setInput] = useState("");
  const [response, setResponse] = useState("");

  const handleSubmit = async () => {
    const res = await fetch("https://api.openai.com/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${openaiApiKey}`,
      },
      body: JSON.stringify({
        model: "gpt-3.5-turbo",
        messages: [{ role: "user", content: input }],
      }),
    });

    const data = await res.json();
    const text = data.choices?.[0]?.message?.content ?? "No response.";
    setResponse(text);
  };

  return (
    <main className="max-w-xl mx-auto p-4 space-y-4">
      <h1 className="text-2xl font-bold">💬 ChatBot Demo (危険な実装例)</h1>
      <input
        type="text"
        placeholder="メッセージを入力..."
        value={input}
        onChange={(e) => setInput(e.target.value)}
        className="w-full p-2 border border-gray-300 rounded"
      />
      <button
        onClick={handleSubmit}
        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
      >
        送信
      </button>
      {response && (
        <div className="border p-3 rounded bg-gray-100 whitespace-pre-wrap">
          <strong>AIの返答:</strong> {response}
        </div>
      )}
    </main>
  );
}

# .env
NEXT_PUBLIC_OPENAI_KEY=sk-yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

// app/page.tsx
"use client";

import { useState } from "react";

const openaiApiKey = process.env.NEXT_PUBLIC_OPENAI_KEY; // ← ⚠️ 危険！.envでもこれではNG

export default function Page() {
  const [input, setInput] = useState("");
  const [response, setResponse] = useState("");

  const handleSubmit = async () => {
    const res = await fetch("https://api.openai.com/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${openaiApiKey}`,
      },
      body: JSON.stringify({
        model: "gpt-3.5-turbo",
        messages: [{ role: "user", content: input }],
      }),
    });

    const data = await res.json();
    const text = data.choices?.[0]?.message?.content ?? "No response.";
    setResponse(text);
  };

  return (
    <main className="max-w-xl mx-auto p-4 space-y-4">
      <h1 className="text-2xl font-bold">💬 ChatBot Demo (危険な実装例)</h1>
      <input
        type="text"
        placeholder="メッセージを入力..."
        value={input}
        onChange={(e) => setInput(e.target.value)}
        className="w-full p-2 border border-gray-300 rounded"
      />
      <button
        onClick={handleSubmit}
        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
      >
        送信
      </button>
      {response && (
        <div className="border p-3 rounded bg-gray-100 whitespace-pre-wrap">
          <strong>AIの返答:</strong> {response}
        </div>
      )}
    </main>
  );
}

OPENAI_API_KEY=sk-zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

// app/api/ai/route.ts
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  try {
    const { input } = await req.json();

    const apiKey = process.env.OPENAI_API_KEY; // サーバー側だけなので、公開されない
    if (!apiKey) {
      return NextResponse.json(
        { error: "Server misconfig: OPENAI_API_KEY missing" },
        { status: 500 }
      );
    }

    const r = await fetch("https://api.openai.com/v1/chat/completions", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${apiKey}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "gpt-4o-mini",
        messages: [{ role: "user", content: input }],
      }),
    });

    const data = await r.json(); 
    return NextResponse.json(data, { status: r.status }); 
  } catch (e) {
    console.error(e);
    return NextResponse.json({ error: "Bad request" }, { status: 400 });
  }
}

// app/page.tsx

"use client";

import { useState } from "react";

export default function Page() {
  const [input, setInput] = useState("");
  const [response, setResponse] = useState("");

  const handleSubmit = async () => {
    const res = await fetch("/api/ai", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ input }),
    });

    const data = await res.json();
    const text = data.choices?.[0]?.message?.content ?? "No response.";
    setResponse(text);
  };

  return (
    <main className="max-w-xl mx-auto p-4 space-y-4">
      <h1 className="text-2xl font-bold">💬 ChatBot Demo（安全なAPI経由）</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        className="w-full p-2 border border-gray-300 rounded"
      />
      <button
        onClick={handleSubmit}
        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
      >
        送信
      </button>
      {response && (
        <div className="border p-3 rounded bg-gray-100 whitespace-pre-wrap">
          <strong>AIの返答:</strong> {response}
        </div>
      )}
    </main>
  );
}