With AI scrapers and government agencies roaming the internet and snarfing down every last byte (hoping to profit when you mistakenly publish useful information online), it’s gotten harder to share data without it becoming a future liability.

One wrong step and you find yourself accidentally contributing to automating your own job, having your identity stolen, or offending the kind of person that seems to always be complaining about other people being offended.

What if we could hide data in a place no one would ever think to look? What if we could submerge our delicious morsels of knowledge in a flavorless slop so devoid of nutritional value even the most ravenous AI agents would spit it out?

tbrockman/recipe-blog-encoding

is a vibe-coded (and at least partially plagiarized¹) Python CLI that allows you to encode data as completely natural language² using neural linguistic steganography.

Given a shared prompt and a model, it can hide your secrets where they’re least expected: recipe blog introductions.

example.sh

python main.py encode \
  --message "https://www.nokings.org/" \
  --stego-file stego_output.txt \
  --model "models/Qwen3-32B-Q4_K_M.gguf" \
  --prompt "<|im_start|>user
You are a blog author writing your stereotypical recipe introduction, aiming to maximize the chances of your recipe being seen by gaming your articles SEO, without being too verbose. Output only the recipe introduction and nothing else, using a maximum of 12 paragraphs. Choose a random recipe.<|im_end|>
<|im_start|>assistant
<think>

</think>"

which produces something like the following:

example-out.md

Looking for a quick and delicious way to impress your family and friends? This **One-Pan Garlic Butter Chicken with Herbed Potatoes** is the answer. Packed with flavor and easy to make, this dish is perfect for weeknight dinners or weekend feasts. What makes it stand out? It requires only one pan, minimizes cleanup, and allows the rich flavors to infuse perfectly while everything cooks.

The chicken is seasoned with garlic, onion powder, and a touch of paprika, then seared to golden perfection. But the real star here is the buttery herbed potatoes, tender and slightly crispy, soaking up every ounce of aromatic goodness. A quick toss with fresh parsley and oregano adds the warmth that makes this recipe so special.

This recipe is optimized for search engines with keywords like *easy one pan chicken recipe*, *garlic butter chicken*, and *herbed potato side dish*. Whether you're a seasoned chef or a beginner in the kitchen, this dish is a breeze to make and guaranteed to deliver big flavor.

[ ... ]

Which any reader, knowing the original prompt and model used, can use to recover the political messaging hidden in your favorite garlic butter chicken recipe:

python main.py decode --stego-file stego_output.txt --model "models/Qwen3-32B-Q4_K_M.gguf" --prompt "..."

# some processing ... ⌛

======================================================================
RECOVERED SECRET MESSAGE:
======================================================================
https://www.nokings.org/
======================================================================

Just how grandma would have made it.

how it works

The implementation largely follows arithmetic coding steganography. At a high-level, you can imagine the following:

1. We convert our secret into a binary fraction which represents a point somewhere on a number line between [0, 1).
2. We use the model’s next token probability distribution to carve out adjacent intervals on the line, where the width of each interval is proportional to the token’s probability.
3. We repeatedly choose tokens whose interval contains our point, narrowing the interval further and further, until enough of the leading bits of the start and end points of the interval agree, such that we’ve encoded our message.

Here’s a simple example with a 3-bit secret:

secret: 1 0 1
  → binary fraction: 0.101
  → point on [0, 1): 0.625

step 1: interval [0, 1)
  "The"      [0,    0.4)
  "Looking"  [0.4,  0.55)
  "This"     [0.55, 0.8)   ← 0.625
  "A"        [0.8,  1)
  → select "This", narrow to [0.55, 0.8)

step 2: interval [0.55, 0.8)
  " recipe"  [0.55, 0.7)   ← 0.625
  " is"      [0.7,  0.76)
  " One"     [0.76, 0.8)
  → select " recipe", narrow to [0.55, 0.7)

step 3: interval [0.55, 0.7)
  " is"      [0.55, 0.625)
  " uses"    [0.625, 0.67) ← 0.625
  " for"     [0.67,  0.7)
  → select " uses", narrow to [0.625, 0.67)

[0.625,  0.67) in binary:
[0.101..., 0.101...]
 ^^^        ^^^
leading bits agree: 1 0 1 → secret recovered ✓

