密钥与 API key：密钥外泄陷阱

密钥是任何能授予访问权限的东西：API（Application Programming Interface，应用程序编程接口）key、数据库密码、支付服务商令牌、签名密钥。vibe coding 里最常见——也最昂贵——的错误，就是泄露其中之一。

有两个陷阱不断地坑住人：

• 客户端代码里的密钥。 你前端里的任何东西（在浏览器里运行的那段 JavaScript）都是公开的。用户可以打开开发者工具直接读到它。AI 在被要求从 React 组件里调用一个 API 时，会乐呵呵地把你的密钥直接粘在那儿——于是现在任何访问你网站的人都能把它复制走、把你的账单刷爆。密钥应该待在服务器上，永远不要出现在会发送到浏览器的代码里。
• 仓库里的密钥。 硬编码在文件里的密钥会被提交进 git。就算你之后删掉它，它也会永远留在 git 历史里，而机器人会在你 push 后几分钟内就扫描公开仓库，找的正是这种东西。

密钥正确的归宿是环境变量（environment variable）——一个在运行时提供给应用的值，完全不写进代码里：

// VULNERABLE: key 在源码里，会被提交进 git
const stripe = new Stripe("sk_live_51H8xQ2eZvK...");

// SAFE: key 从环境中读取，从不写在代码里
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

密钥只有一个安全的家——在服务器端，从环境里读取。浏览器是公共场所：任何被送到那里的东西，任何打开开发者工具的人都能读到。

            ┌──────────────────────────────────────────┐
            │  .env  (gitignore忽略・永不提交)          │
            │  STRIPE_SECRET_KEY=sk_live_...            │
            └───────────────────┬──────────────────────┘
                                 │ 运行时注入        
                                ▼
   ┌──────────────────────┐          ┌──────────────────────┐
   │   SERVER             │          │   BROWSER (客户端)    │
   │   process.env.KEY ✓  │   ✗──────│   任何人都可读        │
   │   在此调用Stripe     │  绝不    │   dev tools · "view   │
   │                      │  发送    │   source" · network   │
   └──────────────────────┘  到此    └──────────────────────┘
        安全: 保持私密                   公开: = 泄露    

在你写下第一个密钥之前，就把 .env（以及 .env.local 等等）加进你的 .gitignore。如果某个密钥确实进了你的代码或历史，就把它当成已经烧掉了：轮换它（生成一个新的并吊销旧的）——删掉那一行是不够的，因为旧密钥依然有效，而且依然在外面流传着。