JS метод Global.getRandomValues()


Загальний опис

Crypto -> getRandomValues — це метод API Web Crypto, який генерує криптографічно стійкі випадкові значення. Цей метод використовується для створення випадкових даних, які не піддаються предсказуванню, що робить їх ідеальними для використання в криптографії, безпеці або інших додатках, де важлива стійкість до атак.

Метод getRandomValues працює з типізованими масивами, такими як Uint8Array, Uint16Array, Float32Array тощо. Він заповнює ці масиви випадковими значеннями. Важливо зазначити, що цей метод забезпечує більшу безпеку порівняно з методами генерації випадкових чисел, як Math.random(), оскільки використовує криптографічні алгоритми.

Як використовувати getRandomValues

  1. Першим кроком є створення типізованого масиву, в який будуть записані випадкові значення.

    Приклад:

    let randomValues = new Uint8Array(10); // масив з 10 елементів типу Uint8
    
  2. Далі ви викликаєте метод crypto.getRandomValues, передаючи цей масив як аргумент:

    Приклад:

    crypto.getRandomValues(randomValues);
    console.log(randomValues);
    

    Після виклику, масив randomValues міститиме 10 випадкових цілих чисел від 0 до 255 (для Uint8Array).

Практичне застосування

Цей метод дуже корисний, коли вам необхідно генерувати випадкові значення для таких задач, як створення одноразових паролів, токенів для аутентифікації або генерація ключів для криптографічних операцій. Оскільки ці числа генеруються за допомогою безпечних криптографічних алгоритмів, вони є набагато більш стійкими до передбачення в порівнянні з іншими стандартними методами генерації випадкових чисел.

автор: Bond

Порада

Генерація випадкових значень для великих обсягів даних може бути дорогим за часом процесом, тому обмежуйте розмір масиву до необхідного мінімуму для ефективності.

автор: Bond
Порада

Якщо вам потрібен масив з випадкових значень певного типу, завжди використовуйте відповідний типізований масив. Наприклад, для 32-бітних чисел використовуйте Uint32Array або Float32Array, щоб бути впевненими, що значення матимуть правильний діапазон.

автор: Bond
Порада

Пам'ятайте, що crypto.getRandomValues працює тільки в середовищах, де доступний об'єкт crypto, таких як сучасні браузери. Якщо ви працюєте в середовищі Node.js, використовуйте відповідний модуль для криптографічних операцій.

автор: Bond

Синтаксис

crypto.getRandomValues(typedArray);

Повернення

array

Метод crypto.getRandomValues() не повертає значення напряму як результат виконання, але змінює переданий йому масив. Це означає, що він заповнює переданий масив випадковими значеннями (бінарними, цілими числами), що відповідають зазначеному типу масиву (наприклад, Uint8Array, Uint16Array, Uint32Array).

автор: Bond

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
11 21 5 15 12 11
Підтримка: мобільні переглядачі
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 18 21 5
Підтримка: серверні переглядачі
Переглядач Node.js Deno
15.0.0 1.0

Приклади

+ запропонувати свій приклад у пісочниці

Цей приклад показує, як за допомогою методу getRandomValues можна створити криптографічно стійкий токен. Токен є важливим компонентом для аутентифікації користувачів або захисту даних. Використання криптографічно стійких значень гарантує, що токен не буде передбачуваним, що підвищує безпеку системи.

function generateSecureToken() {
   const array = new Uint8Array(16); // створюємо масив для 16 випадкових байт
   crypto.getRandomValues(array); // заповнюємо його випадковими значеннями
   return array.join(''); // перетворюємо масив в строку
}

const token = generateSecureToken();
console.log(token); // виведе криптографічно стійкий токен
автор: Bond

Цей приклад дозволяє користувачу взаємодіяти з інтерфейсом для генерації безпечних паролів. Користувач може ввести бажану довжину паролю (від 8 до 32 символів) через текстове поле, після чого натискання кнопки "Згенерувати пароль" запускає процес генерації. За допомогою методу crypto.getRandomValues створюються випадкові числа, які потім перетворюються в символи з попередньо визначеного набору (великі та малі літери, цифри, спеціальні символи). Це забезпечує створення надійних паролів для користувачів.

автор: Bond

Цей приклад демонструє, як можна використовувати crypto.getRandomValues для створення випадкових паролів. Використовуючи криптографічно стійкі випадкові значення, ми генеруємо пароль із заданим набором символів. Це дозволяє створити безпечний пароль для користувачів або додатків.

function generateRandomPassword(length) {
   const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+';
   const passwordArray = new Uint8Array(length);
   crypto.getRandomValues(passwordArray);

   let password = '';
   passwordArray.forEach(byte => {
      password += chars[byte % chars.length]; // вибираємо символи з доступного набору
   });
   return password;
}

const randomPassword = generateRandomPassword(12); // генеруємо пароль довжиною 12
console.log(randomPassword); // виведе випадковий пароль
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Пропозиція правки

Ваша версія — : після перевірки замінить чинну. Нова порада чи нотатка — з'явиться на сторінці після перевірки.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія секції «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Ваша версія опису «»: після перевірки замінить чинну.

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~
Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень
Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле саме підкаже шляхи, а хибний підкреслить хвилею.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```
Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження
Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox
Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає
Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.
Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||
Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Ви гість — діють добові ліміти. Увійдіть, щоб пропонувати без капчі.

Зворотний зв'язок
Вхід