Vibe Coding · 课时

处理机密信息与密钥

妥善保管 API 密钥,不要放进提示词

第 4 / 4 课13 个步骤

处理机密信息与密钥 是 CoddyKit 上的免费 Vibe Coding 课时。 这是第 4 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vibe Coding 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Vibe Coding 课程共包含 4 节课。

本课时的部分内容尚未翻译,以英文显示。

Some Things Must Stay Secret

Many services give you an API key — a secret password that proves your app is allowed to use them. Payment tools, AI models, and email services all use keys.

If a key leaks, strangers can run up your bill or abuse your account. So a core vibe-coding habit is knowing how to keep secrets out of the wrong places — including out of your prompts.

What a Key Looks Like

An API key is usually a long random string. You include it with requests so the service knows it's you.

The danger: it's just text, so it's easy to accidentally paste it somewhere public. Treat a key like a house key — you wouldn't tape it to your front door.

sk_live_8f2a91c4d7e0b36a55f1c9a...
(a real key is long, random, and SECRET)

The Golden Rule: Never Hardcode Keys

The most common mistake is pasting a key directly into your code. AI sometimes does this too. If that code goes public (like on GitHub), your key is exposed to the world within minutes.

Instead, keys live in a separate, private place. Tell AI explicitly to never put the key in the code itself.

Never put my API key directly in the code. Read it
from an environment variable instead, and add the
key name to a .env file that is ignored by git.

Environment Variables

The standard safe home for secrets is an environment variable — a value stored outside your code that the app reads at runtime. Your code refers to it by name, not by the actual secret.

This snippet shows how code reads a key by name rather than containing the secret itself.

// The code only references the NAME, not the secret
const apiKey = process.env.WEATHER_API_KEY;

if (!apiKey) {
  console.log('No key found — set it in .env');
} else {
  console.log('Key loaded safely (length:', apiKey.length, ')');
}

The .env File and .gitignore

Secrets go in a file usually named .env. Crucially, you add .env to your .gitignore so it's never uploaded or shared. The code reads from it; the file stays on your machine.

Whenever you set up keys, double-check the .env file is ignored. Ask AI to confirm it for you.

Show me my .gitignore and confirm that .env is
listed in it. If it isn't, add it so my secret keys
never get committed to git.

Don't Paste Secrets into Prompts

It's tempting to paste a real key into a chat with AI so it 'just works.' Don't. Your prompts may be logged, and the key could end up in shared history.

Instead, use a placeholder. Tell AI the variable name and let it write code that reads the real value from your .env locally.

Use an environment variable called
OPENAI_API_KEY for the key. I'll add the real
value to my .env file myself — just write the code
to read it from there.

Frontend Keys Are Visible

Here's a trap: any key in code that runs in the user's browser can be seen by anyone who looks. Browser code is never truly secret.

So secret keys (like payment or AI keys) must be used from a server or serverless function, not directly in the page. Ask AI to route sensitive calls through the backend.

This AI feature needs my secret key, but the call
is currently in the browser where users could see
it. Move the request to a serverless function so
the key stays on the server and is never exposed to
the frontend.

Setting Secrets on Hosting Platforms

When you deploy to hosts like Vercel, Netlify or Replit, you don't upload your .env file. Instead, each platform has a settings page where you add environment variables securely.

Your code reads them the same way — by name. The platform keeps the actual values safe.

I'm deploying this to Vercel. Tell me exactly which
environment variables I need to add in the Vercel
dashboard, and confirm the code reads each one by
name so deployment works.

What to Do If a Key Leaks

If a key ever ends up somewhere public, don't panic — rotate it. Go to the service's dashboard, delete the old key, and generate a new one. The leaked key instantly stops working.

Then update your .env and hosting settings with the new value. Treat leaked keys as compromised, always.

A Simple Secrets Checklist

Make these habits automatic on every project:

  • Keys live in .env, never in code
  • .env is listed in .gitignore
  • Secret keys run on the server, not in the browser
  • Never paste real keys into AI prompts
  • On hosting, add keys in the dashboard, not the repo

Tell your AI tool to follow this checklist and it will set things up safely by default.

Limit What a Key Can Do

Many services let you restrict a key so a leak does less damage: cap its spending, limit it to certain domains, or give it read-only access.

Setting these limits is a smart safety net. When a service offers it, ask AI to walk you through adding usage caps and domain restrictions in the dashboard.

Walk me through adding a monthly spending limit and
a domain restriction to my API key in this
service's dashboard, so that even if the key leaks,
the damage is capped.

Quick Check

You're adding a paid AI feature that needs a secret key. Where should that key live so it stays safe?

Recap: Handling Secrets and Keys

You learned that API keys are secret passwords that must never be hardcoded or pasted into prompts. Safe keys live in environment variables via a .env file that's git-ignored, and secret keys run on the server, not in the browser.

You saw how to set secrets on hosts like Vercel, and how to rotate a leaked key. Follow the checklist and AI will set things up safely. You've now covered files, APIs, and data — the building blocks of real apps.

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。

课程
25
课程
100

常见问题解答

「处理机密信息与密钥」课时是免费的吗?

是的 — 「处理机密信息与密钥」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Vibe Coding 课程的其余内容,请升级到 CoddyKit PRO。 Vibe Coding 课程共包含 4 节课。

「处理机密信息与密钥」这节课中我会学到什么?

妥善保管 API 密钥,不要放进提示词 你通过在浏览器中直接运行的动手代码来练习 Vibe Coding,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vibe Coding 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Vibe Coding 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 4 节课,共 4 节。

「处理机密信息与密钥」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Vibe Coding 课中编写并运行代码吗?

能。每节 Vibe Coding 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 与 API 对话
  2. 读取和保存文件
  3. 简单存储数据
  4. 处理机密信息与密钥
← 返回 Vibe Coding