如何安全地从公共文件夹访问 Firebase Cloud Messaging 环境变量？

2024-03-19 06:54:58

Firebase Cloud Messaging: 安全地从公共文件夹访问环境变量

背景

在使用 React 和 Firebase 构建应用程序时，整合 Firebase Cloud Messaging (FCM) 往往会遇到一个挑战：如何将应用程序凭据传递给位于公共文件夹中的 firebase-messaging-sw.js 文件，同时还要确保这些凭据的安全。本文将提供一个解决方案，通过利用 swenv.js 文件，实现安全访问环境变量。

问题

问题在于 firebase-messaging-sw.js 无法访问 .env 文件，而这是保存应用程序凭据的常用方法。传统的方法包括将凭据硬编码到 firebase-messaging-sw.js 中，但这会带来安全隐患。

解决方案

创建 swenv.js 文件

在公共文件夹中创建一个名为 swenv.js 的文件，用于导入环境变量。使用 import.meta.env，可以安全地访问公共文件夹中的环境变量：

// swenv.js
const env = import.meta.env;

export default {
  REACT_APP_APIKEY: env.REACT_APP_APIKEY,
  // 其他环境变量
};

在 firebase-messaging-sw.js 中导入 swenv.js

在 firebase-messaging-sw.js 文件中，导入 swenv.js 文件：

import env from './swenv.js';

firebase.initializeApp({
  apiKey: env.REACT_APP_APIKEY,
  // 其他环境变量
});

优点

这种方法的主要优点是它可以将环境变量保存在 .env 文件中，同时仍然允许在公共文件夹中访问它们。这提高了应用程序的安全性，因为环境变量不会暴露在网络中。

注意事项

swenv.js 文件必须位于公共文件夹中，因为它使用 import.meta.env 进行加载。
firebase-messaging-sw.js 应使用 https 协议进行托管，以便正确加载 firebase-app.js 和 firebase-messaging.js 文件。