The generated text would then read: “This recipe uses”

Decoding is just the reverse: run the same model with the same prompt, reconstruct the probability distribution at each step, and read the secret bits back out by checking which tokens were used. It’s important to note that both sides need the exact same model, quantization, top-k, and prompt – any mismatch and the distributions diverge, producing garbage.

limitations

it’s pretty wasteful

You’re loading massive models to encode and decode a small amount of information, slowly, at < 2-3 bits/token. It’s not a great use of compute.

bpe tokenization

It turns out that if you pick a token during encoding, decode it to text, and then re-tokenize that text, you don’t always get the same token back. For instance, if the text so far tokenizes to [..., "hel"] and the model picks the "lo" as the next token, the combined text "hello" might re-tokenize as a single "hello" rather than "hel" + "lo". Then, when decoding, the decoder sees a completely different token at that position and everything after it diverges.

claude's fix: Add a filter that, at each step, tests whether a candidate token would survive a round-trip through decoding and tokenization. Tokens that wouldn’t are excluded from the CDF before any interval math happens. You lose some encoding capacity, but you can be certain that if your message can be encoded, it can also be decoded.

model end-of-sequence can be reached before the secret is fully encoded

question: What do we do if the prompt we’ve chosen doesn’t provide a path to generate sufficient tokens to encode our secret, converging on end-of-sequence before giving us enough bits?

answer: 🤷 choose a better prompt and try again.

security

The prompt acts as a shared key, but it’s a leaky one. The generated text is statistically conditioned on the prompt, where the prompt is partially revealed by its own output (which is generally not seen as an ideal property for encryption methods).

threat model: passing a note to your friend about which girl you like in class, through an untrusted intermediary

local LLM only

Not that it’s not possible to use any remote APIs (it should be so long as they provide sufficient determinism and logits), local’s just all that was implemented.

try it out

Available on Google Collab or from source:

git clone https://github.com/tbrockman/recipe-blog-encoding/
cd recipe-blog-encoding
python3 -m venv env
source env/bin/activate
pip install -r requirements.txt
python main.py --help

have fun cooking ✌️

An interactive example of ingesting CSV data into pglite to be filtered using pgvector, in your browser.

Originally written as a takehome project to create a user interface for an executive to filter through data/trials.csv.

Features

• No server, everything is done in the browser ^{(except the things done at build-time)}
• PostgreSQL instance (pglite) for search (using pgvector, though the fuzzystrmatch extension is also available)
• transformer.js + Supabase/gte-small model for extracting embeddings from user query as well as dataset
• CodeMirror editor for writing SQL (used to query the dataset)

<imagine a cool picture of it here ^{because i can’tfindone🥺}>

Since my contribution graph usually looks like this:

< tumbleweed emoji >

...I’ve always had it in the back of my mind as something I’d like to take a stab at. Primarily for the sake of solving an interesting problem, but also to mess with recruiters who seem to believe contribution activity strongly correlates with programming ability (said with chip on shoulder as someone required to use a separate GitHub account for work).

Since taking a burnout-induced leave-of-absence, I’ve had some time to explore the problem, which has led to the creation of...

tbrockman/github-paint

a GitHub Action which--given a string, a GitHub API token, and any optional parameters--performs the necessary calculations to create the right number of commits on the right dates to render something like the following in your GitHub profile:

Since it’s a GitHub Action, you can also configure it to run periodically such that your contribution graph always shows the text in the same position as time goes on.

how it works

The whole thing is a Python Typer-CLI that primarily makes calls to gh and git, orchestrating the following:

1. First, we create a pixel grid where width = number_of_weeks_in_timeframe and height = 7.
2. Then, we take our (potentially repeated) text, determine its size given the font (and the dimensions of each glyph used), and position it within the window (given specified padding and alignment).
3. Then, we map each pixel in the window to its corresponding date.
4. Then, retrieving the users existing contribution activity for each date, we determine (given some secret sauce on how commit activity correlates to pixel color) how many additional commits we need on that day.
   • If we actually need fewer, we can handle this by adding more commits to other days--assuming our target isn’t zero commits (that would be pretty hard to do).
