在 React 中嵌入 GitHub Secret 并部署到 GitHub 页面泄露了我的个人访问令牌
Embed GitHub Secret in React and Deploy to GitHub Page Revealed my Personal Access Token
我的目标：我的 React 应用程序有一个环境变量来存储 Github Personal_Access_Token（后来在 HTTP header 中用于fetch），然后我稍后会使用 Action Workflow 将应用程序部署到 Github 页面。
我试过的方法：鉴于 pushing/exposing 令牌作为 Githut 的纯文本是一种违规行为，
我会使用 Github 秘密来避免它。我发现了这个 post 并尝试实施 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 auto-revoked 因为它出现在 build/static/js/xxxx.chunk.js 中，并推送到 [=36] =] 分支机构：
{headers:{Authorization:"token ac4455aXXXXXXXXXXXXXXXXXXXf80512f3e"}}
这不是我所期望的，但我知道这个秘密在构建过程中被访问和嵌入，并被放入静态构建文件夹中。
有人能给我指明方向吗，我在工作流程中做错了什么吗？或者工作流从来就不是解决我的问题的方法，我永远不应该使用 GitHub 页面来托管使用秘密令牌的纯 React 应用程序？
提前致谢。
问题是React纯粹是一个前端框架。应直接在 React 中可用的所有内容也可供您的用户查看。没有办法解决这个问题！
要真正保密，它必须位于服务器端而不是前端。您可以这样做的一种方法是制作 "serverless function"（不同的服务提供多种慷慨的免费优惠）。然后你通过那里代理，这基本上意味着：
- 你的 React 前端从你的无服务器函数中获取，没有任何秘密。
- 您的无服务器函数已存储秘密，并使用秘密对实际服务进行相同的提取。
- 您的无服务器函数现在可以 return 它返回到您的 React 前端的响应。
我的目标：我的 React 应用程序有一个环境变量来存储 Github Personal_Access_Token（后来在 HTTP header 中用于fetch），然后我稍后会使用 Action Workflow 将应用程序部署到 Github 页面。
我试过的方法：鉴于 pushing/exposing 令牌作为 Githut 的纯文本是一种违规行为， 我会使用 Github 秘密来避免它。我发现了这个 post 并尝试实施 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 auto-revoked 因为它出现在 build/static/js/xxxx.chunk.js 中，并推送到 [=36] =] 分支机构：
{headers:{Authorization:"token ac4455aXXXXXXXXXXXXXXXXXXXf80512f3e"}}
这不是我所期望的，但我知道这个秘密在构建过程中被访问和嵌入，并被放入静态构建文件夹中。
有人能给我指明方向吗，我在工作流程中做错了什么吗？或者工作流从来就不是解决我的问题的方法，我永远不应该使用 GitHub 页面来托管使用秘密令牌的纯 React 应用程序？
提前致谢。
问题是React纯粹是一个前端框架。应直接在 React 中可用的所有内容也可供您的用户查看。没有办法解决这个问题！
要真正保密，它必须位于服务器端而不是前端。您可以这样做的一种方法是制作 "serverless function"（不同的服务提供多种慷慨的免费优惠）。然后你通过那里代理，这基本上意味着：
- 你的 React 前端从你的无服务器函数中获取，没有任何秘密。
- 您的无服务器函数已存储秘密，并使用秘密对实际服务进行相同的提取。
- 您的无服务器函数现在可以 return 它返回到您的 React 前端的响应。