Generating a good nonce in the browser to prevent replay (in Javascript SPA's)

gistfile1.txt

const crypto = crypto.subtle;
async function sha256(message) {
    const msgBuffer = new TextEncoder('utf-8').encode(message); // encode as UTF-8
    const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer); // hash the message
    const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert ArrayBuffer to Array
    const hashHex = hashArray.map(b => ('00' + b.toString(16)).slice(-2)).join(''); // convert bytes to hex string
    return hashHex;
}

let randomNumber = window.crypto.getRandomValues(new Uint32Array(1)); //Generate randomNumber and store in local storage.

sha256(randomNumber).then(hash => console.log(hash)); //Use hash value of randomNumber for the nonce

NOTE: This crypto.subtle will be undefined unless you working within the context of a proper hostname/URL.

A work around for test / development would be to test if crypto.subtle is undefined. If so short circuit and return defaultNonce for a nonce value.