Nuxt useSession — seal, tamper & wrong-secret playground

<div class="pg">
    <h1 class="pg-title">🎮 Seal, unseal, tamper: how <code>useSession</code> actually protects data</h1>
    <p class="pg-sub">
      A model of the mechanism — not a real Nuxt server. The point it proves is real:
      a sealed session cookie can only be <b>opened</b> with the secret that sealed it, and
      editing even one character makes it fail to open at all, instead of quietly forging new data.
    </p>
    <div class="banner info show">
      Modeled sealing — this page uses a tiny toy checksum to stand in for the real
      authenticated-encryption format (<code>iron</code>, via <code>h3</code>) that Nuxt's
      <code>useSession</code> actually uses. The lesson (tamper → rejected, wrong secret → rejected)
      is the same either way.
    </div>

<div class="panel-label" style="margin-top:16px"><span class="n">1</span> Pick what to try</div>
    <div class="seg" id="tabSeg">
      <button type="button" aria-pressed="true" data-val="roundtrip">Normal round trip</button>
      <button type="button" aria-pressed="false" data-val="tamper">Tamper with the cookie</button>
      <button type="button" aria-pressed="false" data-val="secret">Wrong secret</button>
    </div>

<div class="panel" id="tab-roundtrip">
      <div class="panel-label"><span class="n">2</span> Visit the page a few times</div>
      <p class="hint" style="margin-top:0">
        Each click simulates a brand-new, unrelated HTTP request — the server has no memory of the
        last one. The only thing that connects them is the cookie your "browser" sends back.
      </p>
      <div class="btn-row">
        <button class="btn primary" id="visitBtn">▶️ Send a request with this cookie</button>
        <button class="btn ghost" id="resetBtn">Reset (new visitor)</button>
      </div>
      <div class="output" style="margin-top:12px; display:flex; gap:24px; align-items:center; flex-wrap:wrap;">
        <div>
          <div class="panel-label" style="margin:0 0 4px"><span class="n">visits</span></div>
          <div class="visits-num" id="visitsNum">0</div>
        </div>
        <div style="flex:1; min-width:220px;">
          <div class="panel-label" style="margin:0 0 4px">cookie sent back to the browser</div>
          <div class="cookie-box" id="cookieBoxRT">(none yet — click "Send a request")</div>
        </div>
      </div>
      <div class="status" id="statusRT" style="margin-top:12px;">
        <span class="dot info"></span><span>No session cookie yet — the first request creates one.</span>
      </div>
    </div>

<div class="panel" id="tab-tamper" style="display:none;">
      <div class="panel-label"><span class="n">2</span> A sealed cookie from a real session</div>
      <p class="hint" style="margin-top:0">
        This cookie already says <code>{ "userId": "ada-01" }</code>. Flip one character in it — the way
        a curious visitor poking at devtools might — and resend it.
      </p>
      <div class="cookie-box" id="cookieBoxTamper"></div>
      <div class="btn-row" style="margin-top:12px;">
        <button class="btn bad" id="flipBtn">✏️ Flip a character in the cookie</button>
        <button class="btn primary" id="resendBtn">▶️ Resend this cookie to the server</button>
        <button class="btn ghost" id="resetTamperBtn">Reset</button>
      </div>
      <div class="output" style="margin-top:12px;">
        <div class="log" id="tamperLog">Flip a character, then resend, and compare to resending it untouched.</div>
      </div>
    </div>

<div class="panel" id="tab-secret" style="display:none;">
      <div class="panel-label"><span class="n">2</span> Two server instances, two secrets</div>
      <p class="hint" style="margin-top:0">
        This cookie was sealed by a server whose <code>NUXT_APP_SECRET</code> is <code>A</code>. Pick which
        server instance receives the next request — one shares the same secret, one doesn't (think: a
        second instance deployed without the env var set, or a secret rotated without warning).
      </p>
      <div class="cookie-box" id="cookieBoxSecret" style="margin-bottom:12px;"></div>
      <div class="row" style="gap:10px; align-items:flex-end; flex-wrap:wrap;">
        <div class="field">
          <span class="ctl-label">Receiving server's appSecret</span>
          <select class="pg-select" id="secretSelect">
            <option value="A" selected>Secret A (same server that sealed it)</option>
            <option value="B">Secret B (a different instance / rotated secret)</option>
          </select>
        </div>
        <button class="btn primary" id="secretRun">▶️ Unseal with this secret</button>
      </div>
      <div class="output" style="margin-top:12px;">
        <div class="log" id="secretLog">Pick a secret and try to unseal.</div>
      </div>
    </div>

<div class="hint" style="margin-top:14px;">
      In all three tabs: a failed unseal is treated as <b>no session</b>, never as "whatever the cookie
      says." That's the actual security property — tampering doesn't let you forge a different
      session, it just destroys the one you had.
    </div>
  </div>

preview

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

Nuxt useSession — seal, tamper &amp; wrong-secret playground

Nuxt useSession — seal, tamper & wrong-secret playground