在一些业务场景下，我们经常需要实现一些h转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ash摘要来进行浏览器到服务端的验证逻辑【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。，但是如果载入第三方库，我们又需要避免该原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。库被攻击，而nodejs自带的crypt著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】o模块可以实现加密解密，却无法在浏览器端著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net找到对等的实现。其实，浏览器端早就提供了未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。 Web Crypto API，我们就可【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】以利用浏览器原生的接口来实现摘要hash【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。啦，这样无论是在性能上，还是安全性上，都转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】是最优解。

从caniuse反应的兼容性看，大部分浏原创内容，盗版必究。原创内容，盗版必究。览器都已经支持了，只要不使用低版本浏览器未经授权，禁止复制转载。【本文受版权保护】，都是可以放心使用的。当然，如果一定要支未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net持，可以使用第三方库兜底。

让我们来认识一下 【作者：唐霜】Web Crypto API【转载请注明来源】。本文版权归作者所有，未经授权不得转载。

Web Crypto API原创内容，盗版必究。

Web Crypto API 是一组以构【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。建密码学系统为目标的让脚本可以使用原生加【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net密算法的接口。在浏览器端，它主要提供了两原创内容，盗版必究。【原创内容，转载请注明出处】套和密码学关联的体系：random 和 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】subtle。从名字就可以看出，rand【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】om负责随机算法，也就是说，基于Web 【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】Crypto API我们可以在浏览器端实未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】现真正的随机，而不是Math.rando【转载请注明来源】【本文首发于唐霜的博客】m这种伪随机。subtle则负责像has本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。h、签名、加密、解密等密码学处理。

于此同时，由于它非常靠近原生底层，因此，本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。它的接口使用时，大部分都会以ArrayB【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netuffer作为参数。因此，如果你要使用它【作者：唐霜】本文作者：唐霜，转载请注明出处。，你最好还了解ArrayBuffer相关【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。的使用方法，以在使用时，可以更熟练的实现【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。字符串、数值和buffer之间的转换。而【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netbuffer又是可以在网络间传输的，因此【本文受版权保护】【本文受版权保护】，我们又可以把buffer发送到服务端保原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。存，实现各种签名与验证。

我把相关知识点梳理为一张知识导图，方便你本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】梳理：

可以看到，要全面掌握Web Crypto【转载请注明来源】转载请注明出处：www.tangshuang.net API也并不难，因为它只提供了底层的实【本文受版权保护】【关注微信公众号：wwwtangshuangnet】现，而要设计出完整的密码学系统，则需要有【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net更丰富的密码学知识，简单靠这些API是不【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。可能真正做到安全的。既然如此，那我们用它【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】们有什么用呢？当然有用，因为设计密码学系转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】统的，往往是后端的安全侧的工程师，当他们本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。需要前端同学完成某些密码学处理时，我们有原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net了这部分知识，才能快速实现我们的需求，如【版权所有，侵权必究】【原创不易，请尊重版权】果没有掌握这些API，没有理解其中的规律本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】，那么很难快速完成业务需求。

两端对齐的HASH摘要实现著作权归作者所有，禁止商业用途转载。

回到我们的题目中，我们题目的使用场景是前原创内容，盗版必究。转载请注明出处：www.tangshuang.net端需要将摘要hash发送给后端，后端对该【未经授权禁止转载】【本文首发于唐霜的博客】hash进行验证，验证通过后才予以后续处原创内容，盗版必究。原创内容，盗版必究。理。如果我们设计一套密码学系统，那么这里【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。不仅需要使用密钥、签名、导出、加密等等，【原创不易，请尊重版权】未经授权，禁止复制转载。还要在这些基础的API使用之上，设计一套【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】前后端对齐的加密协议，否则不可能做到真正【作者：唐霜】【未经授权禁止转载】安全的加密验证。要完成如此复杂的设计，对【作者：唐霜】未经授权，禁止复制转载。于前端同学来说，是很难的，因此，我们能够【本文首发于唐霜的博客】未经授权，禁止复制转载。通过hash进行验证，就是不错的一种尝试【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。了。

市面上比较多情况下，会习惯使用md5摘要【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。，但是Web Crypto API中没有【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。提供直接的md5摘要算法，因此，我们只能未经授权，禁止复制转载。【转载请注明来源】从众多SHA算法中挑一个。

