Next.js unstable_cache cache-key leak — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Whose greeting do you get?</h1>
    <p class="pg-sub">
      A <b>model</b> of GHSA-mfr8-8qww-v76h — the real bug has nothing to click, it's a cache-key
      mismatch inside the framework. This re-implements the documented rules for what each caching
      API puts in its key, so you can see exactly why wrapping a <code>"use cache"</code> function in
      <code>unstable_cache()</code> let one locale's data answer a request for another.
    </p>

<div class="banner info show">
      Simulated model — plain JS re-implementing the documented key rules and the advisory's own
      description of the race. No real Next.js server, no real cache, no real race condition.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Two cache keys, side by side (reference)</div>
      <div class="key-compare">
        <div class="key-card">
          <b><code>"use cache"</code> function key</b>
          <ul>
            <li>build ID</li>
            <li>function ID (hash of location + signature)</li>
            <li>serializable arguments</li>
            <li>closed-over variables</li>
            <li><b>root params it actually reads</b> (e.g. <code>locale</code>)</li>
          </ul>
        </div>
        <div class="key-card">
          <b><code>unstable_cache()</code> call key</b>
          <ul>
            <li>function arguments</li>
            <li>stringified function source</li>
            <li>optional <code>keyParts[]</code></li>
            <li class="missing">nothing about root params — no mechanism to track them</li>
          </ul>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Pick a Next.js version</div>
      <div class="row">
        <label class="toggle">
          <input type="radio" name="ver" id="verPatched" checked /><span class="switch"></span>
          <span><code>16.4.5+</code> — patched, race closed</span>
        </label>
        <label class="toggle">
          <input type="radio" name="ver" id="verVuln" /><span class="switch"></span>
          <span><code>16.3.0–16.4.4</code> — vulnerable</span>
        </label>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Step 1 — direct render, per locale</div>
      <p class="pg-sub" style="margin-top:0">
        A page render calls <code>getGreeting()</code> directly. This always keys correctly on
        <code>locale</code> — direct calls were never the vulnerable path.
      </p>
      <div class="row">
        <div class="field">
          <span class="ctl-label">Render locale</span>
          <select class="sel" id="renderLocale">
            <option value="en">en</option>
            <option value="fr">fr</option>
            <option value="de">de</option>
          </select>
        </div>
        <button class="btn primary sm" id="renderBtn">Render page</button>
      </div>
      <div class="status" id="renderStatus"><span class="dot"></span> Render a locale to fill the "use cache" store.</div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> Step 2 — cold start: unstable_cache() arrives at the same instant</div>
      <p class="pg-sub" style="margin-top:0">
        Right after a process starts, this call races the in-flight direct render from Step 3 above.
        Render a locale first, then fire this <em>immediately</em> to simulate the race window.
      </p>
      <button class="btn primary sm" id="raceBtn">Fire unstable_cache() during cold start</button>
      <div class="status" id="raceStatus"><span class="dot"></span> Render a locale above, then fire this.</div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">5</span> Step 3 — a later request, different locale, via unstable_cache()</div>
      <p class="pg-sub" style="margin-top:0">Whatever is in the <code>unstable_cache()</code> store answers <em>every</em> locale, because its key never included one.</p>
      <div class="row">
        <div class="field">
          <span class="ctl-label">Request locale</span>
          <select class="sel" id="reqLocale">
            <option value="en">en</option>
            <option value="fr" selected>fr</option>
            <option value="de">de</option>
          </select>
        </div>
        <button class="btn ghost sm" id="reqBtn">Request via unstable_cache()</button>
        <button class="btn ghost sm" id="resetBtn">Reset everything</button>
      </div>
      <div class="status" id="reqStatus"><span class="dot"></span> Nothing requested yet.</div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">6</span> What's actually in each store</div>
      <div class="store-view">
        <div class="store-box">
          <b>"use cache" store (keyed by function + locale)</b>
          <div id="useCacheStoreView">— empty —</div>
        </div>
        <div class="store-box">
          <b>unstable_cache() store (keyed by function only)</b>
          <div id="unstableStoreView">— empty —</div>
        </div>
      </div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.