如何在Chrome扩展中隐藏API密钥？含YouTube API场景咨询

阿华AIGC实验室

2026-5-8

如何安全隐藏YouTube API密钥并搭建简易中转服务器

嘿，这个问题问到点子上了——直接把API密钥暴露在前端代码里，跟把银行卡密码贴在大街上没区别，分分钟被爬虫薅走滥用，到时候Google的账单能让你肉疼。别慌，用中转服务器的思路完全可行，而且新手也能快速搭起来，我给你一步步拆解：

核心逻辑先搞懂

你的前端代码绝对不能直接接触API密钥！所有需要调用YouTube API的操作，都得走「前端→你的服务器→YouTube API→你的服务器→前端」的流程：密钥只存在你的服务器上，前端只会收到处理后的结果，根本碰不到密钥本身。

用Node.js搭个极简中转服务器（新手友好）

Node.js是最适合新手快速搭服务器的工具，不用复杂配置，几行代码就能跑起来：

1. 准备环境

先去官网装Node.js和npm（一路默认安装就行，装完终端输node -v能看到版本就成）
新建个文件夹（比如叫youtube-proxy），打开终端进入这个文件夹，输npm init -y初始化项目
装两个必备依赖：express（用来做服务器框架）和node-fetch（用来给YouTube API发请求），命令是：
```
npm install express node-fetch
```

2. 写服务器代码

在文件夹里新建server.js文件，把下面的代码粘进去：

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const PORT = process.env.PORT || 3000;

// 注意！别直接把密钥写在代码里，用环境变量存！
require('dotenv').config(); // 加载环境变量
const YOUTUBE_API_KEY = process.env.YOUTUBE_API_KEY;

// 允许前端跨域请求（生产环境别用*，换成你的前端域名）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

// 写中转接口，前端就调这个地址
app.get('/api/youtube', async (req, res) => {
  try {
    // 把前端传过来的参数（比如搜索关键词、视频ID）原封不动传给YouTube
    const queryParams = new URLSearchParams(req.query);
    // 偷偷把API密钥加上
    queryParams.append('key', YOUTUBE_API_KEY);
    // 调用YouTube的具体API接口（这里用搜索接口举例，你可以换成你需要的）
    const youtubeResponse = await fetch(`https://www.googleapis.com/youtube/v3/search?${queryParams}`);
    const data = await youtubeResponse.json();
    // 把结果返回给前端
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: '服务器请求出错啦' });
  }
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`服务器已经跑在 http://localhost:${PORT} 上啦！`);
});

3. 配置环境变量存密钥

在项目根目录新建一个.env文件，内容就一行：
```
YOUTUBE_API_KEY=你的YouTube API密钥
```
装个dotenv包来读取这个文件：
```
npm install dotenv
```

4. 测试服务器

终端输node server.js，服务器启动后，你可以在浏览器里输http://localhost:3000/api/youtube?q=cat&part=snippet，能看到YouTube返回的搜索结果就说明成了。

前端怎么调用？

前端代码里不再直接请求YouTube的API，而是请求你的服务器接口，比如用JavaScript的fetch：

async function searchYouTube(query) {
  // 把参数传给你的服务器
  const response = await fetch(`http://你的服务器地址/api/youtube?q=${encodeURIComponent(query)}&part=snippet`);
  const data = await response.json();
  // 拿到数据后随便你怎么处理
  console.log(data);
}