Github GraphQL API，硬编码访问令牌有效，试图混淆它没有

Posted 2023-03-08

【中文标题】Github GraphQL API，硬编码访问令牌有效，试图混淆它没有

【英文标题】：Github GraphQL API, hardcoding the access token works, trying to obfuscate it does not

【发布时间】：2021-01-10 06:53:24

【问题描述】：

下面是我的 apollo 客户端设置，当我硬编码在 GitHub 上创建的访问令牌并尝试 ping 端点时，它工作正常，我取回数据，我可以使用它等等。我尝试替换硬编码的值进入环境变量，但随后我开始从 github 收到 401 未经授权的错误。我记录了环境变量，并得到了我正在硬编码的确切字符串。我真的不明白为什么。谁能帮帮我？

const httpLink = createHttpLink(
    uri: 'https://api.github.com/graphql',
);
const authLink = setContext((_,  headers ) => 
    // const token = process.env.REACT_APP_GITHUB;

    return 
        headers: 
            ...headers,
            // authorization: token ? token : null
            authorization: `bearer fullAccessTokenString`
        
    
);

const client = new ApolloClient(
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
);

【参考方案1】：

如果你使用环境变量，它只会在构建时被 Webpack 替换为实际值。您无法在前端代码中包含值并防止其被其他人读取。

您需要实现某种身份验证流程（例如“使用 GitHub 登录”按钮），而不是将访问令牌直接包含在您的代码中，这将允许您的用户在使用您的应用程序时获得他们自己的访问令牌。这不仅更安全，而且还意味着 A）如果访问令牌过期或被撤销，您不必重新部署您的应用程序，并且 B）您将不太可能达到 API 的速率限制，因为每个用户都将使用他们自己的配额。