5. Then, after initializing a fresh git repository, for each day (in the appropriate chronological order--though this doesn’t seem to matter much to GitHub), we forge the necessary number of commits on each date (since git allows setting arbitrary commit timestamps).
6. Finally, push the new repository and history (deleting the old one if it exists), and wait a bit for GitHub to render our shiny new contribution graph.

So far, it seems to work pretty well, but it’s not super battle-tested. if you run into issues feel free to create a pull request in the repository: https://github.com/tbrockman/github-paint.

✌️

You would need the ability to intercept the request before it happens, modify the request body, and then send it on its way.

There’s a few ways you could go about doing this, but one of the more straight-forward ones is by using a content script.

content scripts

Depending on the browser (Firefox is a bit more security conscious), content scripts can directly interact with existing webpage Javascript objects (with the converse being true as well), and modify them as desired.

This means that you can write something like the following:

content-script.js

let proxied = fetch;
fetch = function (resource, options) {
    console.log('in proxied fetch handler', resource)

    if (resource.includes('/svc/shreddit/events')) {
        // assuming the request body is JSON
        let body = JSON.parse(options.body);
        console.log('original body', body)
        // mangle the tracking data
        body['info'] = mangle(body['info']);
        console.log('mangled body', body)
        // stringify the body again
        options.body = JSON.stringify(body);
    }
    return proxied(resource, options);
}

Where mangle could be a function like:

let strings = ['never', 'gonna', 'give', 'you', 'up', 'let', 'down', 'run', 'around', 
               'and', 'desert', 'make', 'cry', 'say', 'goodye', 'tell', 'lie', 'hurt']
let ints = [0, 420, 69, 8008135, 666]

function mangle(data) {

    if (data === null || data === undefined) {
        return data
    }

    if (Array.isArray(data)) {
        data = data.map(d => mangle(d));
    } else if (typeof data === 'object') {
        Object.keys(data).forEach(key => {
            data[key] = mangle(data[key]);
        });
    }
    else if (typeof data === 'string') {
        data = strings[Math.floor(Math.random() * strings.length)];
    } else if (typeof data === 'number') {
        data = ints[Math.floor(Math.random() * ints.length)];
    } else if (typeof data === 'boolean') {
        data = Math.random() < 0.5;
    }
    return data;
}

And then, assuming you’ve set up your manifest.json correctly:

manifest.json

{
    "name": "Reddit tracking data mangler",
    "version": "1.0",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    },
    "host_permissions": [
        "https://*.reddit.com/*"
    ],
    "permissions": [
        "tabs",
        "scripting",
        "activeTab"
    ]
}

You can inject it on every page load:

background.js

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
        chrome.scripting.executeScript({
            target: { tabId, allFrames: true },
            files: ['content-script.js'],
            injectImmediately: true,
            world: 'MAIN'
        }).then(() => {
            console.log('content script injected');
        });
    }
});

And then marvel at your work:

Pretty neat, right? But what if we were feeling bad and wanted to extend our little application so that we could turn it on and off when we didn’t care about being tracked? We could add a button to the popup that would toggle the content script, but how would we communicate to the content script in the first place?

This is where message passing comes in.

message passing

If you’ve worked in browser extensions before, you’re likely already familiar with sending messages between the background script and the popup, maybe even communicating with content scripts injected into the default ISOLATED world, but it turns out that once your code exists in the same realm as other webpage Javascript, you can’t send messages as easily.

To illustrate this, let’s start off by adding a button to our popup that will allow us to toggle our content script:

<!DOCTYPE html>
<html>
  <head>
    <title>Reddit tracking data mangler</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <button id="toggle">Toggle</button>
  </body>
</html>

We’ll need a listener for the button click to send a message to the our content script:

popup.js

document.addEventListener('DOMContentLoaded', function() {
    let toggle = document.getElementById('toggle');
    toggle.addEventListener('click', async () => {
        await chrome.runtime.sendMessage('toggle')
    });
});

Then we’ll add a listener for the message in our content script (and modify our fetch handler to consider the toggle):

content-script.js

let enabled = true;

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    console.log('message received', message);
    if (message === 'toggle') {
        console.log('toggling');
        enabled = !enabled;
    }
});

