深入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/
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！