React/Vite无后端应用：构建生产环境时如何保护环境变量？

核心认知：前端环境变量本质是公开的 #

Vite中VITE_前缀的环境变量会被直接打包到客户端代码里，不存在“构建时保护”的可能——只要是前端能访问的变量，用户都能通过浏览器开发者工具看到。所以核心原则是：绝对不能把敏感信息放到前端代码/环境变量中。

具体解决方案 #

1. 区分Cognito中可公开与敏感的信息

• 可安全公开的信息：User Pool ID、公开类型的App Client ID（无客户端密钥）
• 绝对不能公开的信息：App Client Secret、AWS Access Key/Secret Key、用户密码等

2. 调整Cognito客户端配置

在AWS控制台创建Cognito App Client时：

• 关闭「生成客户端密钥」选项，创建公开客户端（Public Client）
• 这种客户端不需要密钥即可完成登录流程，前端只需持有Client ID和User Pool ID，无需敏感凭证

3. 使用安全的登录流程（PKCE模式）

对于无后端的纯前端应用，采用Cognito的Authorization Code Flow with PKCE模式，这是专为公开客户端设计的安全流程：

• 无需在前端存储任何密钥，通过临时生成的code_verifier和code_challenge完成授权验证
• 可以用AWS Amplify或官方的@aws-sdk/client-cognito-identity-provider实现，示例代码如下：

  import { CognitoIdentityProviderClient, InitiateAuthCommand } from "@aws-sdk/client-cognito-identity-provider";
  
  // 仅使用公开的环境变量
  const client = new CognitoIdentityProviderClient({ 
    region: import.meta.env.VITE_AWS_REGION 
  });
  
  async function handleLogin(username, password) {
    const authCommand = new InitiateAuthCommand({
      AuthFlow: "USER_PASSWORD_AUTH",
      ClientId: import.meta.env.VITE_COGNITO_CLIENT_ID,
      AuthParameters: {
        USERNAME: username,
        PASSWORD: password
      }
    });
  
    try {
      const response = await client.send(authCommand);
      // 处理返回的ID Token、Access Token等
      console.log("登录成功", response.AuthenticationResult);
    } catch (err) {
      console.error("登录失败", err);
    }
  }
  

4. 禁止操作

• 不要将App Client Secret、AWS密钥对放入前端环境变量或代码中
• 不要在前端硬编码任何敏感凭证，哪怕是通过混淆工具也不行——混淆只能增加阅读难度，无法真正阻止信息泄露

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