fetch = function (resource, options) {
    console.log('in proxied fetch handler', resource)
    if (resource.includes('/svc/shreddit/events') && enabled) {
        // assuming the request body is JSON
        let body = JSON.parse(options.body);
        // mangle the tracking data
        console.log('original body', body)
        body['info'] = mangle(body['info']);
        // stringify the body again
        console.log('mangled body', body)
        options.body = JSON.stringify(body);
    }
    return proxied(resource, options);
}

And add our new popup to our manifest:

manifest.json

{
    "action": {
        "default_title": "Reddit tracking data mangler",
        "default_popup": "popup.html"
    }
}

Then we load up our extension and…

oh poop.

This is because the content script only has access to a limited subset of the chrome.runtime API as a result of being injected into the MAIN world. While at first frustrating, if you stop to think about it, it makes sense: Content scripts injected into the MAIN world are now running in the same context as the webpage, and the webpage (or other content scripts) can’t be trusted. Naturally the browser requires a few more precautions to help make sure you understand the full implications of what you’re doing.

externally connectable

Instead, we need to treat our own content script as an external webpage, since it can no longer be considered a trusted part of the extension. This means that we need to allow connections from external webpages in our manifest.json:

manifest.json

{
    "externally_connectable": {
        "matches": ["https://reddit.com/*"]
    }
}

Then, we establish a connection from our content script to our background script:

content-script.js

// chrome.runtime.id is not available in `MAIN` world content scripts, so we need to hardcode our extension ID
// you can find your extension ID in `chrome://extensions/`, but if you don't want to hardcode this string, skip ahead to the bonus section.
let port = chrome.runtime.connect('blfjpfhginhogjljcbffeadcafbcmldg'); 

port.onMessage.addListener((message) => {
    console.log('message received', message);
    if (message === 'toggle') {
        console.log('toggling');
        toggled = !toggled;
    }
});

Then, create the corresponding background script listener for onConnectExternal:

background.js

let ports = []; // keep track of all our connections for messaging

chrome.runtime.onConnectExternal.addListener((port) => {
    console.log('external connection received', port);

    ports.push(port);
});

As well as adding a listener for relaying the toggle (and any other) message from our popup:

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        ports.forEach(port => {
            port.postMessage(request);
        });
    }
);

And now we can toggle our content script from our popup!

it’s toggled

Note that after making your extension externally connectable, you should be very careful about how you process information you receive, and what information you send, to untrusted external connections–even if the recipient is trusted, there’s no guarantee other code won’t be spying.

bonus: using func

You may have noticed earlier that we had to hardcode our extension ID in our content script, which isn’t very portable (it’ll be different each time someone develops locally and when it’s published in production) and will need to be manually updated. You may find other reasons that you want to provide context directly to your content script from your background script.

It turns out that this can be accomplished using the func and args parameters of chrome.scripting.executeScript.

Caveats:

• func will be serialized and then deserialized for injection, so it will lose any references to the original function’s scope (i.e, it must contain all the code it needs to execute within itself)
• args must all be JSON-serializable

So, as an example, we would re-write content-script.js to be:

content-script.js

function injectContentScript(extensionId) {
    console.log('injected content script with id: ', extensionId)

    let enabled = true;
    let port = chrome.runtime.connect(extensionId);

    port.onMessage.addListener((message) => {
        console.log('message received', message);
        if (message === 'toggle') {
            console.log('toggling');
            enabled = !enabled;
        }
    });

    // ... rest of previous content script ...
}

export {
    injectContentScript
}

Then we update background.js:

background.js

import { injectContentScript } from './content-script.js';

// ... previous code ...

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {

    if (changeInfo.status == 'complete') {
        chrome.scripting.executeScript({
            target: { tabId, allFrames: true },
            func: injectContentScript, // pass our new function
            args: [chrome.runtime.id],  // pass our extension ID (or any other JSON-serializable arguments)
            injectImmediately: true,
            world: 'MAIN'
        }).then(() => {
            console.log('content script injected');
        });
    }
});

And finally, update the manifest too (since we’re importing our content script using ES module syntax):

manifest.json

{
    "background": {
        "service_worker": "background.js",
        "type": "module"
    }
}

Then, reload our extension, refresh reddit.com and…

it works!

You now know how to communicate with content scripts injected into the MAIN world, and how to pass arguments to them.

Hope this helped!

your affordable housing

