如何安全部署使用.env的Flutter Web应用至GitHub Pages避免密钥泄露

两个问题的核心逻辑非常明确：

1. 密钥泄露本质：Flutter Web输出的是纯前端静态资源，所有被打包进产物的代码、配置文件都会完全暴露给访问站点的用户——不管你是在CI流程临时创建.env，还是把密钥混淆进JS代码，只要密钥最终出现在Web构建产物里，用户就可以通过开发者工具、直接请求资源路径拿到明文。你之前用git secret加密仓库内.env的做法，仅能保护代码仓库里的文件，无法解决发布后静态资源的明文泄露问题。尤其你配置里的Google服务账号私钥属于高权限凭证，一旦出现在前端等于公开给所有访问者，任何人拿到都可以冒用你的服务账号权限操作对应云资源。
2. .env 404报错本质：你当前在CI流程创建的.env文件存放在项目根目录，但Flutter构建Web产物时，只有在pubspec.yaml的assets段明确声明的文件才会被复制到build/web/assets目录下。你使用的flutter_dotenv这类库默认会请求assets/.env路径加载配置，根目录的.env没有被纳入打包资源，产物里不存在对应文件，自然返回404。

第一步：从架构层面消除密钥泄露风险 #

首先做权限拆分，从根源避免高风险凭证接触前端：

• 高权限凭证（包括PRIVATE_KEY、PRIVATE_KEY_ID、CLIENT_EMAIL这类服务账号核心字段）绝对不能打包进Web产物。这类凭证必须放到服务端做代理转发，可以用免费的无服务函数服务搭一层极简代理：前端只发起请求到你自己的代理接口，由代理服务携带高权限凭证请求Google Sheets/对应第三方服务，全程凭证不暴露给浏览器。
• 无敏感风险的公开配置项（比如TITLE_FAQ、公开的PROJECT_ID这类就算公开也不会产生安全影响的配置），不要用运行时加载assets/.env的方案，直接用Flutter内置的--dart-define参数在构建时注入，配置值会被直接编译进JS产物，不会单独生成.env文件，也不会产生对assets/.env的资源请求。

不要尝试任何“前端加密.env”“JS混淆藏密钥”的方案，所有交付到浏览器的内容都可以被逆向，仅存在破解成本差异，不存在绝对安全的前端存储密钥方案。

第二步：调整GitHub Actions工作流 #

删掉原有创建根目录.env的步骤，改用构建参数注入非敏感配置，调整后的工作流参考如下：

steps:
  - uses: actions/checkout@v3
  - uses: subosito/flutter-action@v2
    with:
      flutter-version: '3.19.0' # 替换为你本地开发使用的Flutter版本，保证构建环境一致
  - name: Build Flutter Web
    run: |
      flutter build web \
        --base-href "/ChatBox110bis/" \
        --dart-define=TITLE_FAQ=${{ secrets.TITLE_FAQ }} \
        --dart-define=PROJECT_ID=${{ secrets.PROJECT_ID }}
        # 其余非敏感公开配置按相同格式追加，高权限凭证禁止在此处传入
  - name: Deploy to GitHub Pages
    uses: peaceiris/actions-gh-pages@v3
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
      publish_dir: ./build/web

对应Flutter侧的代码也要同步修改，删掉原来flutter_dotenv加载.env的逻辑，直接读取构建时注入的配置：

// 替换原有dotenv.env['TITLE_FAQ']的读取方式
const titleFaq = String.fromEnvironment('TITLE_FAQ', defaultValue: '常见问题');
const projectId = String.fromEnvironment('PROJECT_ID', defaultValue: '');

调整后效果：

• 构建流程不会生成独立的.env文件，不会再发起对assets/.env的请求，404问题自然消失
• 高权限凭证完全不进入Web构建产物，从根源消除泄露风险
• 所有配置统一通过GitHub Secrets管理，不需要在仓库内存储明文配置

如果临时来不及搭建后端代理，必须快速上线验证，必须严格限制对应服务账号的权限：仅给服务账号分配目标Google表格的只读权限，关闭所有其他云资源访问权限，确保凭证就算被拿到也无法造成任何损失，同时依然要使用--dart-define注入配置，不要把.env文件放到assets目录对外发布。

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