使用GitHub API创建文件失效排查：原可用脚本突然无法工作

我正在搭建一个可输入数据并通过GitHub API发送请求创建指定内容文件的网站，采用GitHub Pages托管。我编写了页面加载时自动创建文件的测试脚本，最初可以正常运行，但两小时后再次测试时却无法创建文件。请问哪里操作有误？注：我使用了个人令牌，这会是问题所在吗？

我的代码 #

index.html #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Dev portal</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  Hello world
  <script type="module" src="script.js"></script>
</body>

</html>

script.js #

import { Octokit } from "https://cdn.skypack.dev/@octokit/rest";
const octokit = new Octokit({
  auth: 'iputmytokenhere'
})

await octokit.request('PUT /repos/{owner}/{repo}/contents/{path}', {
  owner: 'Skoolgq',
  repo: 'skoolgq.github.io',
  path: 'test2.txt',
  message: 'Test commits for JSON API',
  committer: {
    name: 'Skool Developers',
    email: 'help@skool.gq'
  },
  content: 'bXkgbmV3IGZpbGUgY29udGVudHM='
})

问题分析及解决方案 #

你的核心问题是把GitHub个人令牌直接硬编码在前端JavaScript代码中，这会导致两个致命问题：

1. 令牌被GitHub自动吊销：GitHub有安全检测机制，会扫描公开仓库（包括GitHub Pages托管的代码）中的敏感信息，比如个人访问令牌。一旦检测到令牌暴露，会自动吊销该令牌，这就是为什么两小时后脚本失效的原因。
2. 账号安全风险：前端代码是完全公开的，任何人都可以通过浏览器开发者工具获取你的令牌，进而完全控制你的GitHub账号和仓库，带来严重的安全隐患。

正确的做法 #

绝对不能在前端代码中直接使用个人令牌，必须通过后端服务作为中间层来处理API请求：

• 编写一个简单的后端接口（比如用Node.js/Express、Python/Flask等），在后端代码中用环境变量管理GitHub令牌。
• 前端页面将需要创建文件的内容、路径等数据发送到后端接口。
• 后端接口收到请求后，使用令牌调用GitHub API完成文件创建操作。
• 将后端服务部署到Vercel、Heroku、Netlify等平台，或者自己的服务器上。

其他检查点 #

如果后续使用后端仍有问题，可以检查：

• 令牌权限是否足够：创建令牌时需勾选repo权限，确保能操作仓库内容。
• API参数是否正确：仓库所有者、仓库名、文件路径需准确，文件内容必须是Base64编码格式。

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