Vue组件中基于Web Cryptography API的状态加密：实现客户端敏感数据的安全存储与传输

大家好，今天我们要深入探讨一个非常重要的主题：如何在Vue组件中使用Web Cryptography API对敏感数据进行加密，以实现客户端安全存储和传输。随着Web应用越来越复杂，客户端存储和处理的数据也越来越敏感，直接将这些数据以明文形式存储在localStorage、sessionStorage或传输到服务器是极其危险的。Web Cryptography API为我们提供了一套强大的工具，可以在浏览器端执行加密操作，从而有效保护用户数据。

1. 为什么需要在客户端进行加密？

在深入代码之前，我们先要明确为什么要在客户端进行加密。通常，我们会依赖HTTPS协议来保证数据在传输过程中的安全，但HTTPS只能防止中间人攻击，不能防止服务器端被攻破导致的数据泄露。此外，我们还需要考虑以下几点：

降低服务器端风险： 即使服务器被攻破，存储的加密数据也难以被破解，从而降低数据泄露的风险。
保护本地存储数据： 浏览器提供的localStorage、sessionStorage等存储机制安全性较低，容易被恶意脚本访问。对存储在这些地方的敏感数据进行加密，可以有效防止本地数据泄露。
符合合规性要求： 一些行业或地区对数据安全有严格的要求，要求对敏感数据进行加密存储和传输。

2. Web Cryptography API简介

Web Cryptography API是一组JavaScript API，允许我们在浏览器中执行各种加密操作，包括：

生成密钥： 生成对称密钥（用于对称加密，如AES）和非对称密钥对（用于非对称加密，如RSA）。
加密和解密： 使用密钥对数据进行加密和解密。
签名和验证： 使用私钥对数据进行签名，使用公钥验证签名。
哈希： 计算数据的哈希值（如SHA-256），用于数据完整性校验。

Web Cryptography API使用Promise，因此我们可以使用async/await来处理异步操作，使代码更简洁易读。

3. 选择合适的加密算法

在Web Cryptography API中，有很多加密算法可供选择。选择合适的算法取决于具体的安全需求和性能考虑。常用的算法包括：

AES (Advanced Encryption Standard): 一种对称加密算法，速度快，安全性高，适合加密大量数据。
RSA (Rivest-Shamir-Adleman): 一种非对称加密算法，安全性高，但速度较慢，适合加密小量数据或密钥交换。
SHA-256 (Secure Hash Algorithm 256-bit): 一种哈希算法，用于计算数据的哈希值，常用于数据完整性校验。

对于客户端存储和传输敏感数据，通常使用AES进行加密，然后使用其他方式（如Diffie-Hellman密钥交换）安全地传递密钥。或者，可以使用非对称加密算法如RSA加密少量数据。

4. Vue组件中的加密实现

接下来，我们将创建一个Vue组件，演示如何使用Web Cryptography API对数据进行加密和解密，并将其存储在localStorage中。

4.1 创建Vue组件

首先，创建一个名为 SecureStorage.vue 的Vue组件：

