如何通过 JavaScript 的 Web Cryptography API 进行加密解密操作?

Web Cryptography API 提供浏览器原生加密功能,支持生成密钥、加密解密等操作;2. 使用 crypto.subtle.generateKey() 生成 AES-GCM 对称密钥,需设置 extractable 和使用权限;3. 加密通过 crypto.subtle.encrypt() 执行,明文转 ArrayBuffer 并使用唯一 IV;4. 解密调用 crypto.subtle.decrypt(),验证 IV 和密文完整性;5. 密钥可导出为 JWK 格式存储,但仅当 extractable 为 true 时可用,需注意安全风险;6. 正确使用算法参数与密钥管理可实现前端端到端数据保护。

如何通过 javascript 的 web cryptography api 进行加密解密操作?

JavaScript 的 Web Cryptography API 提供了一套强大的加密功能,可以在浏览器端安全地执行加密、解密、签名和哈希等操作。它不依赖外部库,原生支持现代浏览器,适合处理敏感数据的加解密。

生成加密密钥

使用 crypto.subtle.generateKey() 可以生成对称或非对称密钥。例如,使用 AES-GCM 算法生成一个对称密钥用于加密解密:

const generateKey = async () => {  return await crypto.subtle.generateKey(    {      name: "AES-GCM",      length: 256    },    true, // 是否可提取    ["encrypt", "decrypt"]  );};

生成的密钥可用于后续的加密和解密流程。注意:密钥默认不可提取,增强安全性。

数据加密

使用 crypto.subtle.encrypt() 对数据进行加密。需要提供算法配置、密钥和明文数据(需转换为 ArrayBuffer)。

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

const encryptData = async (plaintext, key) => {  const encoder = new TextEncoder();  const data = encoder.encode(plaintext);  const iv = crypto.getRandomValues(new Uint8Array(12)); // 初始化向量  const ciphertext = await crypto.subtle.encrypt(    {      name: "AES-GCM",      iv: iv    },    key,    data  );  return { ciphertext, iv };};

AES-GCM 是推荐的加密模式,提供认证加密,防止数据篡改。每次加密应使用唯一的 IV(初始化向量)。

数据解密

使用 crypto.subtle.decrypt() 进行解密,传入相同的算法参数、密钥和加密时保存的 IV。

const decryptData = async (ciphertext, key, iv) => {  const decryptedBuffer = await crypto.subtle.decrypt(    {      name: "AES-GCM",      iv: iv    },    key,    ciphertext  );  const decoder = new TextDecoder();  return decoder.decode(decryptedBuffer);};

如果密文被篡改或 IV 不匹配,解密会失败并抛出异常,确保数据完整性。

密钥导出与存储(可选)

若需将密钥保存或传输,可使用 crypto.subtle.exportKey() 导出为 JSON Web Key (JWK) 格式:

const exportKey = async (key) => {  return await crypto.subtle.exportKey("jwk", key);};

导出的密钥可以序列化为 JSON 存储,但仅在设置 extractable: true 时可用。注意:暴露密钥有安全风险,应谨慎处理。

基本上就这些。Web Cryptography API 提供了安全可靠的加解密能力,关键在于正确使用算法参数、管理密钥和 IV。只要遵循标准流程,就能在前端实现端到端的数据保护。

以上就是如何通过 JavaScript 的 Web Cryptography API 进行加密解密操作?的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 15:40:07
下一篇 2025年12月20日 15:40:20

相关推荐

  • JavaScript中遍历对象的几种方式_javascript对象

    答案:JavaScript中遍历对象常用方法包括for…in、Object.keys()、Object.values()、Object.entries()、Object.getOwnPropertyNames()和Reflect.ownKeys(),每种方法适用不同场景。 在JavaSc…

    2025年12月21日
    000
  • JavaScript中数组排序与乱序方法_javascript数组

    数组排序需用sort()配合比较函数,数字排序用a-b,对象按属性比较;乱序应使用Fisher-Yates算法,避免sort()结合Math.random()的不均匀问题。 在JavaScript中,数组的排序和乱序是常见的操作,尤其在处理数据展示、游戏逻辑或随机抽样时非常实用。本文将介绍如何使用原…

    2025年12月21日
    000
  • JavaScript Tree Shaking原理

    Tree Shaking 是构建工具利用 ES6 模块静态结构实现的代码优化技术,通过标记、剔除、压缩三步移除未使用代码。其生效依赖于静态 import/export、无副作用声明、命名导出及正确配置如 babel 的 modules: false 和生产模式打包,确保仅保留运行时真正需要的代码,从…

    2025年12月21日
    000
  • 使用MutationObserver监听DOM变化_javascript技巧

    MutationObserver是监听DOM变化的高效工具,通过创建实例并配置选项如childList、subtree、attributes等,可监控节点增删、属性及文本变化,适用于自动移除广告、SPA事件重绑定等场景,使用observe()开始监听,disconnect()停止以避免内存泄漏,需合…

    2025年12月21日
    000
  • JavaScript中数组去重的十种高效方法

    答案:JavaScript数组去重有十种常用方法。1. Set去重最简洁,适用于基本类型;2. filter+indexOf兼容性好但性能差;3. reduce+includes逻辑清晰但慢;4. for循环+对象键值性能高但仅限基本类型;5. Map可处理复杂键;6. 双重循环暴力对比适合小数组;…

    2025年12月21日
    000
  • JavaScript闭包的常见应用场景与内存泄漏防范

    闭包是函数与词法作用域的组合,可访问外部变量,常用于私有变量、回调和柯里化;需注意及时清理引用以防内存泄漏。 JavaScript闭包是函数与其词法作用域的组合,它让函数可以访问并记住定义时所在环境的变量。闭包在实际开发中应用广泛,但若使用不当也容易引发内存泄漏问题。下面介绍其常见应用场景及如何避免…

    2025年12月21日
    000
  • 解决Blazor富文本编辑器中JSInterop与OnClick事件的常见问题

    本文深入探讨了在blazor应用中利用jsinterop构建富文本编辑器时,因事件处理机制和组件重渲染导致的双击、重复提示及内容丢失问题。通过优化jsinterop调用方式,将命令直接从blazor传递给javascript,并利用blazor组件的`shouldrender`生命周期方法来控制`c…

    2025年12月21日
    000
  • React Router中区分具有相同参数名的嵌套路由

    本文探讨了在react router中,当多个路由路径定义了相同名称的参数(如`:token`)时,如何在一个共享布局组件(如`mainlayout`)中准确判断当前激活的是哪个具体路由分支。文章提供了两种核心解决方案:一是通过为不同路由分支的参数使用唯一的命名来消除歧义;二是通过利用`usemat…

    2025年12月21日
    000
  • 如何实现一个简单的状态管理库

    答案:通过Proxy监听状态变化并结合发布-订阅模式,实现轻量级状态管理。创建响应式对象拦截get/set操作,封装Store类管理状态、支持订阅与更新,配合DOM渲染实现视图自动更新,适用于小型项目或原理学习。 实现一个简单的状态管理库,核心是让数据变化可追踪,并在变化时通知相关组件更新。不需要依…

    2025年12月21日
    000
  • 解决ECMAScript 5中反引号(模板字面量)引发的语法错误

    本文深入探讨了在ecmascript 5环境下使用反引号(`)导致语法错误的原因及解决方案。反引号作为模板字面量是ecmascript 6引入的新特性,用于实现字符串插值和多行字符串。在es5环境中,应采用传统的加号(`+`)进行字符串拼接,以确保代码兼容性和正确运行。 ECMAScript 5 中…

    2025年12月21日
    000
  • 使用 React Native 下载多个 PDF 文件:最佳实践指南

    本文档旨在提供一个在 React Native 应用中高效下载和管理大量 PDF 文件的实用指南。我们将探讨使用 `react-native-blob-util` 或 `rn-fetch-blob` 等库进行文件下载的最佳方法,并讨论在离线模式下存储和访问这些文件,解决一次性下载大量文件可能带来的性…

    2025年12月21日
    000
  • React Native 中批量下载 PDF 文件的最佳实践

    本文介绍了在 React Native 应用中实现批量 PDF 文件下载的最佳方法,特别针对离线模式应用场景。我们将探讨如何利用 react-native-blob-util 或 rn-fetch-blob 等库高效地下载大量 PDF 文件到移动设备本地存储,以便用户在没有网络连接的情况下也能预览这…

    2025年12月21日
    000
  • JavaScript浏览器兼容性处理

    处理浏览器兼容性需识别差异并采用标准方案与降级策略;2. 通过特征检测判断API支持情况,避免依赖UserAgent;3. 使用Polyfill填补缺失功能,如core-js或fetch polyfill;4. 借助Babel和Webpack转译代码并自动注入polyfill;5. 构建配置.bro…

    2025年12月21日
    000
  • Vue.js 项目中 TypeScript 路径别名运行时解析失败的解决方案

    在 vue.js 项目中使用 typescript 时,路径别名(如 `@logic`)在 ide 中可能正常解析,但在运行 `npm run serve` 时却可能遇到 `can’t resolve alias` 错误。这通常是由于 typescript 编译器(`tsconfig.j…

    2025年12月21日
    000
  • 使用Promise.allSettled处理多个异步操作的完整指南

    Promise.allSettled 用于处理多个异步任务,无论成功或失败都会返回所有结果。它接收一个 Promise 数组,返回一个在所有 Promise 完成后才 resolve 的新 Promise,结果数组包含每个 Promise 的状态(fulfilled 或 rejected)及对应值或…

    2025年12月21日
    000
  • 优化Outlook泰语邮件显示:实现文本智能换行策略

    本文旨在解决outlook桌面客户端在处理泰语邮件时文本无法自动换行的问题。针对泰语等无显式词分隔符的语言,outlook的渲染机制常导致文本溢出或显示不佳。文章将详细介绍两种主要解决方案:使用“标签提供可选换行点,以及利用outlook条件注释实现针对性的硬换行,旨在帮助开发者优化邮件在outl…

    2025年12月21日
    000
  • 解决 Outlook 桌面客户端中泰语邮件文本换行问题

    本文旨在解决 outlook 桌面客户端在处理泰语邮件时,文本无法正确换行的问题。通过分析问题原因,并结合 css 和 outlook 条件注释,提供了一套有效的解决方案,确保泰语邮件在 outlook 中也能正常显示。核心方法是使用 “ 标签或 outlook 条件注释包裹的 “ 标签,以实现…

    2025年12月21日
    000
  • 解决HTML Dialog中文件输入取消导致对话框关闭的问题

    本文旨在解决在HTML Dialog中使用文件输入框时,用户取消文件选择操作导致整个对话框意外关闭的问题。我们将分析问题原因,提供一种阻止对话框关闭的解决方案,并探讨替代方案,帮助开发者更好地控制Dialog的行为。 在HTML中, 元素提供了一种创建模态对话框的简便方法。然而,在对话框内部使用 元…

    2025年12月21日
    000
  • 如何避免 Vue 组件中 v-model 每次更改时都调用方法?

    本文旨在解决 Vue 组件中使用 Vuetify 的 `v-autocomplete` 组件时,由于 `v-model` 频繁更新导致关联的 API 调用方法被重复执行的问题。通过使用 `watch` 监听特定的 `v-model` 变化,并结合条件判断,可以有效控制 API 调用的时机,从而优化组…

    2025年12月21日
    000
  • JavaScript实现大文件分片上传_javascript文件操作

    答案:大文件分片上传通过File API将文件切块上传,提升稳定性和效率。前端使用slice方法分割文件,每片独立上传,后端接收存储并按序合并,最终完成完整文件传输。 大文件分片上传是一种提升上传稳定性与效率的常用技术,尤其适用于网络不稳定或文件较大的场景。JavaScript结合HTML5的Fil…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信