WebCrypto SHA-256 HMAC

2025-02-05

A quick random thing I learned that I found helpful (and you might too!):

async function hmac(text, secret) {
    let enc = new TextEncoder("utf-8");
    let algorithm = { name: "HMAC", hash: "SHA-256" };
    
    let key = await crypto.subtle.importKey("raw", enc.encode(secret), algorithm, false, ["sign", "verify"]);
    let signature = await crypto.subtle.sign(algorithm.name, key, enc.encode(text));
    let digest = btoa(String.fromCharCode(...new Uint8Array(signature)));

    return digest;
}

This is a function that uses the Web Crypto API to calculate a SHA-256 HMAC of a string given a secret value.

I mostly worked this out so that I could figure out how exactly TextEncoder worked, along with importKey (to turn a secret into proper key material) and also how to convert that back into a hex digest.

>> await hmac("lorem ipsum", "super secret")
"qArFX93Zi83ccIayhYnuFDpd4pk3eB4rZYDvNteobSU="

>> await hmac("lorem ipsum doler sit amet", "super secret")
"klTAioH5nNkguNhU2YcJshaZZtJW9DEb+MTqz4NWq8E="

>> await hmac("lorem ipsum", "even more super secret!")
"RoQLg2uz5KWLMJM72VExH5gZOls5bdZZyzHi678eDWs=" 

>> await hmac("lorem ipsum", "super secret")
"qArFX93Zi83ccIayhYnuFDpd4pk3eB4rZYDvNteobSU="

Disclaimer: This totally counts as rolling your own crypto. Don’t do this unless you know what you’re doing. 😄

Disclaimer disclaimer: I only rarely know what I’m doing. 😄 😄

Also, for what it’s worth, this is equivalent to the Python standard libraries’ hmac + base64 :

>>> base64.b64encode(hmac.digest(b'super secret', b'lorem ipsum', 'SHA256')).decode()
'qArFX93Zi83ccIayhYnuFDpd4pk3eB4rZYDvNteobSU='

Genuary 2023.31: Break a previous image

2023-03-03

Genuary!

Spend a month making one beautiful thing per day, given a bunch of prompts. A month late, but as they say, ’the second best time is now'.

Let’s do it!

31) Deliberately break one of your previous images, take one of your previous works and ruin it. Alternatively, remix one of your previous works.

Genuary 2023.30: Minimalism

2023-03-02

Genuary! Spend a month making one beautiful thing per day, given a bunch of prompts. A month late, but as they say, ’the second best time is now'. Let’s do it! 30) Minimalism Demo Script let gui; let params = { lineWidth: 10, minWidth: 50, maxWidth: 100, maxWidthMax: 400, minHeight: 50, maxHeight: 100, maxHeightMax: 400, colorChance: 0.1, colorChanceMin: 0, colorChanceMax: 1, colorChanceStep: 0.01, } let box; let colors = [ "red", "blue", "yellow", ] function setup() { createCanvas(400, 400); box = { x: -params.