<template>
  <div>
    <label for="data">Enter data:</label>
    <input type="text" id="data" v-model="data">
    <button @click="encryptAndStore">Encrypt and Store</button>
    <button @click="retrieveAndDecrypt">Retrieve and Decrypt</button>
    <p>Encrypted Data: {{ encryptedData }}</p>
    <p>Decrypted Data: {{ decryptedData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '',
      encryptedData: '',
      decryptedData: ''
    };
  },
  methods: {
    async encryptAndStore() {
      try {
        // 生成密钥
        const key = await window.crypto.subtle.generateKey(
          {
            name: "AES-CBC",
            length: 256,
          },
          true, // 是否可导出
          ["encrypt", "decrypt"]
        );

        // 导出密钥 (为了存储，需要转换为可存储的格式)
        const keyData = await window.crypto.subtle.exportKey("jwk", key); // jwk: JSON Web Key

        // 生成初始化向量 (IV)
        const iv = window.crypto.getRandomValues(new Uint8Array(16)); // 16字节

        // 加密数据
        const encoded = new TextEncoder().encode(this.data); // 将字符串转换为 Uint8Array
        const encrypted = await window.crypto.subtle.encrypt(
          {
            name: "AES-CBC",
            iv: iv,
          },
          key,
          encoded
        );

        // 将加密后的数据、IV 和密钥存储到 localStorage
        localStorage.setItem('encryptedData', this.arrayBufferToBase64(encrypted));
        localStorage.setItem('iv', this.arrayBufferToBase64(iv.buffer)); // ArrayBuffer 转 Base64
        localStorage.setItem('key', JSON.stringify(keyData)); // 密钥是JSON对象，需要字符串化

        this.encryptedData = this.arrayBufferToBase64(encrypted);
        this.decryptedData = '';

      } catch (error) {
        console.error("Encryption error:", error);
        alert("Encryption failed: " + error.message);
      }
    },

    async retrieveAndDecrypt() {
      try {
        // 从 localStorage 中获取加密数据、IV 和密钥
        const encryptedData = localStorage.getItem('encryptedData');
        const iv = localStorage.getItem('iv');
        const keyData = localStorage.getItem('key');

        if (!encryptedData || !iv || !keyData) {
          alert("No data found in localStorage.");
          return;
        }

        // 将 Base64 字符串转换为 ArrayBuffer
        const encryptedArrayBuffer = this.base64ToArrayBuffer(encryptedData);
        const ivArrayBuffer = this.base64ToArrayBuffer(iv);

        // 导入密钥
        const key = await window.crypto.subtle.importKey(
          "jwk",
          JSON.parse(keyData), // JSON.parse(keyData) 将字符串化的JSON对象转换为JSON对象
          {
            name: "AES-CBC",
            length: 256,
          },
          true,
          ["encrypt", "decrypt"]
        );

        // 解密数据
        const decrypted = await window.crypto.subtle.decrypt(
          {
            name: "AES-CBC",
            iv: ivArrayBuffer,
          },
          key,
          encryptedArrayBuffer
        );

        // 将解密后的 ArrayBuffer 转换为字符串
        const decoded = new TextDecoder().decode(decrypted);
        this.decryptedData = decoded;
        this.encryptedData = encryptedData;

      } catch (error) {
        console.error("Decryption error:", error);
        alert("Decryption failed: " + error.message);
      }
    },

    // ArrayBuffer 转 Base64
    arrayBufferToBase64(buffer) {
      let binary = '';
      const bytes = new Uint8Array(buffer);
      const len = bytes.byteLength;
      for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      return window.btoa(binary);
    },

    // Base64 转 ArrayBuffer
    base64ToArrayBuffer(base64) {
      const binary_string = window.atob(base64);
      const len = binary_string.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        bytes[i] = binary_string.charCodeAt(i);
      }
      return bytes.buffer;
    }
  }
};
</script>

4.2 代码解析

data: 用于存储用户输入的原始数据。
encryptedData: 用于显示加密后的数据。
decryptedData: 用于显示解密后的数据。
encryptAndStore: 异步函数，执行加密和存储操作。
- window.crypto.subtle.generateKey: 生成一个AES-CBC密钥，长度为256位。true 表示密钥可以导出。["encrypt", "decrypt"] 表示密钥可以用于加密和解密操作。
- window.crypto.subtle.exportKey: 导出密钥，将其转换为JSON Web Key (JWK) 格式，方便存储。
- window.crypto.getRandomValues: 生成一个16字节的初始化向量 (IV)。IV用于增加加密的随机性，防止相同的明文加密后产生相同的密文。
- new TextEncoder().encode: 将用户输入的字符串转换为 Uint8Array，这是 Web Cryptography API 接受的输入格式。
- window.crypto.subtle.encrypt: 使用AES-CBC算法对数据进行加密。
- localStorage.setItem: 将加密后的数据、IV 和密钥存储到 localStorage。注意，需要将ArrayBuffer转换为Base64字符串才能存储，密钥需要字符串化。
retrieveAndDecrypt: 异步函数，执行检索和解密操作。
- localStorage.getItem: 从 localStorage 中获取加密后的数据、IV 和密钥。
- base64ToArrayBuffer: 将Base64字符串转换为ArrayBuffer。
- JSON.parse: 将字符串化的JSON对象转换为JSON对象
- window.crypto.subtle.importKey: 导入密钥，将其从JWK格式转换为 CryptoKey 对象，供加密和解密使用。
- window.crypto.subtle.decrypt: 使用AES-CBC算法对数据进行解密。
- new TextDecoder().decode: 将解密后的 ArrayBuffer 转换为字符串，供用户显示。
arrayBufferToBase64 和 base64ToArrayBuffer: 两个辅助函数，用于在ArrayBuffer和Base64字符串之间进行转换。因为localStorage只能存储字符串类型的数据。

4.3 重要注意事项