Pay your hotel bill. Say goodbye to the nice masseuse lady who wants you to date her daughter to make sure she has someone taking care of her in the big city.

When she gives you a big hug, at first be surprised that she even likes you. Then be surprised when you can tell she’ll really miss you.

Give her a real hug back.

Get your Covid test, be shocked at how reasonably priced it is (only $6), and when you don’t have enough Thai Baht feel incredibly grateful that they tell you it’s okay to come back and pay them the rest later.

Go to the bar that one friendly-seeming guy hanging out on the street has constantly told you to visit (paying back the money to the clinic beforehand). Sit down and get a weed infused shake.

Look around and spot the kayaking guide who was endlessly enthusiastic about singing, fishing, life, and bioluminescent plankton; who took you on a midnight kayak ride with absolutely no one else, where you both shouted excitedly about the glowing plankton together.

Drink your shake, unsure of whether you’ll enjoy it given that you usually have an aversion to edibles. Be pleasantly surprised when it doesn’t even come close to tasting bad (nothing does here).

When a pretty waitress offers you a joint, take a hit and immediately descend into a fit of frantic coughing. Wonder to yourself why you bothered smoking so much weed when you were younger if you couldn’t even be cool in moments like these. Feel at ease when everyone nearby just chuckles and moves on.

When the waitress gives you the rest of the joint to finish later, take it.

Go to the restaurant you’ve visited every single day, where you were getting on a first name basis with all the employees. Have a small talk with everyone. Think about how you’ll miss them when they ask you when you’re leaving and tell you they hope you’ll come back soon.

Eat one last amazing meal paired with a refreshing beer. Stare at excessively attractive shirtless people as they walk by. Be perplexed at how grumpy some of them seem relative to how perfect life here is.

the best pad thai

Have one last conversation with the chef who made the most amazing Thai food you’ve had in your life, who loves and cares about cooking so much that she struggles to let anyone else do it (even though she’s simultaneously raising her children and running the restaurant). Try (and fail, due a tiny language barrier) to figure out what she wants most for her kitchen so you can get it for her, because her food and personality are gifts which should be shared with as many people as possible (without ruining them).

a cocktail that actually tastes as good as it looks

Say one last goodbye to everybody. To the cute quiet girl who smiled at you every day whose age you were never able to ascertain. To the boss man who always looked slightly stressed but happily shared his food with you that one time (it was delicious). To the waiter who talked with you the most, who made delicious cocktails for you, who always treated you back after you bought him a drink, and who always asked you “why not?” — to which you never had an opposing argument.

Double check that your transportation to your flight is booked (just to be safe).

Walk to the beach, look around the horizon, admire the sunbathers, envy the dads, puzzle at the life jacketers, marvel at the rocky ridges, witness the speeding long boats, size the cascading waves, and gaze at the faraway clouds which never visited the island throughout your stay.

Swim in the ocean and be at peace. Effortlessly glide through the waves as if you actually have some idea how to swim. Let the ocean cradle you up and down as you look around, savoring the memory of the island you briefly called home.

❤️

Realize that you’re in the good times, right now. That the growth you went through in getting here, and the wounds of the loss which brought you, were somehow worth it. That your future is bright, and your present not too shabby either.

See the outline of tomorrow begin to form, the blueprint for a new life materializing infront of you. Pack your bags, think about when you’ll come back, and get ready for your next chapter.

sawasdee khap 🙏

(you can also just skip to the GitHub repository if you’re into that sort of thing)

Write your code:

src/index.js

import { Example } from './example.js'

const example = new Example()

src/example.js

class Example {

    constructor() {
        console.log('hello world')
    }
}

export {
    Example
}

Setup your webpack.config.js file and run webpack:

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  // This will output a single file under `dist/bundle.js`
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  }
}

> webpack

asset bundle.js 76 bytes [compared for emit] [minimized] (name: main)
orphan modules 112 bytes [orphan] 1 module
./src/index.js + 1 modules 183 bytes [built] [code generated]
webpack 5.28.0 compiled successfully in 177 ms

Create your service worker entrypoint, importing the produced bundle:

service-worker.js

try {
    // This is the file produced by webpack
    importScripts('dist/bundle.js');
} catch (e) {
    // This will allow you to see error logs during registration/execution
    console.error(e);
}

