javascript如何实现加密_有哪些常见的前端加密方法

云晨姑娘_9874

云晨姑娘_9874

2026-01-10

242人浏览

原创

前端JavaScript加密不等于安全加密,因代码、密钥、逻辑完全暴露,仅能防低门槛窃取;Web Crypto API是唯一可信原生方案,但密钥须后端分发或PBKDF2派生,AES-GCM推荐用于对称加密,Base64等仅为编码非加密,敏感操作应移至后端。

javascript如何实现加密_有哪些常见的前端加密方法

前端 JavaScript 加密 ≠ 安全加密

JavaScript 在浏览器中运行,所有代码、密钥、逻辑都对用户完全可见。这意味着 localStorage 里存的密钥、crypto.subtle 里用的 importKey、甚至混淆过的 AES 函数,只要在客户端执行,就无法防止被逆向或绕过。所谓“前端加密”,实际只能做到「防低门槛窃取」或「满足协议格式要求」(比如把密码转成 base64 传给后端),而不是真正保护敏感数据。

Web Crypto API 是唯一可信赖的原生加密能力

现代浏览器(Chrome 68+、Firefox 60+、Safari 16.4+)支持 window.crypto.subtle,它提供符合标准的 AES-GCM、RSA-OAEP、HMAC、SHA-256 等算法,且密钥可标记为 extractable: false,防止被导出。但注意:密钥仍需由后端安全分发或通过密码派生(如 PBKDF2),不能硬编码在 JS 里。

  • 对称加密推荐用 AES-GCM:支持加密 + 认证,避免手动拼接 IV 和 MAC
  • 非对称加密只用于密钥交换或签名,不要用它直接加密大量数据(性能差、有长度限制)
  • SubtleCrypto.generateKey() 创建的密钥必须用 exportKey() 显式导出才能序列化,否则无法跨页面/会话使用
const encoder = new TextEncoder();
const data = encoder.encode("hello");
const key = await crypto.subtle.generateKey({ name: "AES-GCM" }, true, ["encrypt", "decrypt"]);
const iv = crypto.getRandomValues(new Uint8Array(12));
const encrypted = await crypto.subtle.encrypt(
  { name: "AES-GCM", iv },
  key.key,
  data
);

Base64、Hex、URL 编码不是加密,只是编码

很多项目误把 btoa()、Buffer.toString('hex')(Node.js)、encodeURIComponent() 当作“加密”。它们无密钥、无混淆、可逆性极强,仅用于数据格式适配(比如让二进制塞进 JSON 字段或 URL 参数),不提供任何安全性。

javascript-typescript-typescript-scaffold
javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家,专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链(pnpm、Vite、Next.js)、类型

下载
  • btoa("admin:123") → "YWRtaW46MTIz",用任意在线工具秒解
  • 前端用 sha256 对密码哈希再提交?除非配合服务端 salt + 多轮迭代(如 PBKDF2),否则彩虹表可直接破解常见密码
  • 第三方库如 crypto-js 默认使用弱 IV(全零)和 ECB 模式(已弃用),不配置 mode 和 padding 就用,等于没加锁

真正该做的:把加密逻辑移出前端

敏感操作——比如支付签名、文档加解密、用户私钥管理——应由后端完成。前端只负责收集输入、调用 HTTPS 接口、展示结果。若必须前端参与(如端到端加密聊天),则:

  • 密钥永不落地:用 crypto.subtle.generateKey() 创建,extractable: false,内存中使用完即丢
  • 密码派生必须用 PBKDF2 或 scrypt(Web Crypto 支持前者),迭代次数 ≥ 100,000
  • 避免在 console.log()、localStorage、URL query 中暴露密文、IV、salt

最常被忽略的一点:即使用了 AES-GCM,如果 IV 重复使用,攻击者就能恢复明文——而前端用 Math.random() 生成 IV 是灾难性的。务必用 crypto.getRandomValues()。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2355

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3882

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1296

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

4499

7

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

3006

5

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.06

6279

7

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

2026.03.24

4487

22

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

2023.10.19

3248

3

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

2025.10.17

5509

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习