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

Posted 2023-03-28

【中文标题】在 React 中嵌入 GitHub Secret 并部署到 GitHub 页面显示了我的个人访问令牌

【英文标题】：Embed GitHub Secret in React and Deploy to GitHub Page Revealed my Personal Access Token

【发布时间】：2020-09-26 03:42:59

【问题描述】：

我的目标：我的 React 应用程序有一个环境变量来存储 Github Personal_Access_Token（稍后用于 HTTP 标头进行获取），然后我将使用 Action 将应用程序部署到 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/github-pages-deploy-action@3.5.5
  with:
     GITHUB_TOKEN: $ secrets.GITHUB_TOKEN 
     BRANCH: gh-pages
     FOLDER: build

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

headers:Authorization:"token ac4455aXXXXXXXXXXXXXXXXXXXf80512f3e"

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

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

【参考方案1】：

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

要真正保密，它必须位于服务器端而不是前端。您可以做到这一点的一种方法是制作“无服务器功能”（在不同的服务上有多种慷慨的免费优惠）。然后你通过那里代理，这基本上意味着：

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

【讨论】：

你是对的，我刚刚意识到让客户端响应应用程序与访问令牌并将其部署在静态 Github 页面中首先是错误的。我玩过 aws lambda，这对于我正在做的事情来说可能有点矫枉过正，但听起来不错，会试一试。谢谢