如何在私有仓库的GitHub Pages中安全获取PAT以授权Octokit请求

你提到的私有GitHub Pages静态应用，要在不硬编码PAT的前提下创建PR，除了URL传参这种操作不便且存在泄露风险的方式，还有以下几种更安全可行的方案：

1. GitHub OAuth授权（PKCE模式，纯前端实现） #

这是最推荐的方案，无需后端支撑，让用户自主授权应用访问其GitHub账号，获取临时访问令牌完成操作：

• 操作步骤：
  1. 在GitHub平台创建一个OAuth App，将你的GitHub Pages域名填写为回调地址。
  2. 前端生成随机的code_verifier字符串，再通过SHA-256哈希并转换为base64url格式得到code_challenge。
  3. 引导用户跳转到GitHub授权页面，携带参数：client_id（你的OAuth App ID）、redirect_uri（你的Pages地址）、scope=repo（创建PR所需权限）、code_challenge和code_challenge_method=S256。
  4. 用户登录并授权后，GitHub会跳转回你的Pages页面，同时返回code参数。
  5. 前端拿着code和之前的code_verifier，向GitHub的/login/oauth/access_token接口发送POST请求，获取临时访问令牌。
  6. 用该令牌初始化Octokit，调用API创建PR，令牌仅存于浏览器内存中，会话结束后自动销毁。
• 核心代码示例：

  // 生成code_verifier
  const codeVerifier = crypto.randomUUID().replace(/-/g, '');
  // 生成code_challenge
  const encoder = new TextEncoder();
  const data = encoder.encode(codeVerifier);
  const digest = await crypto.subtle.digest('SHA-256', data);
  const codeChallenge = btoa(String.fromCharCode(...new Uint8Array(digest)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
  
  // 跳转至GitHub授权页面
  const authUrl = new URL('https://github.com/login/oauth/authorize');
  authUrl.searchParams.set('client_id', 'YOUR_OAUTH_CLIENT_ID');
  authUrl.searchParams.set('redirect_uri', 'YOUR_GITHUB_PAGES_URL');
  authUrl.searchParams.set('scope', 'repo');
  authUrl.searchParams.set('code_challenge', codeChallenge);
  authUrl.searchParams.set('code_challenge_method', 'S256');
  window.location.href = authUrl.toString();
  
  // 回调页面获取code后兑换访问令牌
  const urlParams = new URLSearchParams(window.location.search);
  const code = urlParams.get('code');
  if (code) {
    const tokenResponse = await fetch('https://github.com/login/oauth/access_token', {
      method: 'POST',
      headers: { 'Accept': 'application/json' },
      body: new URLSearchParams({
        client_id: 'YOUR_OAUTH_CLIENT_ID',
        code: code,
        redirect_uri: 'YOUR_GITHUB_PAGES_URL',
        code_verifier: codeVerifier
      })
    });
    const { access_token } = await tokenResponse.json();
    // 初始化Octokit并创建PR
    const octokit = new Octokit({ auth: access_token });
    await octokit.rest.pulls.create({
      owner: 'OWNER_NAME',
      repo: 'REPO_NAME',
      head: 'feature-branch',
      base: 'main',
      title: 'Pages应用创建的PR',
      body: '通过静态应用发起的PR请求'
    });
  }
  

2. 使用GitHub App授权 #

如果需要更细粒度的权限控制，可创建GitHub App替代OAuth App：

• 创建GitHub App时，仅勾选「Pull requests」相关权限，严格限制应用的访问范围。
• 同样通过OAuth流程引导用户将App安装到目标仓库，获取仓库级别的访问令牌，后续操作逻辑与PKCE模式一致。
• 这种方式比个人PAT更安全，因为权限按需分配，不会泄露用户的全局账号权限。

安全注意事项 #

• 令牌仅存储在浏览器内存中，不要存入localStorage或sessionStorage，防止XSS攻击导致泄露。
• 授权时仅请求必要权限，比如创建PR只需repo权限，避免过度授权。
• 始终使用HTTPS（GitHub Pages默认支持），防止传输过程中数据被拦截。

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