JavaScript数据加密解密与哈希技巧
时间:2025-10-15 15:45:33 382浏览 收藏
想知道如何在 JavaScript 中安全地处理数据吗?本文将深入探讨 **JavaScript 数据加密解密与哈希实现方法**,助你构建更安全的 Web 应用。在现代浏览器中,推荐使用强大的 **Web Crypto API** 进行对称加密(如 AES-GCM)和哈希运算(如 SHA-256)。通过 `crypto.subtle.generateKey` 生成密钥,配合 `encrypt` 和 `decrypt` 实现数据加解密,利用 `digest` 计算数据指纹。对于需要兼容旧版浏览器的场景,**CryptoJS 库** 也是一个不错的选择,它提供了 AES 加解密以及 MD5/SHA256 等哈希算法。需要注意的是,密钥管理至关重要,切勿硬编码密钥,并要充分理解前端加密的局限性,HTTPS 才是保障数据传输安全的关键。立即学习,提升你的 JavaScript 安全技能!
JavaScript中实现加密、解密和哈希运算,推荐使用Web Crypto API。1. 使用AES-GCM进行对称加密:通过crypto.subtle.generateKey生成密钥,encrypt加密数据并生成初始化向量iv,decrypt配合iv还原数据。2. SHA-256哈希:调用crypto.subtle.digest计算数据指纹,结果转为十六进制字符串。3. 兼容旧环境可选CryptoJS库:通过CryptoJS.AES.encrypt/decrypt实现加解密,CryptoJS.MD5/SHA256生成哈希。注意事项包括避免硬编码密钥、妥善处理ArrayBuffer编码、前端加密不替代HTTPS传输安全。现代项目应优先采用Web Crypto API。

JavaScript 中实现数据的加密、解密和哈希运算,通常依赖 Web Crypto API(现代浏览器原生支持)或第三方库如 crypto-js。以下是具体实现方式。
使用 Web Crypto API(推荐,安全且无需引入库)
Web Crypto API 是浏览器内置的安全接口,支持 AES 加密、RSA 非对称加密、SHA 哈希等操作。1. 数据加密与解密(AES-GCM 示例)
对称加密,适合加密本地数据或传输内容。// 生成密钥
async function generateKey() {
return await crypto.subtle.generateKey(
{ name: "AES-GCM", length: 256 },
true,
["encrypt", "decrypt"]
);
}
// 加密
async function encryptData(data, key) {
const encoder = new TextEncoder();
const encodedData = encoder.encode(data);
const iv = crypto.getRandomValues(new Uint8Array(12)); // 初始化向量
const encrypted = await crypto.subtle.encrypt(
{ name: "AES-GCM", iv },
key,
encodedData
);
return { encrypted, iv };
}
// 解密
async function decryptData(encryptedData, key, iv) {
const decrypted = await crypto.subtle.decrypt(
{ name: "AES-GCM", iv },
key,
encryptedData
);
const decoder = new TextDecoder();
return decoder.decode(decrypted);
}
// 使用示例
(async () => {
const key = await generateKey();
const { encrypted, iv } = await encryptData("Hello, 世界!", key);
const result = await decryptData(encrypted, key, iv);
console.log(result); // 输出: Hello, 世界!
})();2. 哈希运算(SHA-256 示例)
用于生成数据指纹,不可逆。async function hashData(data) {
const encoder = new TextEncoder();
const encodedData = encoder.encode(data);
const hashBuffer = await crypto.subtle.digest("SHA-256", encodedData);
// 转为十六进制字符串
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
return hashHex;
}
// 使用示例
hashData("hello").then(console.log); // 输出类似: 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824使用 CryptoJS 库(兼容旧环境)
如果需要支持不完整 Web Crypto 的环境,可使用 crypto-js。先通过 CDN 或 npm 引入:
```html ```1. AES 加解密
```javascript const message = "Hello, 世界!"; const secretKey = "my-secret-key";// 加密 const encrypted = CryptoJS.AES.encrypt(message, secretKey).toString();
// 解密 const bytes = CryptoJS.AES.decrypt(encrypted, secretKey); const decrypted = bytes.toString(CryptoJS.enc.Utf8);
console.log(decrypted); // 输出: Hello, 世界!
<p><strong>2. MD5 和 SHA 哈希</strong></p>
```javascript
console.log(CryptoJS.MD5("hello")); // MD5
console.log(CryptoJS.SHA256("hello")); // SHA-256注意事项
实际开发中需注意以下几点:- 密钥不能硬编码在代码中,应通过安全方式获取(如用户输入、后端协商)
- Web Crypto API 返回的是 ArrayBuffer,处理时注意编码转换
- 哈希不可逆,适用于密码存储(配合盐值 salt)
- 前端加密不能替代 HTTPS,仅作为辅助安全措施
基本上就这些。现代项目优先使用 Web Crypto API,简单场景可用 CryptoJS 快速实现。
今天带大家了解了的相关知识,希望对你有所帮助;关于文章的技术知识我们会一点点深入介绍,欢迎大家关注golang学习网公众号,一起学习编程~
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
281 收藏
-
481 收藏
-
156 收藏
-
434 收藏
-
343 收藏
-
348 收藏
-
332 收藏
-
433 收藏
-
352 收藏
-
122 收藏
-
439 收藏
-
200 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习