能否在浏览器中安全调用GitHub GraphQL API并设置HTTP referrer限制防滥用

浏览器调用GitHub GraphQL API可行性 #

完全可以，实际使用分两种场景：

• 面向普通用户的公开页面：先引导用户完成GitHub OAuth授权，拿到用户级的授权令牌后，在请求头中携带Authorization: bearer <令牌值>即可发起调用
• 个人测试场景：可以直接把个人访问令牌（PAT）放到请求头中调用，注意绝对不要把PAT硬编码到公开可访问的前端代码中，一旦泄露会导致你的账号权限被恶意使用。

HTTP referrers限制的防护效果 #

这个方案无法有效防止接口滥用，核心原因如下：

• HTTP referer属于用户端可控的请求头，攻击者可以随意篡改该字段的值，轻松绕过你设置的referer限制
• 就算referer限制完全生效，只要你的前端页面是公开可访问的，攻击者可以正常访问你的页面拿到合法的请求凭证，直接发起非法请求，referer限制对此完全无效。

如果你要做公开的前端产品对接GitHub GraphQL，建议加一层自有后端做请求中转：所有前端请求先发给自有后端，由后端完成身份校验、频率限制、参数校验之后，再由后端携带存储在服务端的令牌调用GitHub接口，从根源上避免令牌泄露和接口滥用。

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