Random Values — In the Browser

At the core of cryptography is the generation of random numbers. These can be true random numbers — such as those generated by the noise in resistors — or pseudo-random numbers. The generation of true random numbers can be expensive, and so most systems use pseudo-random generation, where we generate a seed value which is fairly random to initialise the random sequence.

The Web Cryptography integration provides a strong random number generation named Crypto.getRandomValues(). This method fills an Uint32 array with random values and is a pseudo-random number generator (PRNG) seeded with a value with a defined level of entropy. The method uses user agents to provide the best entropy possible and is seeded from a platform-specified random number source. For Linux systems, this is from /dev/urandom.

The following is the code [here]:

<style>
    .dropdown {
        font-size: 16px;
        border: 2px solid grey;
        width: 100%;
        border-left: 12px solid green;
        border-radius: 5px;
        padding: 14px;
    }
    pre {
        font-size: 16px;
        border: 2px solid grey;
        width: 100%;
        border-left: 12px solid green;
        border-radius: 5px;
        padding: 14px;
    }textarea {
        font-size: 20px;
        border: 2px solid grey;
        width: 100%;
        border-radius: 5px;
        padding: 14px;
    }
</style>

<div class="indented">

    <h2>Random Gen</h2>
    <table width="100%">
        <tr>
            <th width="15%">Random</th>
            <td>
                <input id="generate" class="btn btn-large btn-primary" type="button" value="Generate Random" />
            </td>
        </tr>
        <tr>
            <th width="15%">Number of randoms</th>
            <td>
                <div class="dropdown">
                    <select name="no" id="no">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                        <option value="50">50</option>
                        <option value="60">60</option>
                        <option value="70">70</option>
                        <option value="80">80</option>
                        <option value="90">90</option>
                        <option value="100">100</option>
                    </select>
                </div>

            </td>
        </tr>
        <tr>
            <th width="15%">Random (Int)</th>
            <td>
                <pre id="rand" name="rand"></pre>
            </td>
        </tr>
        <tr>
            <th width="15%">Random (Hex)</th>
            <td>
                <pre id="hash" name="hash"></pre>
            </td>
        </tr>

    </table>

</div>

<script>

    (async function () {

        const myHash = document.getElementById("hash");

        async function getRandom() {
            rand.innerText = "";
            myHash.innerText = "";
            let n = parseInt(document.getElementById("no").value);
            const array = new Uint32Array(n);
            await window.crypto.getRandomValues(array);
            for (let step = 0; step < n; step++) {
                rand.innerText += array[step].toString()+" ";
                myHash.innerText += array[step].toString(16);
            }

           
        }

 
        await getRandom();

        document.getElementById("generate").addEventListener("click", await getRandom);
        document.getElementById("no").addEventListener("click", await getRandom);
        
    })();
</script>

We basically define a new unsigned integer array with a number of elements and then use the window.crypto.getRandomValues function to fill this array with random values:

const array = new Uint32Array(10);
await window.crypto.getRandomValues(array);

A sample run is [here]:

Here are other examples:

Web Cryptography Library using JavaScript