Reference the file in your manifest:

manifest.json

{
    "name": "webpack-manifest-v3-example",
    "author": "Theodore Brockman",
    "version": "1.0.0",
    "description": "A Chrome extension packed using Webpack.",
    "permissions": [],
    "background": {
        "service_worker": "service-worker.js"
    },
    "manifest_version": 3
}

Load your unpacked extension and inspect the service worker view to check the output:

Done.

that was actually a pretty light day

Maybe you have multiple tabs of the same page open because you lost where the last one was.

career success is proportional to the number of times you check your e-mail

You may even have some articles that you don’t think are important enough to bookmark, yet you don’t have the willpower to close them on your own.

tests are just for people who don’t believe in themselves anyways

I’m frequently guilty of all these things, so I decided to work on a quick little thingy to make my life easier.

…is a small Chrome extension that will prevent you from opening any duplicate tabs. Instead, it’ll just focus the one you already have opened.

You can download it on the Chrome store here.

You can also set it up to automatically close tabs you haven’t looked at in awhile, with a configurable threshold for determining inactivity. I’ve been experimenting with having my tabs snipped away after a week of inattention, which seems to work for me.

If you’re worried you’re not brave enough to let go of your old tabs, don’t forget you can still look at your history if you weren’t ready to move on and find yourself missing some of them later.

Hope you like it!

My first blog post is about me finding a small issue allowing abuse of an open-source application, me notifying the author poorly, the issue not being addressed, and me creating a fork that solves the problem.

Let’s get into it.

Utterances

Utterances is an open-source Typescript plugin which integrates with GitHub to allow comment sections backed by GitHub issues, which when you combine it with something like GitHub pages, gives the ability to host a static website with comments, for free! It also looks pretty nice and works on mobile.

Being impressed by the plugin (and suspicious of things that implement OAuth flows), I was curious to know how this little comment section worked.

<script src="https://utteranc.es/client.js"
        repo="tbrockman/tbrockman.github.io"
        issue-term="hello world 👋"
        theme="github-light"
        crossorigin="anonymous"
        async>

With the above script included on your webpage, Utterances will inject an iframe at the scripts location, and attempt to retrieve the comments linked to an issue specified by the repo and issue-term. It will then render all comments (with remarkably similar styling to GitHub) in its place.

Helpful features

It’s one more step to navigate to GitHub directly to post comments on an issue itself, so the author implemented a simple OAuth flow that allows user to permit the app access to create comments on their behalf, which is pretty nice!

which then brings you to…

And afterwards you’re able to comment, just like you’re on GitHub!

Usually I just give access to any of my accounts whenever anyone asks for it (what’s the worst that could happen?), but the application is open-source so I thought I may aswell peek around a little bit.

Investigation

Tracing the code from the start of the flow, we see the Sign in to comment button sends us to an endpoint from the Utterances API with a redirect parameter back to our original website.

utterances/src/new-comment-component.ts#L72

<a class="btn btn-primary" href="${getLoginUrl(page.url)}" target="_top">Sign in to comment</a>

utterances/src/oauth.ts#L7

export function getLoginUrl(redirect_uri: string) {
  return `${UTTERANCES_API}/authorize?${param({ redirect_uri })}`;
}

Going to the backend code, you can see that the Utterances API generates some secret state and builds a redirect URL to request the necessary scopes for the user from GitHub, and sets a URL where the user will be redirected should they approve the request.

utterances-oauth/src/routes.ts#L74

async function authorizeRequestHandler(origin: string, search: URLSearchParams) {
  const { client_id, state_password } = settings;

  const appReturnUrl = search.get('redirect_uri');

  if (!appReturnUrl) {
    return badRequest(`"redirect_uri" is required.`);
  }

  const state = await encodeState(appReturnUrl, state_password);
  const redirect_uri = origin + '/authorized';
  return new Response(undefined, {
    status: 302,
    statusText: 'found',
    headers: {
      Location: `${authorizeUrl}?${new URLSearchParams({ client_id, redirect_uri, state })}`
    }
  });
}

Assuming successful parsing of authorization code and state (passed as URL query parameters), it uses the retrieved information for acquiring an access token from GitHub, which will then be stored as a cookie to be sent along with future requests to the Utterances API.

