如何在发送表单时对敏感数据进行加密？

靠Base64确实不安全，它只是编码，不是加密。实际开发中，HTTPS是基础，但如果你还想在前端加一层保护，可以用AES对敏感数据加密。下面是一个用CryptoJS库实现的简单示例。

先引入CryptoJS库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

然后写个加密函数和表单提交处理：

// 加密函数

function encryptData(data, secretKey) {

  return CryptoJS.AES.encrypt(JSON.stringify(data), secretKey).toString();

}



document.getElementById('loginForm').addEventListener('submit', function(e) {

  e.preventDefault();



  // 获取表单数据

  var username = this.username.value;

  var password = this.password.value;



  // 密钥建议从后端动态获取，这里为了演示写死

  var secretKey = 'your-32-char-secret-key1234567890';



  // 构造要加密的数据

  var sensitiveData = {

    username: username,

    password: password

  };



  // 加密

  var encryptedData = encryptData(sensitiveData, secretKey);



  // 发送加密后的数据

  fetch('/your-backend-endpoint', {

    method: 'POST',

    headers: { 'Content-Type': 'application/json' },

    body: JSON.stringify({ data: encryptedData })

  })

  .then(response => response.json())

  .then(result => {

    console.log('服务器返回:', result);

  })

  .catch(error => {

    console.error('出错了:', error);

  });

});

几点说明：
1. 这里的AES密钥secretKey必须是32字符长度，生产环境建议从后端动态获取
2. 后端需要使用相同的密钥来解密数据
3. HTTPS还是必须的，这套加密只是增加额外的安全层
4. 别忘了在后端也要做相应的解密处理

复制过去试试，记得把密钥管理和后端解密流程补上。安全这东西，多一层防护总是好的，但也别太依赖前端加密，核心还是要靠HTTPS和后端校验。

直接在前端加密再发这个思路听起来好像能提升安全性，但实际上在Web环境下有根本性的局限。我来一步步说清楚这个问题该怎么处理。

首先你同事说得对，Base64不是加密，只是编码。它和明文几乎没区别，随便一解码就看到了。你在前端用JavaScript做任何加密操作，密钥也得放在前端代码里，攻击者一样能看到、能逆向，所以这种“客户端加密”并不能真正保护数据。

真正关键的是：传输过程的安全必须靠HTTPS（TLS）来保证，而不是靠前端自己搞加密。

现在正规网站登录都是靠HTTPS把整个请求加密传输。你看大厂的登录页，比如GitHub、Google，他们也是直接POST用户名密码，但全程跑在HTTPS上。你抓包看到的只会是加密后的流量，没法解密。

如果你现在的项目还没上HTTPS，那第一件事就是去配SSL证书，强制走https。这是底线。没有HTTPS的情况下，无论你怎么折腾前端加密都没意义，因为中间人完全可以篡改你的JavaScript代码，把加密逻辑干掉或者偷走密钥。

不过有些特殊场景确实需要额外加一层加密，比如：

- 合规要求（某些金融系统）
- 防止内部人员查看明文
- 作为纵深防御的一环

这时候可以考虑在HTTPS基础上再做一次端到端加密。常见做法是用RSA非对称加密：后端生成公私钥对，前端拿到公钥加密敏感字段，后端用私钥解密。

下面是个简化实现：

document.getElementById('loginForm').addEventListener('submit', async function(e) {

    e.preventDefault();



    const username = this.username.value;

    const password = this.password.value;



    // 从后端获取公钥（需提前通过安全接口取得）

    // 实际项目中建议缓存并定期更新

    const publicKeyPem = await fetch('/api/public-key').then(r => r.text());



    // 使用Web Crypto API进行RSA-OAEP加密

    const publicKey = await importPublicKey(publicKeyPem);

    

    // 加密密码（注意：不能直接加密字符串，要转成ArrayBuffer）

    const encryptedPassword = await window.crypto.subtle.encrypt(

        { name: 'RSA-OAEP' },

        publicKey,

        new TextEncoder().encode(password)

    );



    // 转成Base64以便传输

    const encryptedPasswordB64 = btoa(String.fromCharCode(...new Uint8Array(encryptedPassword)));



    // 发送数据

    const response = await fetch('/api/login', {

        method: 'POST',

        headers: { 'Content-Type': 'application/json' },

        body: JSON.stringify({

            username,

            password: encryptedPasswordB64  // 已加密

        })

    });



    if (response.ok) {

        // 登录成功

    }

});



// 导入PEM格式公钥的辅助函数

async function importPublicKey(pem) {

    // 去掉头部尾部标记和换行

    const b64 = pem.replace('-----BEGIN PUBLIC KEY-----', '')

                  .replace('-----END PUBLIC KEY-----', '')

                  .replace(/s/g, '');

    const binaryString = atob(b64);

    const binaryArray = new Uint8Array(binaryString.length);

    for (let i = 0; i < binaryString.length; i++) {

        binaryArray[i] = binaryString.charCodeAt(i);

    }

    return await crypto.subtle.importKey(

        'spki',

        binaryArray.buffer,

        { name: 'RSA-OAEP', hash: 'SHA-256' },

        true,

        ['encrypt']

    );

}

需要注意几个坑：

1. Web Crypto API不支持直接处理PEM格式，得手动解析；
2. RSA有长度限制，只能加密较短数据（比如密码可以，但大段文本不行）；
3. 你需要管理好密钥轮换，避免长期使用同一个公钥；
4. 私钥绝对不能出现在前端或日志里；
5. 这套机制依然依赖HTTPS，否则公钥可能被篡改。

更进一步的话，可以用Diffie-Hellman交换临时密钥，每次会话用不同的对称密钥加密，但这复杂度高得多，一般没必要。

总结一下：

最核心的原则是：不要试图绕过HTTPS去做安全。你应该优先确保全站启用HTTPS，并开启HSTS。前端加密只能作为补充手段，不能替代TLS。你现在的问题不是“怎么加密”，而是“有没有开HTTPS”。先把这一步搞定再说其他。

如果公司还在HTTP上传输密码，那已经属于严重安全漏洞了，比什么算法选型都重要得多。