IndexedDB 数据加密存储:如何保护存储在本地的敏感数据

千晨小哥_8328

千晨小哥_8328

2026-06-15

407人浏览

原创

indexeddb 本身不加密,敏感数据必须用 web crypto api 的 aes-gcm 前端加密后存储,密钥须由用户密码动态派生且绝不硬编码或持久化,配套 https、csp 等防御措施。

indexeddb 数据加密存储:如何保护存储在本地的敏感数据

IndexedDB 本身不加密,所有敏感数据必须在写入前由前端代码加密,读取后解密。这不是可选优化,而是安全底线——否则数据以明文形式躺在用户硬盘上,任何能访问浏览器存储的程序(包括恶意扩展、本地木马)都可直接读取。

用 Web Crypto API 做端到端加密

别用 Crypto.js 或自研方案,直接使用浏览器原生 Web Crypto API,它支持经验证的 AES-GCM 算法,兼顾加密与完整性校验:

  • 每次加密必须生成全新随机 IV(推荐 12 字节),和密文一起存入 IndexedDB;IV 复用或固定等于放弃安全性
  • 密钥长度不低于 256 位,调用 encrypt({ name: 'AES-GCM', iv }, key, data) 得到密文和认证标签
  • 解密时必须校验 GCM 标签,失败即拒绝解析,不抛出含调试信息的错误
  • 避免 AES-CBC、XOR、Base64 等无认证机制的“伪加密”,它们无法防篡改

密钥不能硬编码,也不能存进数据库

密钥是整个链条最脆弱的一环。它绝不能出现在源码里、不许以字符串形式长期驻留内存、更不可存进 IndexedDB 或 localStorage:

Matrix
Matrix

Matrix是一款AI智能体工具,超长时间自动化运行的主动式多 Agent 协作平台。

下载
  • 密钥应由用户输入(如登录密码)动态派生:用 PBKDF2 或 HKDF,配合服务端下发的 salt(防彩虹表)
  • 派生出的 CryptoKey 对象不可序列化,仅用于 encrypt()/decrypt(),作用域结束自动释放
  • 用户登出时主动清理内存中残留的密钥句柄,避免被快照或调试工具捕获
  • 高敏场景可结合 WebAuthn,用生物认证触发密钥解锁,密钥本身不出设备安全区

加密不是万能的,需配套防御措施

加密只解决静态数据泄露问题,其他攻击面仍需覆盖:

  • 数据库名、objectStore 名、索引名保持中性,不暴露业务含义(例如不用 user_payment_info)
  • 启用 HTTPS 和 Secure Context,防止密码输入过程被中间人劫持
  • 设置严格 CSP 策略,限制内联脚本与未授权域名资源加载,降低 XSS 泄密风险
  • 敏感操作(如密钥派生、解密)尽量放在独立 iframe 或弹窗中执行,隔离执行上下文

推荐轻量级封装方案:Web Crypto Storage

若不想从零实现,可用开源库 Web Crypto Storage,它已整合 Web Crypto API 与 IndexedDB:

  • 自动处理密钥派生、IV 生成、GCM 认证、数据序列化等细节
  • 密钥仅存在于内存,且衍生密钥不可逆,原始密码丢失即永久无法解密历史数据
  • 依赖精简(仅 IDB + Web Crypto Tools),无运行时漏洞风险
  • 提供 Promise 接口,适配现代前端工程流,如与 Dexie.js 或 IDB 的封装层协同使用

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

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

下载

相关标签:

数据加密 敏感数据

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

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2143

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4563

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5730

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5158

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

723

5

http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.09

2963

4

http请求415错误怎么解决
http请求415错误怎么解决

解决方法:1、检查请求头中的Content-Type;2、检查请求体中的数据格式;3、使用适当的编码格式;4、使用适当的请求方法;5、检查服务器端的支持情况。更多http请求415错误怎么解决的相关内容,可以阅读下面的文章。

2023.11.14

814

3

HTTP 503错误解决方法
HTTP 503错误解决方法

HTTP 503错误表示服务器暂时无法处理请求。想了解更多http错误代码的相关内容,可以阅读本专题下面的文章。

2024.03.12

6146

8

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.08.16

5270

6

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Codeigniter 3 中文开发手册
Codeigniter 3 中文开发手册

共0课时 | 0人学习