前端加密的作用与使用场景

一、为什么需要前端加密

前端加密主要用于保护敏感数据，降低数据在传输、处理和存储过程中泄露的风险。

不过，需要明确区分：

• 同源策略：限制不同网站之间访问数据。
• HTTPS：保护数据在网络传输过程中不被窃听和篡改。
• 前端加密：对数据本身进行额外保护，例如让数据以密文形式传输或存储。

因此，同源并不能代替加密，HTTPS 也不一定能满足所有高安全场景。

二、前端加密的典型场景

例如，用户上传一份包含身份证信息的文件：

1. 前端生成一个随机 AES 密钥；
2. 使用 AES 密钥加密文件内容；
3. 使用后端公钥加密 AES 密钥；
4. 将密文文件和加密后的 AES 密钥上传；
5. 后端使用私钥解密 AES 密钥，再解密文件。

这样，即使数据库泄露，攻击者也无法直接看到文件明文。

这种方式适用于：

• 病历、身份证等敏感文件
• 合同和企业机密资料
• 端到端加密聊天
• 高安全等级的身份认证
• 对数据隐私要求较高的系统

三、前端加密与 HTTPS 的区别

HTTPS 主要解决的是：

数据从浏览器传输到服务器的过程中不被第三方截获。

前端加密主要解决的是：

即使数据到达服务器、日志系统或数据库，也尽量不以明文存在。

普通登录、接口请求和支付请求，通常使用 HTTPS 就足够。额外的前端加密可能增加复杂度，并不能替代 HTTPS。

四、前端加密的局限性

前端加密并不是绝对安全：

• 如果页面存在 XSS，攻击者可能在加密前获取明文；
• 如果前端代码被篡改，攻击者可以修改加密逻辑；
• 如果后端最终需要读取明文，私钥或解密能力仍需由后端管理；
• 密钥管理不当，可能导致加密失效。

因此，生产环境还需要结合：

• HTTPS
• 后端加密存储
• 数据库权限控制
• 安全的密钥管理
• 密码哈希
• XSS 和 CSRF 防护
• 访问审计和安全监控

在 Web Crypto API 中：

<span>const</span> keyPair = <span>await</span> crypto.subtle.generateKey(
  {
    name: <span>'ECDSA'</span>,
    namedCurve: <span>'P-256'</span>
  },
  <span>false</span>, <span>// extractable</span>
  [<span>'sign'</span>, <span>'verify'</span>]
);

第二个参数 extractable 作用于生成的密钥对：

• 私钥：extractable: false 时不能通过 exportKey() 导出。
• 公钥：通常仍然可以导出，因为公钥本身不属于敏感信息。
• 私钥仍然可以用于 subtle.sign()。
• 公钥仍然可以用于 subtle.verify()。

场景：医疗文件上传 对称密钥

用户在前端上传病历，前端先用随机 AES 密钥加密文件，再用医院后端公钥加密 AES 密钥，最后上传。

• 数据传输：使用 HTTPS
• 文件内容：即使数据库泄露，攻击者也只能拿到密文
• 后端：用私钥解密 AES 密钥，再读取文件
• 适用：病历、身份证、合同等高敏感数据

普通登录和接口请求通常使用 HTTPS 就足够，不必额外在前端加密。

具体场景：WebAuthn 无密码登录。 非对称密钥

用户首次注册时，浏览器生成一对密钥：私钥保存在用户设备中，公钥发送给服务器。登录时，服务器发送随机挑战，浏览器用私钥签名，服务器用公钥验证签名，从而确认用户身份，私钥不会上传服务器。

场景 非对称密钥

前端使用私钥对请求参数进行数字签名，服务器用公钥验签；若参数被修改，签名验证失败，从而防止参数被篡改。

五、总结

前端加密主要用于高敏感数据和端到端加密场景，目的是降低数据在传输、日志和数据库泄露后的风险。

但对于大多数普通 Web 应用：

HTTPS 负责传输安全，后端负责数据存储安全，前端加密只在有特殊安全需求时使用。