浏览器原生 Web Crypto API 实现 SHA256 Hash 加密

写在前面

在我上一篇文章 《node 后端和浏览器前端,有关 RSA 非对称加密的完整实践, 前后端匹配的代码演示》 中,我们使用 浏览器原生 Web Crypto API 实现了 RSA 的加密算法。

但是,在我之前的 《我设计的一个安全的 web 系统用户密码管理流程》 代码设计中,还涉及到 hash 计算,而目前,常见的 hash 计算,就是 SHA256 了。同样的,我们可以使用 Web Crypto API 来实现,而不必借助第三方库。

SHA 256 的实现方法

闲言少叙,直接展示代码:

js 复制代码
async function SHA256 (data) {
    const encoder = new TextEncoder();
    const buffer = encoder.encode(data);
    const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}

小结

我们可以看到,浏览器原生 Web Crypto API 可以实现 RSA 的非对称加密,以及 SHA256 Hash 算法,当然,也支持对称加密算法等,大家可以自己去尝试一下。

不过需要注意的是,由于 md5、 sha1 等算法已经被证明是不安全的,因此 Web Crypto API 并没有支持。我个人的建议是,在浏览器端,我们要计算 hash 的话,还是使用 sha256 吧。

以上!祝各位看官开心!我最近看了一下,我居然4年没有写博客了,肯定是因为我年纪大了,懈怠了。各位看官不吝啬小手点个小赞的话,我会多多写博文的哦!谢谢大家。

相关推荐
CoovallyAIHub4 小时前
AAAI 2026这篇杰出论文说了什么?用LLM给CLIP换了个“聪明大脑”
深度学习·算法·计算机视觉
竟未曾年少轻狂4 小时前
Vue3 生命周期钩子
前端·javascript·vue.js·前端框架·生命周期
TT哇4 小时前
【实习】数字营销系统 银行经理端(interact_bank)前端 Vue 移动端页面的 UI 重构与优化
java·前端·vue.js·ui
蓝帆傲亦4 小时前
Web前端跨浏览器兼容性完全指南:构建无缝用户体验的最佳实践
前端
Physicist in Geophy.4 小时前
一维波动方程(从变分法角度)
线性代数·算法·机器学习
晴殇i4 小时前
【前端缓存】localStorage 是同步还是异步的?为什么?
前端·面试
不一样的少年_4 小时前
Chrome 插件实战:如何实现“杀不死”的可靠数据上报?
前端·javascript·监控
深度涌现4 小时前
DNS详解——域名是如何解析的
前端
小码哥_常4 小时前
Android内存泄漏:成因剖析与高效排查实战指南
前端
卤代烃4 小时前
✨ 形势比人强,Chrome 大佬也去搞 Gemini 了
前端·agent·vibecoding