密钥管理： 上述示例将密钥存储在localStorage中，这非常不安全。localStorage容易被XSS攻击获取，导致密钥泄露。在实际应用中，你需要使用更安全的密钥管理方案，例如：
- Key Derivation Function (KDF): 使用用户密码作为主密钥，通过KDF生成加密密钥。这样，即使localStorage中的数据被盗，没有用户密码也无法解密。例如，使用PBKDF2算法。
- 服务器端密钥管理： 将密钥存储在服务器端，客户端需要向服务器请求密钥才能解密数据。这需要建立安全的身份验证机制。
- 硬件安全模块 (HSM): 使用硬件安全模块来存储和管理密钥，提供最高的安全性。
初始化向量 (IV): 每次加密都应该使用不同的IV。如果使用相同的IV，相同的明文加密后会产生相同的密文，容易被攻击者分析。
错误处理： 代码中包含了简单的错误处理，但在实际应用中，需要更完善的错误处理机制，例如，记录错误日志，向用户显示友好的错误提示。
算法选择： AES-CBC是一种常用的加密算法，但在某些情况下，可能需要选择其他算法，例如AES-GCM，它提供了认证加密，可以防止数据篡改。
用户体验： 加密和解密操作可能会消耗一定的计算资源，影响用户体验。需要在安全性和性能之间进行权衡。可以使用Web Workers将加密和解密操作放在后台线程中执行，避免阻塞主线程。
数据验证： 在解密数据后，应该对数据进行验证，确保数据的完整性和有效性。

5. 进一步的安全增强

除了上述注意事项外，还可以采取以下措施来增强安全性：

Content Security Policy (CSP): 使用CSP来限制浏览器可以加载的资源，防止XSS攻击。
Subresource Integrity (SRI): 使用SRI来验证从CDN加载的资源的完整性，防止CDN被攻击后，恶意代码被注入到你的网站。
定期更新依赖： 定期更新你的Vue和相关的依赖库，修复已知的安全漏洞。

6. 一个使用PBKDF2进行密钥派生的例子

下面是一个使用PBKDF2进行密钥派生的例子。这个例子中，我们使用用户的密码作为主密钥，通过PBKDF2生成加密密钥。

async function deriveKey(password, salt) {
  const enc = new TextEncoder();
  const keyMaterial = await window.crypto.subtle.importKey(
    "raw",
    enc.encode(password),
    { name: "PBKDF2" },
    false,
    ["deriveKey", "deriveBits"]
  );

  const key = await window.crypto.subtle.deriveKey(
    {
      name: "PBKDF2",
      salt: salt,
      iterations: 100000, // 迭代次数，越高越安全，但越慢
      hash: "SHA-256",
    },
    keyMaterial,
    { name: "AES-CBC", length: 256 },
    true,
    ["encrypt", "decrypt"]
  );

  return key;
}

// 使用示例
async function encryptWithPassword(password, data) {
  const salt = window.crypto.getRandomValues(new Uint8Array(16));
  const key = await deriveKey(password, salt);
  const iv = window.crypto.getRandomValues(new Uint8Array(16));
  const encoded = new TextEncoder().encode(data);

  const encrypted = await window.crypto.subtle.encrypt(
    {
      name: "AES-CBC",
      iv: iv,
    },
    key,
    encoded
  );

  // 将salt和iv也存储起来，解密时需要用到
  return {
    encryptedData: this.arrayBufferToBase64(encrypted),
    salt: this.arrayBufferToBase64(salt.buffer),
    iv: this.arrayBufferToBase64(iv.buffer),
  };
}

async function decryptWithPassword(password, encryptedData, salt, iv) {
  const key = await deriveKey(password, this.base64ToArrayBuffer(salt));

  const decrypted = await window.crypto.subtle.decrypt(
    {
      name: "AES-CBC",
      iv: this.base64ToArrayBuffer(iv),
    },
    key,
    this.base64ToArrayBuffer(encryptedData)
  );

  const decoded = new TextDecoder().decode(decrypted);
  return decoded;
}

表格：不同加密算法的比较

算法	类型	优点	缺点	适用场景
AES	对称加密	速度快，安全性高，适合加密大量数据	密钥管理复杂	大量数据加密，例如文件加密、数据库加密
RSA	非对称加密	安全性高，适合加密小量数据或密钥交换	速度慢，不适合加密大量数据	密钥交换、数字签名、加密少量敏感数据
SHA-256	哈希	快速，安全，常用于数据完整性校验	只能单向计算，无法解密	数据完整性校验、密码存储（需要加盐）
PBKDF2	密钥派生	从密码派生密钥，安全性高，可以防止彩虹表攻击	速度较慢，需要选择合适的迭代次数	从用户密码派生加密密钥

7. 总结一下

通过Web Cryptography API，我们可以在Vue组件中实现客户端敏感数据的安全存储和传输。虽然示例代码演示了基本的加密和解密操作，但在实际应用中，需要更加关注密钥管理、错误处理、算法选择以及用户体验等方面的问题。此外，使用PBKDF2等密钥派生函数，可以增强安全性，降低密钥泄露的风险。总之，客户端加密是一个复杂的主题，需要根据具体的安全需求和应用场景进行选择和实现。

更多IT精英技术系列讲座，到智猿学院

Vue组件中基于Web Cryptography API的状态加密：实现客户端敏感数据的安全存储与传输

发表回复 取消回复

发表回复取消回复