更安全的随机数生成

Math.random()

通常情况下我们使用Math.random()来生成伪随机数,在大部分情况下可以很方便的使用。比如

生成混合随机字符

Math.random().toString(36).substr(2);

生成指定范围的随机数

const randomNumber = (min, max) => Math.floor(Math.random() * (max - min) + min);

但如果涉及稍微严谨的一些场景中,Math.random()随机分布不够平均,这时候可以使用浏览器提供的更安全的随机数生成接口Crypto.getRandomValues()

Crypto.getRandomValues()

Crypto看着会比较陌生,这是浏览器提供了基本的密码学的操作接口。

其中提供了一个随机数生成方法getRandomValuesMath.random()的随机数分布不够平均,虽然大部分情况下不会有冲突,但确实有隐患。而且getRandomValues兼容性也还是不错的。

Crypto.getRandomValues

生成随机数首先要提供一个TypedArray对象,生成的随机数会将其里面的对象重写。

window.crypto.getRandomValues(new Uint32Array(5))

Crypto.getRandomValues()直接使用还是比较原始需要自己再次处理数据,网上也有提供可直接用的生成代码:

生成[0, 1)之间的随机数(与Math.random()一致)

const cryptoRand = () => {
    const randomBuffer = new Uint32Array(1);
    window.crypto.getRandomValues(randomBuffer);
    return ( randomBuffer[0] / (0xffffffff + 1) ); // 0xFFFFFFFF = uint32.MaxValue (+1 because Math.random is inclusive of 0, but not 1) 
}

生成指定范围随机数

const randomNumber = (min, max) => {
    const randomBuffer = new Uint32Array(1);
    window.crypto.getRandomValues(randomBuffer);
    const number = randomBuffer[0] / (0xffffffff + 1);
    return Math.floor(number * (max - min) + min);
}

生成ID

const generateId = (len) => {
    const typeArray = new Uint8Array((len || 40) / 2)
    window.crypto.getRandomValues(typeArray)
    return Array.from(typeArray, dec=>dec.toString(16).padStart(2, "0")).join('')
}

或是

const uuidv4 = () => ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));

需要注意的是,为了性能crypto.getRandomValues生成随机数的时候并没有真正的随机数生成器,而是使用了有足够熵的伪随机数生成器。如果需要加密场景,就需要用户自己提供足够熵源的种子。

或者使用现成的随机数生成库nanoid

Nano ID

Nano ID是一个小巧、安全、URL友好、唯一的 JavaScript 字符串ID生成器。支持浏览器、Node.js、React Native,以及提供了各种其他语言的版本。

安装

npm install --save nanoid

安全的生成随机数:

同步

import { nanoid } from 'nanoid'
model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"

异步

import { nanoid } from 'nanoid/async'
await nanoid()

如果更关心性能的话,可以降低安全性使用非安全的随机数生成器

import { nanoid } from 'nanoid/non-secure'
const id = nanoid() //=> "Uakgb_J5m9g-0JDMbcJqLJ"

当然也可以自定义随机字符和大小,具体的方法可以查看文档。

相关资料

MDN - Math.random()

MDN - Crypto.getRandomValues()

Nano ID 文档

Math.random() 二三事

Random Number Generation in JavaScript


01小径
在路上,遇见了一只BUG,我将它抓住,收藏在了这里。<( ̄︶ ̄)>
651 声望
14 粉丝
0 条评论
推荐阅读
Theia 开发环境搭建
Node.js >= 16.14.0 and < 17.If you are interested in Theia's VS Code Extension support then you should use a Node version at least compatible with the one included in the version of Electron ...

LnEoi1阅读 180

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青57阅读 8.7k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.4k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan48阅读 3.4k评论 14

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.6k评论 5

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.8k评论 2

封面图
651 声望
14 粉丝
宣传栏