在 React 中嵌入 GitHub Secret 并部署到 GitHub 页面泄露了我的个人访问令牌

Question

我的目标：我的 React 应用程序有一个环境变量来存储 Github Personal_Access_Token（稍后在 HTTP 标头中用于获取），然后我稍后将使用 Action Workflow 将应用程序部署到 Github 页面。

我尝试过的：鉴于将令牌作为纯文本推送/公开到 Githut 是一种违规行为，我将使用 Github 秘密来避免这种情况。我找到了这篇文章，并尝试实施 Github 工作流程来访问秘密，然后进行部署。

- name: Install and Build 
  run: |
      npm install
      npm run-script build
  env:
      REACT_APP_GITHUB_ACCESS_TOKEN: ${{ secrets.REACT_APP_GITHUB_ACCESS_TOKEN }} // this is what I need


- name: Deploy 
  uses: JamesIves/github-pages-deploy-action@3.5.5
  with:
     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     BRANCH: gh-pages
     FOLDER: build

问题： 工作流程成功运行后，我发现令牌被 GitHub 自动撤销，因为它显示在 中build/static/js/xxxx.chunk.js，并推送到 gh-page 分支：

{headers:{Authorization:"token ac4455aXXXXXXXXXXXXXXXXXXXf80512f3e"}}

这不是我所期望的，但我知道秘密在构建过程中被访问和嵌入，并被放入静态构建文件夹中。

有人可以给我指出方向吗，我在工作流程中做错了什么吗？或者工作流程从来就不是我的问题的解决方案，我不应该使用 GitHub 页面来托管使用秘密令牌的纯 React 应用程序？
提前致谢。

Answer 1

问题在于React只是一个纯粹的前端框架。React 中应直接提供的所有内容也可供用户查看。没有办法解决这个问题！

为了真正保持秘密的私密性，它必须位于服务器端而不是前端。实现此目的的一种方法是创建“无服务器功能”（不同的服务提供多种慷慨的免费优惠）。然后你通过那里代理，这基本上意味着：

1. 您的 React 前端从无服务器函数中获取数据，没有任何秘密。
2. 您的无服务器函数存储了秘密，并使用秘密对实际服务进行相同的提取。
3. 您的无服务器函数现在可以将其收到的响应返回到您的 React 前端。