如何在CRA项目打包后无需后端即可隐藏API密钥等敏感字段

不存在纯前端侧可以彻底隐藏API密钥的方案。所有下发到客户端浏览器运行的代码、资源中的敏感信息，都可以被用户通过调试、逆向打包产物等方式提取，不存在绝对的隐藏手段。

你之前用CRA环境变量存储密钥却仍能在打包产物中搜到是正常现象：CRA官方明确说明，所有前缀为REACT_APP_的环境变量会在构建阶段直接注入到客户端代码包中，本身就是要发送到浏览器侧执行的，天生不适合存储敏感信息。

• 用无服务器边缘函数做请求转发
  你可以使用Cloudflare Workers、Vercel Edge Functions、Netlify Functions这类轻量无服务器服务，只需要写10行左右的转发代码，将API密钥存储在该服务的服务端环境变量中，前端只调用你自己的边缘函数地址，由边缘函数携带密钥请求目标API后再把结果返回给前端，密钥全程不会离开服务端，从根源上避免暴露。
  示例转发逻辑参考：

// Cloudflare Workers 示例代码
export default {
  async fetch(request, env) {
    // 读取前端请求参数，拼接目标API请求
    const reqData = await request.json()
    const apiResponse = await fetch('https://目标第三方API地址', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 密钥从服务端环境变量读取，永远不会下发到前端
        'Authorization': `Bearer ${env.YOUR_API_SECRET}`
      },
      body: JSON.stringify(reqData)
    })
    // 透传API返回结果给前端，可自行配置跨域规则
    return new Response(apiResponse.body, {
      headers: {
        'Access-Control-Allow-Origin': '你的前端域名'
      }
    })
  }
}

• 配置第三方API的访问限制
  如果你对接的API支持配置调用来源域名白名单、IP白名单、调用频率限制，可以将你的前端域名加入白名单，即使密钥被提取，攻击者也无法在非白名单域名下调用API，大幅降低密钥泄露的风险。注意该方案无法防御攻击者通过自己的服务端模拟请求调用你的API。

注意：所有对前端代码做混淆、加密密钥的方案都只能提高攻击者的提取成本，无法从根本上避免密钥泄露，不建议用于高安全等级的场景。

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