此外，我们还必须对ArrayBuffer本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】有较多的了解，因为这些API要实现算法，【未经授权禁止转载】【原创内容，转载请注明出处】都需要借助ArrayBuffer来进行内未经授权，禁止复制转载。【作者：唐霜】存级别的运算，它们都是较低级别的接口。因【转载请注明来源】著作权归作者所有，禁止商业用途转载。此，想得到我们习惯的使用方式，还得进行封【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net装。接下来，我们来实现一个简易的hash本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】函数：

async function sha(str) {
    const encoder = new TextEncoder();
    const data = encoder.encode(str);
    const hashBuffer = await crypto.subtle.digest("SHA-256", data);
    const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
    const hashHex = hashArray
        .map((b) => b.toString(16).padStart(2, "0"))
        .join(""); // convert bytes to hex string
    return hashHex;
}

我们用SHA-256算法实现了一个摘要函【作者：唐霜】【转载请注明来源】数sha，这样，我们就可以在浏览器端对我【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。们想要的文本获取它的hash。

接下来，我们来到nodejs这一端。【本文首发于唐霜的博客】

由于Web Crypto API是底层原【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net生实现，因此它可以被移植（，类似的可以被转载请注明出处：www.tangshuang.net原创内容，盗版必究。移植到原生模块，其实有很多，就看node【原创不易，请尊重版权】【转载请注明来源】js官方愿不愿意去做）。nodejs通过本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】crypto模块暴露了webcrypto【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】接口，而该接口就提供了和浏览器端相同的实本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。现。接下来，我们就来实现一个与上面的sh转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。a函数具有相同功能的nodejs函数：

const { webcrypto } = require('crypto');
const { TextEncoder } = require('util');

async function sha(str) {
    const encoder = new TextEncoder();
    const data = encoder.encode(str);
    const hashBuffer = await webcrypto.subtle.digest("SHA-256", data);
    const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
    const hashHex = hashArray
        .map((b) => b.toString(16).padStart(2, "0"))
        .join(""); // convert bytes to hex string
    return hashHex;
}

你会发现，我们几乎可以原封不动的把浏览器【转载请注明来源】本文版权归作者所有，未经授权不得转载。端的代码移植过来，如果做好封装，甚至可以【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】实现代码同构，只要把subtle对象作为著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。参数传入即可。

如此一来，我们就可以做到，当后端同学需要著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。我们在前端处理并发送一个hash时，可以本文版权归作者所有，未经授权不得转载。【本文受版权保护】用相同的实现来处理了。而且由于我们使用了【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。原生接口，无论是性能，还是安全性上，都比著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】使用第三方纯代码实现的库要好。

结语【原创不易，请尊重版权】

本文带你了解了Web Crypto AP【作者：唐霜】【版权所有，侵权必究】I，让你知道可以通过nodejs的原生模本文作者：唐霜，转载请注明出处。【未经授权禁止转载】块实现浏览器和服务端完全相同的摘要算法。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】不过，本文仅仅是一个知识的抛砖引玉，在实【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。际业务中，我们需要去学习密码学知识，去研【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。究优秀的第三方库和开源项目，了解业界是怎【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。么利用密码学设计来保障系统的安全的。实际原创内容，盗版必究。原创内容，盗版必究。上，在其他语言中，往往提供了丰富的密码学【转载请注明来源】【版权所有】唐霜 www.tangshuang.net模块，例如我们经常遇到带盐（salt）本文作者：唐霜，转载请注明出处。的摘要或加密，例如我们需要在客户端和服务著作权归作者所有，禁止商业用途转载。【作者：唐霜】端之间交换公钥，例如我们需要设计自己的s【本文受版权保护】转载请注明出处：www.tangshuang.netession，诸如此类，就目前而言，JS著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】在这一块还是很弱的，性能上也不大行，如果【本文首发于唐霜的博客】【本文受版权保护】真正想用，我们会考虑使用webassem【转载请注明来源】【本文首发于唐霜的博客】bly在浏览器端提供由底层语言编译的加密本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。模块，或者在nodejs端使用bind能本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。力调用c/c++模块来实现。总而言之，J转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netS的生态还比较脆弱，我们还有很长的路要走著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。。

2023-08-15 3739