React中嵌入的GitHub秘密，并部署到GitHub页面显示了我的个人访问令牌

Question

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

我尝试了什么：鉴于将令牌作为纯文本推送/公开给Githut是违反的，我会用Github的秘密来避免它。我找到了此post，并尝试实现Github Workflow来访问机密，然后进行部署。

- 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/[email protected]
  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. 您对无服务器功能的前端获取做出的反应没有任何秘密。
2. 您的无服务器功能已存储了机密，并使用机密对实际服务进行了相同的提取。
3. 您的无服务器函数现在可以将它返回的响应返回给您的React前端。