深入JS getRandomValue和Math.random方法

一、引言

我们日常开发经常会用到随机数，基本上我接触下来，都是使用 Math.random() 生成的。

例如生成随机ID：

document.body.id = ('_' + Math.random()).replace('0.', '');

请问这样实现有没有问题？

回答：没有问题。

例如随机排序：

[1, 2, 3, 4, 5].sort(_ => Math.random() - .5);

请问这样实现有没有问题？

回答：没有问题。

但是，如果你希望实现加密操作，例如生成密钥，尤其是在 Node.js 服务层，则 Math.random() 就有问题了，会有潜在的安全风险，需要使用 crypto.getRandomValue() 方法。

哦？安全风险？还有个 getRandomValue() 方法？

不急，我们慢慢聊。

二、Math.random的安全风险

提到 Math.random() 的安全风险，有开发人员会说因为 Math.random() 返回的是伪随机数。

这个解释似是而非，和伪随机数没有关系， getRandomValue() 方法返回的也是伪随机数。

还有人说因为 Math.random() 返回的随机值范围不是均匀的，这个回答就不是似是而非了，而是大错特错。

例如我运行个2万次 Math.random() 方法的分布图是下面这样的（实时Canvas绘制，外站无效果，点击重新绘制）：

0 0.5 1

可以看到从左到右基本上是均匀的。

那究竟为何是不安全的呢？

这个就要讲讲 Math.random() 方法的底层实现了，这里有一篇文章有深入介绍，我简述下其中的要点。

Math.random() 函数返回一个范围0-1的伪随机浮点数，其在 V8 中的实现原理是这样的：

为了保证足够的性能， Math.random() 随机数并不是实时生成的，而是直接生成一组随机数（64个），并放在缓存中。

当这一组随机数取完之后再重新生成一批，放在缓存中。

由于 Math.random() 的底层算法是公开的（xorshift128+ 算法），V8 源码可见，因此，是可以使用其他语言模拟的，这就导致，如果攻击者知道了当前随机生成器的状态，那就可以知道缓存中的所有随机数，那就很容易匹配与破解。

例如抽奖活动，使用 Math.random() 进行随机，那么就可以估算出一段时间内所有的中奖结果，从而带来非常严重且致命的损失。

此时应该使用 getRandomValue() 方法。

//zxx: 如果你看到这段文字，说明你现在访问是不是原文站点，更好的阅读体验在这里：https://www.zhangxinxu.com/wordpress/?p=10241（作者张鑫旭）

三、了解getRandomValue方法

Crypto.getRandomValues() 方法返回的也是伪随机数，不是真随机，按照 MDN 的说法，是为了性能考虑，没有使用真随机。

实际上，按照我的认识，所有可以使用算法生成的随机数都可以看成是伪随机数，真随机数应该是存在自然界，例如粒子的起伏，声音的噪点，分子的分布等。

约翰·冯·诺伊曼（玩笑话）：任何使用算术方法生成随机数的人，都是有罪的

和 Math.random() 方法的区别在于， getRandomValues() 方法的随机种子生成器更加的无序，例如系统层面的无序源（有些硬件自带随机种子）。

然后不同浏览器下 getRandomValues() 方法生成的随机数可能是有区别的。

以及 getRandomValues() 方法的底层实现是没有缓存的，随机数都是实时生成的，因此，性能上是要比 Math.random() 差的，因此，如果是高并发的场景，同时随机数仅仅是用做随机，与安全和金钱不相关，请使用 Math.random() 而不是 getRandomValues() 。

就 Web 前端而言，必须要使用 getRandomValues() 方法的场景很少，不过由于纯前端几乎不存在所谓的高并发，因此，你使用 getRandomValues() 方法也是可以的，有装逼的作用。

语法和使用

使用示意（下面代码 self 不太了解可以参见此文“了解全局作用域self”）：

let randNumber = self.crypto.getRandomValues(new Uint32Array(1))[0];
// 一串随机整数，通常10位
console.log(randNumber);

语法为：

crypto.getRandomValues(typedArray)

支持的参数 typedArray 表示整数型的类型数组，包括：Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array 或者 Uint32Array。

返回值回是所有被替换为随机数的新的数组。

不过 getRandomValues() 方法名称有些长，不利于记忆和敏捷使用，我们可以改造下，例如：

Math.randomValue = function () {
    return self.crypto.getRandomValues(new Uint32Array(1))[0];
};

这样我们就可以使用 Math.randomValue() 方法返回足够安全的随机值了。

IE浏览器

在 IE11 浏览器下需要添加 ms 私有前缀：

window.msCrypto.getRandomValues()

IE10 不支持 getRandomValues() 方法。

四、Crypto对象与其他随机值

UUID生成

除了生成随机数，Crypto对象还可以用来生成字符长度为36的 UUID （Universally Unique Identifier的缩写，表示唯一通用标识符）。

例如：

let uuid = self.crypto.randomUUID();
console.log(uuid);
// 示意输出：2433df46-d77f-4eb9-bbdd-4cd99361fe08

不过这个 api 是今年才支持的（Chrome 92+），还比较新，大家先了解下，等明年这个时候，差不多可以在一些前沿项目中尝试使用了。

crypto.subtle对象

crypto 对象还支持一个名为 subtle 的属性，目前唯一的属性，返回的属性值是一个对象，称为 SubtleCrypto 对象，包含大量的方法，可以用来生成各种签名和密钥，所有方法均返回 Promise，包括：

SubtleCrypto.encrypt()
SubtleCrypto.decrypt()
SubtleCrypto.sign()
SubtleCrypto.verify()
SubtleCrypto.digest()
SubtleCrypto.generateKey()
SubtleCrypto.deriveKey()
SubtleCrypto.deriveBits()
SubtleCrypto.importKey()
SubtleCrypto.exportKey()
SubtleCrypto.wrapKey()
SubtleCrypto.unwrapKey()

由于这些方法非本文重点，以及我们日常开发很少会用到，所以不展开介绍，有兴趣可以去 MDN 文档查看。

五、结语

我们日常开发开始推荐使用 Math.random() 方法，高性能且实用，但是如果我们的随机值与加密相关，或者涉及到金钱等安全性要求非常高的场景，务必使用 getRandomValue() 方法。

原文来自：https://www.zhangxinxu.com/wordpress/2021/12/js-getrandomvalue-math-random/

链接: https://fly63.com/article/detial/10954