如何在JavaScript中隐藏API密钥及变量？dotenv使用遇阻求助

你遇到的核心问题是：dotenv是为Node.js后端环境设计的，浏览器环境中不存在process对象，也不支持Node.js的模块系统（require/CommonJS），直接在前端代码里使用必然报错。

你的两个错误的具体原因：

• 使用import时报错Cannot use import statement outside a module：浏览器默认不把普通JS文件当作ES模块，即便给script标签加上type="module"，浏览器里依然没有process.env这个对象，dotenv根本无法生效。
• 使用require时报错ReferenceError: require is not defined：require是Node.js专属的CommonJS模块语法，浏览器原生不支持，直接调用自然会报错。

方案1：借助前端构建工具注入环境变量（推荐） #

如果你的项目使用Vite、Create React App、Webpack这类构建工具，它们本身支持在构建阶段将环境变量注入到代码中，不需要依赖dotenv，步骤如下：

以Vite为例： #

1. 在项目根目录创建.env文件，所有变量名必须以VITE_开头：

VITE_apiKey=XXXXXXXXXXXXXXXXXX
VITE_authDomain=XXXXXXXXXXXXX
VITE_databaseURL=XXXXXXXXXXXXX
VITE_projectId=XXXXXXXXXXXXX
VITE_storageBucket=XXXXXXXXXXXXX
VITE_messagingSenderId=XXXXXXXXXXXXX
VITE_appId=XXXXXXXXXXXXX
VITE_measurementId=XXXXXXXXXXXXX

2. 在前端代码中通过import.meta.env获取变量：

const firebaseConfig = {
    apiKey: import.meta.env.VITE_apiKey,
    authDomain: import.meta.env.VITE_authDomain,
    databaseURL: import.meta.env.VITE_databaseURL,
    projectId: import.meta.env.VITE_projectId,
    storageBucket: import.meta.env.VITE_storageBucket,
    messagingSenderId: import.meta.env.VITE_messagingSenderId,
    appId: import.meta.env.VITE_appId,
    measurementId: import.meta.env.VITE_measurementId
};

firebase.initializeApp(firebaseConfig);

3. 执行npm run dev或npm run build，构建工具会自动完成变量注入。

以Create React App为例： #

1. .env文件中的变量名必须以REACT_APP_开头：

REACT_APP_apiKey=XXXXXXXXXXXXXXXXXX
REACT_APP_authDomain=XXXXXXXXXXXXX
# 其他Firebase配置项同理添加前缀

2. 在代码中通过process.env.REACT_APP_XXX读取变量：

const firebaseConfig = {
    apiKey: process.env.REACT_APP_apiKey,
    authDomain: process.env.REACT_APP_authDomain,
    // 其余配置项依次替换
};

方案2：用后端代理实现彻底隐藏（敏感场景首选） #

如果你的Firebase操作涉及敏感数据或逻辑，不要在前端直接配置Firebase，应该搭建Node.js后端作为中间层：

1. 在后端项目中使用dotenv加载Firebase服务端私钥（注意是服务端专用的密钥，不是前端的公开配置）。
2. 前端只与你的后端API交互，所有Firebase的读写操作都由后端完成。
3. 这种方式下，前端完全接触不到任何Firebase密钥，敏感逻辑全部在后端执行。

补充：关于Firebase前端配置的安全说明 #

Firebase的前端公开配置（比如apiKey）本身是允许公开的，Firebase的安全机制核心是安全规则，而非隐藏配置。你已经开启了读写权限，更应该去配置精准的安全规则来限制访问，比如：

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

上述规则限制只有登录用户才能读写数据，即便他人获取到你的前端配置，也无法随意操作你的数据库。

内容的提问来源于stack exchange，提问作者ciumai