Chrome Extension中如何存储API密钥并隐藏API调用令牌？

一、API密钥存储方案 #

首先得明确你要存的是用户个人的API密钥还是你作为开发者持有的全局密钥，两者的安全方案完全不同：

1. 用户个人API密钥的存储 #

• 优先用chrome.storage.local/chrome.storage.sync：
  这是Chrome官方为扩展设计的存储API，比普通localStorage安全得多——只有当前扩展能访问，不会被其他网页或扩展窃取。如果要更稳妥，可以用浏览器内置的crypto.subtle API对密钥做AES加密后再存，哪怕本地存储被破解，拿到的也是加密后的内容。
  示例代码：

  async function saveUserKey(rawKey) {
    // 简单加密示例（加密密钥可嵌入扩展代码，仅用于本地加密）
    const encoder = new TextEncoder();
    const keyMaterial = await crypto.subtle.importKey(
      'raw', encoder.encode('your-extension-fixed-secret'),
      { name: 'AES-GCM' }, false, ['encrypt']
    );
    const encrypted = await crypto.subtle.encrypt(
      { name: 'AES-GCM', iv: encoder.encode('123456789012') },
      keyMaterial, encoder.encode(rawKey)
    );
    await chrome.storage.local.set({ userApiKey: btoa(String.fromCharCode(...new Uint8Array(encrypted))) });
  }
  

• 别碰localStorage：它属于网页存储池，安全隔离性差，很容易被恶意脚本盯上。

2. 开发者全局API密钥的存储 #

绝对不能把这类密钥放在客户端——Chrome扩展的代码哪怕打包成crx，也能被反编译出来，密钥直接就泄露了。唯一靠谱的做法是：

• 搭个后端代理：扩展只调用你自己的后端接口，由后端拿着密钥去请求第三方API，再把结果返回给扩展。全程扩展碰不到密钥，所有敏感逻辑都在服务器端。
  比如扩展发请求到https://your-proxy.com/get-data，后端收到后用自己的密钥调用第三方API，再把数据回传给扩展。

二、API调用时隐藏令牌的方法 #

1. 用户令牌（如OAuth Token）的安全处理 #

• 别在URL里传令牌：URL会被存在浏览器历史、服务器日志里，风险极大。必须用Authorization请求头传递：

  async function fetchData(token) {
    const res = await fetch('https://api.example.com/resource', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    return res.json();
  }
  

• 强制用HTTPS：所有API请求必须走HTTPS，防止传输过程中被中间人劫持令牌。
• 缩短令牌有效期：如果是OAuth令牌，设置较短的过期时间，用刷新令牌定期换全新令牌，就算令牌泄露，危害时间也有限。

2. 开发者令牌/密钥的隐藏 #

还是那句话——客户端绝对不能碰这类敏感信息，全部交给后端代理：

• 扩展只和你的后端交互，后端在请求第三方API时自动带上令牌/密钥，扩展全程看不到这些内容。
• 后端可以加一层验证：比如检查请求的扩展ID是否合法，或者用签名机制验证请求来源，防止别人冒充你的扩展滥用密钥。

额外提醒 #

• 调试时别瞎打日志：绝对不要用console.log输出令牌，哪怕是开发环境，一不小心就会泄露。
• 生产环境限制DevTools：虽然不能完全阻止，但可以通过代码检测DevTools是否开启，做一些拦截（比如停止API请求），增加攻击者的门槛。

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