在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中,如何实现数据的加密、解密和哈希运算?

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 引入:

立即学习“Java免费学习笔记(深入)”;

“`html“`

1. AES 加解密

“`javascriptconst 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, 世界!

2. MD5 和 SHA 哈希

```javascriptconsole.log(CryptoJS.MD5("hello")); // MD5console.log(CryptoJS.SHA256("hello")); // SHA-256

注意事项

实际开发中需注意以下几点:密钥不能硬编码在代码中,应通过安全方式获取(如用户输入、后端协商)Web Crypto API 返回的是 ArrayBuffer,处理时注意编码转换哈希不可逆,适用于密码存储(配合盐值 salt)前端加密不能替代 HTTPS,仅作为辅助安全措施

基本上就这些。现代项目优先使用 Web Crypto API,简单场景可用 CryptoJS 快速实现。

以上就是在JavaScript中,如何实现数据的加密、解密和哈希运算?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1523882.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何设计一个支持可视化编排的工作流引擎前端?
上一篇 2025年12月20日 16:18:07
JavaScript:高效提取HTML脚本标签src属性的DOM解析方法
下一篇 2025年12月20日 16:18:22

相关推荐

  • uc浏览器如何禁止访问某些网站_UC浏览器网站屏蔽与访问限制设置

    uc浏览器如何禁止访问某些网站_UC浏览器网站屏蔽与访问限制设置uc浏览器如何禁止访问某些网站_UC浏览器网站屏蔽与访问限制设置uc浏览器如何禁止访问某些网站_UC浏览器网站屏蔽与访问限制设置uc浏览器如何禁止访问某些网站_UC浏览器网站屏蔽与访问限制设置

    可通过UC浏览器内容过滤、设备家长控制或修改Hosts文件屏蔽网站。首先在UC浏览器中进入“隐私与安全”启用内容过滤并添加自定义屏蔽域名;其次利用手机系统“数字健康”或第三方工具设置网站访问限制,实现跨浏览器管控;最后具备Root权限的用户可编辑/system/etc/hosts文件,添加“0.0.…

    2026年9月24日 用户投稿
    900
  • Bing浏览器怎么使用Web选择_Bing浏览器网页内容选择工具操作

    Bing浏览器怎么使用Web选择_Bing浏览器网页内容选择工具操作Bing浏览器怎么使用Web选择_Bing浏览器网页内容选择工具操作Bing浏览器怎么使用Web选择_Bing浏览器网页内容选择工具操作Bing浏览器怎么使用Web选择_Bing浏览器网页内容选择工具操作

    首先启用Bing浏览器的Web选择工具,点击地址栏右侧图标激活;随后拖动鼠标选择内容,支持多区域选取;最后通过右键复制或使用截图功能保存所选文字、图片等内容。 如果您希望在浏览网页时快速提取或分享特定内容,Bing浏览器的Web选择工具可以帮助您实现精准选取和便捷操作。以下是使用该功能的具体步骤: …

    2026年9月24日 用户投稿
    700
  • Java 正则表达式非贪婪匹配替换:精准替换字符串中的特定部分

    Java 正则表达式非贪婪匹配替换:精准替换字符串中的特定部分Java 正则表达式非贪婪匹配替换:精准替换字符串中的特定部分Java 正则表达式非贪婪匹配替换:精准替换字符串中的特定部分Java 正则表达式非贪婪匹配替换:精准替换字符串中的特定部分

    本文旨在解决 Java 中使用正则表达式进行字符串替换时,如何避免过度匹配,实现对特定字符串的精准替换。通过使用单词边界 ,我们可以确保只替换独立的 $c 字符串,而不会影响到 $c_new 等包含 $c 的其他字符串。本文将提供详细的代码示例和解释,帮助开发者掌握这一技巧。 在 Java 中,使用…

    2026年9月24日 用户投稿
    1000
  • 对话非遗簪花传承人,华硕a豆携豆叮寻香泉州 国庆假期与未来香遇

    对话非遗簪花传承人,华硕a豆携豆叮寻香泉州 国庆假期与未来香遇对话非遗簪花传承人,华硕a豆携豆叮寻香泉州 国庆假期与未来香遇对话非遗簪花传承人,华硕a豆携豆叮寻香泉州 国庆假期与未来香遇对话非遗簪花传承人,华硕a豆携豆叮寻香泉州 国庆假期与未来香遇

    即日起至10月8日,时尚数码潮创先锋华硕a豆于福建泉州限时开启「与未来香遇」 “豆叮的寻香之旅”集章打卡活动,围绕茶桌仔、泉州鲤物、有鲤天台咖啡等三处特色地标打造沉浸式城市寻香狂欢;旗下ip豆叮以头戴非遗簪花的泉州限定皮肤萌力“占领”西街,延续上海安福路街区花车巡游派对的浪漫繁花景象,以“科技与非遗…

    2026年9月24日 用户投稿
    900
  • AI音频工具有哪些_好用的AI音频工具大全

    AI音频工具有哪些_好用的AI音频工具大全AI音频工具有哪些_好用的AI音频工具大全AI音频工具有哪些_好用的AI音频工具大全AI音频工具有哪些_好用的AI音频工具大全

    ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 魔音工坊:AI配音神器,轻松打造媲美真人声线 讯飞智作:科大讯飞出品的语音转换与配音利器 听脑AI:智能语音记录助手 Suno:高品质AI音乐创作平台 海绵音乐:字节旗下免费AI音乐创作与探索平…

    2026年9月24日 用户投稿
    300
  • Java正则表达式:利用词边界实现精确的非贪婪字符串替换

    Java正则表达式:利用词边界实现精确的非贪婪字符串替换Java正则表达式:利用词边界实现精确的非贪婪字符串替换Java正则表达式:利用词边界实现精确的非贪婪字符串替换Java正则表达式:利用词边界实现精确的非贪婪字符串替换

    本教程探讨如何在Java中使用正则表达式精确替换字符串中的特定部分,特别是在目标字符串不应消耗后续字符的场景。通过分析常见错误,文章详细介绍了词边界的原理与应用,展示了如何利用它实现非贪婪且不破坏原字符串结构的替换,确保匹配的精确性与替换结果的完整性。 在处理字符串替换时,我们经常面临需要精确匹配特…

    2026年9月24日 用户投稿
    700
  • JFugue中和弦解析的深度解析与实践

    JFugue中和弦解析的深度解析与实践JFugue中和弦解析的深度解析与实践JFugue中和弦解析的深度解析与实践JFugue中和弦解析的深度解析与实践

    JFugue库的onChordParsed方法不会被调用,因为JFugue将和弦分解为独立的音符进行处理。本文详细阐述了如何通过onNoteParsed方法结合音符的isFirstNote(), isHarmonicNote(), isMelodicNote()属性来识别Staccato字符串中的和…

    2026年9月24日 用户投稿
    100
  • Agent Zero— 开源可扩展AI框架,通过用户指令和任务动态学习

    Agent Zero— 开源可扩展AI框架,通过用户指令和任务动态学习Agent Zero— 开源可扩展AI框架,通过用户指令和任务动态学习Agent Zero— 开源可扩展AI框架,通过用户指令和任务动态学习Agent Zero— 开源可扩展AI框架,通过用户指令和任务动态学习

    agent zero 是一个开源的、可扩展的人工智能框架,能够作为用户的个性化智能助手。它不是基于预设功能的工具,而是通过用户指令和任务来动态学习与成长。agent zero 具备持久记忆能力,可以存储过往的解决方案、代码和事实信息,从而更快速地应对未来的任务。该框架将操作系统视为执行任务的工具,具…

    2026年9月24日 用户投稿
    100
  • 怎么在mysql中创建一个表 mysql新建数据表步骤教程

    在 mysql 中创建表的步骤和建议包括:1. 明确业务需求,设计表结构;2. 使用 create table 语句创建表,选择合适的数据类型和设置主键、索引;3. 考虑大数据量时使用分区;4. 设置正确的字符集和排序规则;5. 谨慎使用索引;6. 使用 if not exists 避免重复创建表。…

    2026年9月24日
    100
  • 主板 BIOS 功能深度对比:哪家超频与调校选项更丰富?

    主板 BIOS 功能深度对比:哪家超频与调校选项更丰富?主板 BIOS 功能深度对比:哪家超频与调校选项更丰富?主板 BIOS 功能深度对比:哪家超频与调校选项更丰富?主板 BIOS 功能深度对比:哪家超频与调校选项更丰富?

    答案是旗舰芯片组主板超频功能更强,具体取决于平台和型号。Intel的Z系列与AMD的X/B650E等高端主板提供完整超频选项,而B/H/A系列则限制较多;微星MPOWER系列在主流芯片组上提供越级超频工具;华硕、微星、技嘉三大品牌在BIOS设计上兼顾易用性与专业性,各具特色;最终选择需结合CPU支持…

    2026年9月24日 用户投稿
    000
  • 百度搜索app如何设置默认搜索引擎_百度搜索app搜索引擎切换的详细步骤

    百度搜索app如何设置默认搜索引擎_百度搜索app搜索引擎切换的详细步骤百度搜索app如何设置默认搜索引擎_百度搜索app搜索引擎切换的详细步骤百度搜索app如何设置默认搜索引擎_百度搜索app搜索引擎切换的详细步骤百度搜索app如何设置默认搜索引擎_百度搜索app搜索引擎切换的详细步骤

    百度App不支持更换默认搜索引擎,用户需通过系统浏览器或第三方浏览器设置。首先检查百度App内“我的-设置”是否有搜索引擎选项;若无,可进入手机系统设置中修改默认浏览器的搜索引擎;或下载如Kiwi Browser、Firefox等支持自定义搜索引擎的浏览器,将其默认搜索设为百度,实现灵活搜索体验。 …

    2026年9月24日 用户投稿
    000
  • Spring Boot @Nested 测试中属性覆盖与隔离策略

    Spring Boot @Nested 测试中属性覆盖与隔离策略Spring Boot @Nested 测试中属性覆盖与隔离策略Spring Boot @Nested 测试中属性覆盖与隔离策略Spring Boot @Nested 测试中属性覆盖与隔离策略

    本文深入探讨了在Spring Boot集成测试中,如何利用@Nested注解结合@TestPropertySource实现细粒度的属性配置和隔离。通过详细的示例代码,展示了外部测试类和嵌套测试类如何定义各自的属性集,以及这些属性在不同测试上下文中的继承与覆盖机制,从而确保测试环境的精确控制和独立性。…

    2026年9月24日 用户投稿
    100
  • 2025拼多多双11力度大吗?2025拼多多新版本

    2025拼多多双11力度大吗?2025拼多多新版本2025拼多多双11力度大吗?2025拼多多新版本2025拼多多双11力度大吗?2025拼多多新版本2025拼多多双11力度大吗?2025拼多多新版本

    拼多多2025年双11延续低价策略,升级百亿补贴、推出超级拼团2.0、发放直播神券、启用AR购物空间并扩容会员特权,覆盖iPhone、家电、美妆等品类,叠加多重优惠与互动玩法提升用户体验。 如果您计划在2025年双11期间购物,可能会关注拼多多此次大促的优惠幅度是否足够吸引人。今年拼多多延续了其“低…

    2026年9月24日 用户投稿
    000
  • sublime怎么安装字体并应用_sublime更换与应用新字体方法

    sublime怎么安装字体并应用_sublime更换与应用新字体方法sublime怎么安装字体并应用_sublime更换与应用新字体方法sublime怎么安装字体并应用_sublime更换与应用新字体方法sublime怎么安装字体并应用_sublime更换与应用新字体方法

    先在操作系统安装字体文件,再通过Sublime Text设置中的font_face指定字体名称即可应用。1. 将.ttf或.otf字体文件安装到系统:Windows右键安装,macOS双击后点击“安装字体”,Linux复制到~/.fonts并运行fc-cache -fv更新缓存。2. 重启Subli…

    2026年9月24日 用户投稿
    100
  • windows右键新建菜单没有word或excel怎么办 右键新建菜单找回word和excel的方法

    windows右键新建菜单没有word或excel怎么办 右键新建菜单找回word和excel的方法windows右键新建菜单没有word或excel怎么办 右键新建菜单找回word和excel的方法windows右键新建菜单没有word或excel怎么办 右键新建菜单找回word和excel的方法windows右键新建菜单没有word或excel怎么办 右键新建菜单找回word和excel的方法

    若Windows右键“新建”缺失Word或Excel选项,首先检查Office安装完整性,通过“快速修复”或“联机修复”恢复;若无效,可手动在注册表中添加对应ShellNew项并创建NullFile或FileName字符串值;也可使用.reg批处理脚本自动注入注册表;最后重建.docx和.xlsx文…

    2026年9月24日 用户投稿
    100
  • 新增Pro Max旗舰 Civi定位调整:小米手机大变阵为哪般?

    新增Pro Max旗舰 Civi定位调整:小米手机大变阵为哪般?新增Pro Max旗舰 Civi定位调整:小米手机大变阵为哪般?新增Pro Max旗舰 Civi定位调整:小米手机大变阵为哪般?新增Pro Max旗舰 Civi定位调整:小米手机大变阵为哪般?

    2025年,全球智能手机行业步入深度变革阶段。中国信通院最新研究数据显示,今年上半年,国内用户平均换机周期已接近33个月。在市场趋于饱和、增长乏力的背景下,头部手机厂商纷纷开启战略性调整,从产品结构优化到发布节奏重构,一场涵盖苹果、小米、vivo等品牌的“集体转型”正在悄然展开。 据悉,苹果拟对iP…

    2026年9月24日 用户投稿
    000
  • Chrome浏览器怎么清理“最近关闭的标签页”列表_“最近关闭”历史记录清除方法

    Chrome浏览器怎么清理“最近关闭的标签页”列表_“最近关闭”历史记录清除方法Chrome浏览器怎么清理“最近关闭的标签页”列表_“最近关闭”历史记录清除方法Chrome浏览器怎么清理“最近关闭的标签页”列表_“最近关闭”历史记录清除方法Chrome浏览器怎么清理“最近关闭的标签页”列表_“最近关闭”历史记录清除方法

    可通过清除浏览数据、手动删除特定条目或重启浏览器清理“最近关闭的标签页”列表。 如果您在使用Chrome浏览器时希望清理“最近关闭的标签页”列表,以保护隐私或整理浏览历史,可以通过以下多种方法进行操作。 本文运行环境:MacBook Pro,macOS Sonoma 一、清除全部浏览数据以移除最近关…

    2026年9月24日 用户投稿
    100
  • 苹果手机怎么截长图 苹果手机截长图的方法

    苹果手机怎么截长图 苹果手机截长图的方法苹果手机怎么截长图 苹果手机截长图的方法苹果手机怎么截长图 苹果手机截长图的方法苹果手机怎么截长图 苹果手机截长图的方法

    苹果手机截取长图的方法有两种:一是滚动截屏,二是使用第三方应用程序如 Tailor、Stitch It! 或 Scrolling Screenshot。 苹果手机截长图的方法 苹果手机提供了两种截取长图的方法: 方法一:滚动截屏 截取屏幕的第一部分。点击并按住屏幕截图预览。轻扫手指到想要截取的区域末…

    2026年9月24日 用户投稿
    100
  • Android应用中通过下载链接从Firebase Storage下载文件教程

    Android应用中通过下载链接从Firebase Storage下载文件教程Android应用中通过下载链接从Firebase Storage下载文件教程Android应用中通过下载链接从Firebase Storage下载文件教程Android应用中通过下载链接从Firebase Storage下载文件教程

    本教程详细介绍了在Android应用中如何利用文件的下载URL,结合Android DownloadManager将Firebase Storage中的文件下载到用户设备指定目录。内容涵盖必要的运行时权限处理、清单文件配置以及DownloadManager的具体使用方法,旨在帮助开发者实现本地文件存…

    2026年9月24日 用户投稿
    300
  • 163邮箱官网手机免费入口 163免费邮箱移动登录

    163邮箱官网手机免费入口 163免费邮箱移动登录163邮箱官网手机免费入口 163免费邮箱移动登录163邮箱官网手机免费入口 163免费邮箱移动登录163邮箱官网手机免费入口 163免费邮箱移动登录

    163邮箱官网手机免费入口可通过访问mail.163.com自动跳转至移动版,或在应用商店下载“网易邮箱”App登录,支持多账号管理、邮件收发、附件添加、消息推送及多设备同步,并提供登录保护、主题自定义和垃圾邮件过滤等安全与个性化功能。 163邮箱官网手机免费入口在哪里?这是不少网友都关注的,接下来…

    2026年9月24日 用户投稿
    100

发表回复

登录后才能评论
关注微信