utterances-oauth/src/routes.ts#L123

let accessToken: string;
try {
  const response = await fetch(accessTokenUrl, init);
  if (response.ok) {
    const data = await response.json();
    accessToken = data.access_token;
  } else {
    throw new Error(`Access token response had status ${response.status}.`);
  }
} catch (_) {
  return new Response('Unable to load token from GitHub.');
}

const url = new URL(returnUrl);
url.searchParams.set('utterances', accessToken);

return new Response(undefined, {
  status: 302,
  statusText: 'found',
  headers: {
    'Location': url.href,
    'Set-Cookie': `token=${accessToken}; Path=/token; HttpOnly; Secure; SameSite=None; Max-Age=${60 * 60 * 24 * 356}`
  }
});

So overall, a relatively fine and safe implementation. Utterances procurs an access token, and then sends it back for me to use to interact directly with the GitHub API. Perfectly reasonable.

…for the most part.

Maybe too helpful

In order to be even more convenient, Utterances will sometimes go through the work of posting GitHub issues for you. If the issue the script references doesn’t exist yet and someone tries to comment, the script will send a request to the Utterances API to create the missing issue.

Looking into the code, we can see the section where if there is no issue, it sends a create issue request.

utterances/src/utterances.ts#L57

const submit = async (markdown: string) => {
  await assertOrigin();
  if (!issue) {
    issue = await createIssue(
      page.issueTerm as string,
      page.url,
      page.title,
      page.description || '',
      page.label
    );
    timeline.setIssue(issue);
  }
  const comment = await postComment(issue.number, markdown);
  timeline.insertComment(comment, true);
  newCommentComponent.clear();
};

The handler for that request is so eager to please, it almost immediately starts to create the specified issue for you, it only checks that you’re an authenticated GitHub user first.

utterances-oauth/src/routes.ts#L123

const authInit = {
  method: 'GET',
  headers: {
    'Authorization': authorization,
    'User-Agent': 'utterances'
  }
};

let authenticated = false;
try {
  const response = await fetch('https://api.github.com/user', authInit);
  authenticated = response.ok;
} catch (_) {
}
if (!authenticated) {
  return new Response(undefined, { status: 401, statusText: 'not authorized' });
}

