WebCryptoAPI:JavaScript密码学实战教程
编程并不是一个机械性的工作,而是需要有思考,有创新的工作,语法是固定的,但解决问题的思路则是依靠人的思维,这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript密码学:Web Crypto API实战应用》,文章讲解的知识点主要包括,如果你对文章方面的知识点感兴趣,就不要错过golang学习网,在这可以对大家的知识积累有所帮助,助力开发能力的提升。
Web Crypto API 可在浏览器中实现安全加密操作,支持密钥管理、AES-GCM 加解密、HMAC、ECDSA 签名及 SHA-256 哈希,适用于数据保护与身份认证,需结合 HTTPS、安全存储与后端协作以构建完整安全体系。

Web Crypto API 是现代浏览器提供的一套强大的加密功能接口,能够在客户端实现安全的密码学操作,而无需依赖第三方库。它支持哈希计算、对称加密、非对称加密、数字签名和密钥生成等操作,适用于身份认证、数据保护、安全通信等场景。本文将介绍如何在实际项目中使用 Web Crypto API 完成常见加密任务。
生成和管理密钥
密钥是加密操作的核心。Web Crypto API 提供了 crypto.subtle.generateKey() 方法来安全地生成密钥对或对称密钥。
例如,生成一对用于加密/解密的 RSA 密钥:
const generateRsaKeyPair = async () => {
return await crypto.subtle.generateKey(
{
name: "RSA-OAEP",
modulusLength: 2048,
publicExponent: new Uint8Array([1, 0, 1]),
hash: "SHA-256"
},
true,
["encrypt", "decrypt"]
);
};
对于对称加密(如 AES-GCM),可以生成一个共享密钥:
const generateAesKey = async () => {
return await crypto.subtle.generateKey(
{
name: "AES-GCM",
length: 256
},
true,
["encrypt", "decrypt"]
);
};
生成的密钥默认不可提取,提升了安全性。若需导出,应设置 extractable: true 并使用 exportKey() 转换为可传输格式(如 JWK)。
数据加密与解密
使用对称加密保护敏感数据是一种常见做法。AES-GCM 模式既加密又验证完整性,适合大多数场景。
示例:使用 AES-GCM 加密字符串
const encryptData = async (key, data) => {
const encoder = new TextEncoder();
const encoded = encoder.encode(data);
const iv = crypto.getRandomValues(new Uint8Array(12)); // 初始化向量
const ciphertext = await crypto.subtle.encrypt(
{
name: "AES-GCM",
iv: iv
},
key,
encoded
);
return { ciphertext, iv };
};
对应的解密过程:
const decryptData = async (key, ciphertext, iv) => {
const decrypted = await crypto.subtle.decrypt(
{
name: "AES-GCM",
iv: iv
},
key,
ciphertext
);
const decoder = new TextDecoder();
return decoder.decode(decrypted);
};
注意:每次加密必须使用唯一的 IV,避免重放攻击。
消息完整性与数字签名
确保数据未被篡改可通过哈希或签名实现。Web Crypto 支持 HMAC 和 ECDSA 等机制。
生成消息摘要(SHA-256):
const hashMessage = async (message) => {
const encoder = new TextEncoder();
const data = encoder.encode(message);
return await crypto.subtle.digest("SHA-256", data);
};
使用 ECDSA 进行签名和验证:
const signData = async (privateKey, data) => {
const encoder = new TextEncoder();
const encoded = encoder.encode(data);
return await crypto.subtle.sign(
{
name: "ECDSA",
hash: { name: "SHA-256" }
},
privateKey,
encoded
);
};
const verifySignature = async (publicKey, signature, data) => {
const encoder = new TextEncoder();
const encoded = encoder.encode(data);
return await crypto.subtle.verify(
{
name: "ECDSA",
hash: { name: "SHA-256" }
},
publicKey,
signature,
encoded
);
};
签名可用于用户身份确认或防止数据伪造。
实际应用场景建议
在真实项目中使用 Web Crypto API 时,需注意以下几点:
- 所有操作应在 HTTPS 环境下运行,防止中间人攻击
- 私钥不应明文存储,优先使用 Key Storage(如 IndexedDB 配合权限控制)
- 避免在前端单独承担全部安全逻辑,应与后端协同完成认证和授权
- 不支持旧版浏览器(如 IE),需检测 crypto.subtle 是否存在
- 加密后的数据通常需编码为 Base64 或 Hex 字符串便于传输
可封装通用工具函数,统一处理编码、错误和格式转换,提升代码复用性和可维护性。
基本上就这些。Web Crypto API 提供了足够强大的原生能力,合理使用能显著增强前端安全性,但也要清楚其边界——它不是万能锁,而是整体安全架构中的一环。
文中关于的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《WebCryptoAPI:JavaScript密码学实战教程》文章吧,也可关注golang学习网公众号了解相关技术文章。
Golang微服务云API集成技巧解析
- 上一篇
- Golang微服务云API集成技巧解析
- 下一篇
- 百度极速版怎么开启快速搜索
-
- 文章 · 前端 | 5分钟前 |
- PostCSS插件配置全攻略
- 258浏览 收藏
-
- 文章 · 前端 | 12分钟前 | 背景 CSS渐变 linear-gradient radial-gradient 颜色停点
- CSS渐变色详解:linear-gradient与radial-gradient用法
- 402浏览 收藏
-
- 文章 · 前端 | 43分钟前 | 主题切换 color属性 currentColor 颜色统一管理 减少重复代码
- CSScurrentColor统一颜色管理技巧
- 160浏览 收藏
-
- 文章 · 前端 | 44分钟前 |
- CSS导入外部样式表方法详解
- 189浏览 收藏
-
- 文章 · 前端 | 54分钟前 |
- JS对象属性变化监听全解析
- 310浏览 收藏
-
- 文章 · 前端 | 1小时前 |
- Stripe邮政编码验证方法详解
- 413浏览 收藏
-
- 文章 · 前端 | 1小时前 |
- CSS浮动布局响应式实现方法
- 138浏览 收藏
-
- 文章 · 前端 | 1小时前 |
- CSS中:checked和:disabled用法详解
- 149浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 485次学习
-
- ChatExcel酷表
- ChatExcel酷表是由北京大学团队打造的Excel聊天机器人,用自然语言操控表格,简化数据处理,告别繁琐操作,提升工作效率!适用于学生、上班族及政府人员。
- 3187次使用
-
- Any绘本
- 探索Any绘本(anypicturebook.com/zh),一款开源免费的AI绘本创作工具,基于Google Gemini与Flux AI模型,让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景,零门槛,高自由度,技术透明,本地可控。
- 3399次使用
-
- 可赞AI
- 可赞AI,AI驱动的办公可视化智能工具,助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析,还是一键生成专业图表、脑图、知识卡片,可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景,大幅提升办公效率,降低专业门槛,是您提升工作效率的得力助手。
- 3430次使用
-
- 星月写作
- 星月写作是国内首款聚焦中文网络小说创作的AI辅助工具,解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配,助力新人快速上手,资深作者效率倍增。
- 4536次使用
-
- MagicLight
- MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台,专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型,保障角色、风格、场景高度一致性,让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销,助您轻松实现创意落地与商业化。
- 3808次使用
-
- JavaScript函数定义及示例详解
- 2025-05-11 502浏览
-
- 优化用户界面体验的秘密武器:CSS开发项目经验大揭秘
- 2023-11-03 501浏览
-
- 使用微信小程序实现图片轮播特效
- 2023-11-21 501浏览
-
- 解析sessionStorage的存储能力与限制
- 2024-01-11 501浏览
-
- 探索冒泡活动对于团队合作的推动力
- 2024-01-13 501浏览