const init = {
  method: 'POST',
  headers: {
    'Authorization': 'token ' + settings.bot_token,
    'User-Agent': 'utterances',
  },
  body: request.body
};
try {
  const response = await fetch(`https://api.github.com${path}`, init);
  ...

This means that any authenticated GitHub user can use the Utterances API to create issues anywhere the bot is allowed. A single account could be used by a malicious actor to cause all incoming requests to the application fail, simply by consuming the bots rate-limit for issue creation.

Proof of concept

As someone who rarely informs others of application vulnerabilities, I made an error before responsibly disclosing the issue. Initially, I wanted to test out what I had found (and didn’t believe it would honestly work), so I sent a handcrafted request to the Utterances API server which ended up working and immediately unveiling the vulnerability.

Frantically, realizing I had goofed, I sought to contact the author in an e-mail and apologize for my lack of tact:

Theo:

Hey! I recently found out about Utterances and was super excited to implement it into my own website as I work through a redesign, and then became curious as to how things worked on the backend to prevent things like people maliciously spamming GitHub issue creation using the API token that the API provides to the client.

Not to cause you too much alarm or anything, and perhaps you’re already aware of this, but the way the backend is currently setup allows anyone to take that token and create arbitrarily many GitHub issues on any configured repositories, proof of the vulnerability here: https://github.com/utterance/utterances/issues/380 (sorry for testing this out in a public place, in retrospect I realize this wasn’t very tactful and I didn’t think about it until after it was already done)

That said, I’m very passionate about the project, and if GitHub doesn’t have any plans to adopt Utterances directly into GitHub pages or anything that would make my work obsolete, I would love to help address the vulnerability!

After taking a few days to reply, the author indicated they did not believe this to be an issue:

Author:

Hi Theodore,

I don’t think this is a vulnerability. The API token generated by utterances is specific to the user. Any user can generate a much more permissive personal access token using the github user interface: https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token#creating-a-token

I began to doubt myself and whether what I had found really was a problem. Was my understanding of the backend flawed? Did I know anything? Was I just an overeager dumb dumb?

I decided I just hadn’t been clear enough in my communication:

Theo:

Sorry, let me try to describe some of what the flow of the backend seems like, and what potential issues could arise as a result (and I did have a misconception initially, I thought the token being passed back to the client was Utterances application token):

1. For the issue creation API endpoint, Utterances uses the access token provided to make a request to https://api.github.com/user, verifying that the token belongs to an authenticated user
   • Issue: Without any rate-limiting on this endpoint, a malicious user can spam this endpoint (either with a valid or invalid token), and consume the rate limit budget of the IP address, meaning that subsequent requests to determine whether a user is valid from the same IP address would fail, and so all issue creation from that IP address would fail for Utterance users.
2. [Bigger problem] For the issue creation API endpoint, Utterances uses its own token to create the issue once verifying the the request originated from an authenticated user
   • Issue: Without rate-limiting or validation, a malicious user with a valid token can spam this endpoint and consume the rate limit budget of the application, creating many issues that will be traceable to the Utterances bot (which could potentially get the application removed), as well as preventing the creation of issues through the bot for legitimate users (due to the rate limit being reached).

Of course there’s the possibility I’ve misunderstood the backend code, but hopefully this clarifies what I see as potential issues!

Through incredible verbosity I was successful. They lowered their guard:

Author:

1 and 2 are correct. Utterances relies on github’s rate limiting. It would not make sense to create issues with the user’s access token because the user would later be able to modify the title/body resulting in the issue becoming unlinked from the blog post.

… I then ruined my progress but suggesting a pretty poor fix that was:

1. Overcomplicated
2. Required more server-side processing and resources
3. Wrong

Needless to say I lost the authors faith, and have not yet heard back.

Onward and upward

I don’t blame the author for not responding. I can’t imagine it’s enjoyable maintaining an open-source project for free, let alone having random strangers come to you with more work they want you to do. It would have been cool to work on fixing the problem together, but everything can’t always work out the way you’d hoped.

But we persevere.

Ruminating on my failure a bit, I thought of more realistic ways to keep the same user-friendliness, while also avoiding having to deal with people who like to ruin things, and without spending more money.

The crux of the problem is that we want a way of automatically creating GitHub issues whenever we make a new blog post. For most people linking their blog posts to GitHub issues, they’re probably hosting their blog on GitHub. For those people hosting their blog on GitHub, they’re probably using Jekyll.

From this, we can assume that any of our blog posts will reside in a folder (probably _posts), and if we have access to all the text within those files we can copy that to the GitHub issue if we want to, and if we want to we can do all of it using…

GitHub Actions

Heard enough about these yet?

“GitHub Actions usage is free for public repositories and self-hosted runners” - GitHub

If you’re using GitHub issues for blogs, your GitHub repo is probably public anyways, so this route is free so long as you’re not creating more than one blog every few seconds or so. Within GitHub Actions, you even have access to a secret that contains an access token which you can use to create issues through the GitHub API.

I made this GitHub Action which, when given a configuration file .github/social.yml containing something like the following, will automatically create new issues for you as necessary:

api_version: v1/social # versioned configuration API

renderer: jekyll # this is the only format which is supported
                 # but perhaps one day there might be more
                                 
content: full # what type of content to display for the post 
              # 'full' will display entire blog post in the GitHub issue
              # there are currently no other modes

base_url: 'https://theo.lol' # used for resolving relative links

paths:       # list of Glob patterns which will 
  - _posts/* # match blog posts to create issues from

It imports Jekyll, renders any posts it has to, and then uses the rendered content to create issues as necessary.

After finishing the GitHub action I deployed my own version of the API which doesn’t bend over backwards to create issues for you, and set a fork of the Utterances client to point to it (which you can find and use here). It doesn’t contain any of the automatic issue creation code.

That’s it, that’s all there is to it.

Conclusion

I think I would get in trouble if I tried to name this application GitHub Social, but if anyone at Microsoft wants to make it a reality send me a message.

Let’s just call it Social instead for now.

You can start using it here.

You can also check out the code on GitHub:

1. The GitHub Action
2. Utterances API
3. Utterances

And see how everything works in the comments below.