mirror of
https://github.com/profullstack/logicsrc.git
synced 2026-10-05 14:15:33 +00:00
pwa: read vault values in the browser with a pasted identity key (#225)
* pwa: read vault values in the browser with a pasted identity key The web app listed vaults but could never show a value: decryption needs the member's X25519 secret key, which only lives in identity.json on the machine that ran `logicsrc login`. Each vault now has a page (/teams/:slug/vaults/:id, linked from the dashboard) listing its secret names. Paste the identity key (or the whole identity.json) and public/vault.js decrypts in the browser with the same libsodium calls as the CLI: crypto_box_seal_open for the grant, then crypto_secretbox_open_easy per value. Nothing is sent to the server. - The pasted key is checked against the public key the server has on file before use, so a key from another machine is named, not a generic failure. - Show / Copy per value, Download .env, Forget key. The key is kept in sessionStorage unless "remember on this device" is ticked. - A member with no identity yet can create one in the browser. That registers only the public half, and is offered only when no key is registered, since replacing one would orphan every grant sealed to it. - libsodium is served from node_modules at /vendor (no CDN), like simplewebauthn. - Vault pages are no-store and the service worker no longer caches no-store pages. - CLI: `logicsrc teams key` prints the secret key to stdout alone (pipe to pbcopy) and warns when the server holds a different public key. The page also gives a jq one-liner for CLIs released before this command. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * pwa: rename data-secret to data-key-name ThreatCrush read data-secret="…" as a hardcoded credential (2 high, both the attribute name, never a value). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * CLI 0.5.0 for teams key; install via install.sh, not npm @logicsrc/cli is not on npm; the CLI ships through curl -fsSL https://logicsrc.com/install.sh | sh, which builds master and reports the version from packages/cli/package.json. 0.5.0 marks the first build with teams key, and the vault page now says so and points older installs at the jq fallback. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
GitHub
parent
b75af67a43
commit
5bebc50beb
11 changed files with 586 additions and 9 deletions
101
apps/pwa/src/lib/vault-page.mjs
Normal file
101
apps/pwa/src/lib/vault-page.mjs
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
// One vault: its secret names (which the server can see) and, once the member
|
||||
// pastes their identity key, the values (which it cannot). Decryption happens
|
||||
// in public/vault.js with the same libsodium calls the CLI makes; the key is
|
||||
// checked against the public key the server holds before anything is opened,
|
||||
// and it is never sent anywhere.
|
||||
import { esc } from "./html.mjs";
|
||||
|
||||
const VAULT_SEP = "--";
|
||||
|
||||
/** `<project>--<env>` back into its parts, as the CLI's splitVaultName does. */
|
||||
export function splitVaultName(name) {
|
||||
const at = name.indexOf(VAULT_SEP);
|
||||
if (at <= 0) return null;
|
||||
const env = name.slice(at + VAULT_SEP.length);
|
||||
if (!env || env.includes(VAULT_SEP)) return null;
|
||||
return { project: name.slice(0, at), env };
|
||||
}
|
||||
|
||||
const when = (ms) => (ms ? new Date(Number(ms)).toISOString().slice(0, 16).replace("T", " ") : "—");
|
||||
|
||||
/** How to get the key onto the clipboard, for the machine that ran `logicsrc login`. */
|
||||
export const KEY_HELP = `<details class="key-help" style="margin-top:12px">
|
||||
<summary class="dim" style="cursor:pointer;font-size:.85rem">Where do I find my key?</summary>
|
||||
<div style="font-size:.85rem;margin-top:8px">
|
||||
<p class="dim" style="margin:0 0 8px">It is the identity secret key the <code>logicsrc</code> CLI created the first time you ran <code>logicsrc login</code>. It lives only on that machine, in <code>~/.config/logicsrc/identity.json</code>. On that machine, run:</p>
|
||||
<pre class="mono" style="margin:0 0 8px">logicsrc teams key</pre>
|
||||
<p class="dim" style="margin:0 0 8px">That needs CLI 0.5.0 or later (<code>curl -fsSL https://logicsrc.com/install.sh | sh -s -- update</code>). On an older CLI, either of these prints the same thing:</p>
|
||||
<pre class="mono" style="margin:0 0 8px">jq -r .keys.secretKey ~/.config/logicsrc/identity.json
|
||||
node -p 'require(require("os").homedir()+"/.config/logicsrc/identity.json").keys.secretKey'</pre>
|
||||
<p class="dim" style="margin:0">Pasting the whole <code>identity.json</code> works too; only <code>secretKey</code> is read. Installs from before the config move keep it at <code>~/.logicsrc/identity.json</code>. Anyone holding this key can read every vault you can, so treat it like a password.</p>
|
||||
</div>
|
||||
</details>`;
|
||||
|
||||
function keyCard({ publicKey, hasGrant, grantCommand }) {
|
||||
if (!publicKey) {
|
||||
// No identity registered yet: offer to make one here. Only in this state --
|
||||
// replacing a registered key would orphan every grant sealed to the old one.
|
||||
return `<div class="card" id="vault-key" style="margin-bottom:18px"><div class="card-head"><span class="h">Read the values</span></div>
|
||||
<div class="card-body">
|
||||
<p class="dim" style="margin-top:0;font-size:.88rem">You have no identity key yet, so no vault can be shared with you. Values are encrypted to a key only you hold. Make one in either place:</p>
|
||||
<ul class="dim" style="font-size:.88rem;padding-left:18px">
|
||||
<li>In a terminal: <code>curl -fsSL https://logicsrc.com/install.sh | sh</code>, then <code>logicsrc login</code>. Then <code>logicsrc teams key</code> prints the key to paste here.</li>
|
||||
<li>Or here in this browser:</li>
|
||||
</ul>
|
||||
<button class="btn acid" type="button" data-action="generate">Create a key in this browser</button>
|
||||
<div data-role="generated" hidden style="margin-top:12px">
|
||||
<div class="notice ok">Your identity key. Save it in your password manager <b>now</b>. It is shown once, and nobody, including us, can recover it:</div>
|
||||
<pre class="mono" data-role="generated-key" style="word-break:break-all;white-space:pre-wrap"></pre>
|
||||
<p class="dim" style="font-size:.85rem">Next, a teammate who can already read this vault runs <code>${esc(grantCommand)}</code>. Then reload this page.</p>
|
||||
</div>
|
||||
<p data-role="status" class="dim mono" style="font-size:.8rem;margin-bottom:0"></p>
|
||||
</div></div>`;
|
||||
}
|
||||
return `<div class="card" id="vault-key" style="margin-bottom:18px"><div class="card-head"><span class="h">Read the values</span><span class="pill" data-role="state">locked</span></div>
|
||||
<div class="card-body">
|
||||
${hasGrant ? "" : `<div class="notice err">You have not been granted this vault yet, so your key cannot open it. Ask a member who can to run <code>${esc(grantCommand)}</code>.</div>`}
|
||||
<form data-role="unlock" autocomplete="off">
|
||||
<label class="field"><span>Your identity key</span>
|
||||
<input type="password" name="key" placeholder="paste your secret key or identity.json" spellcheck="false" autocomplete="off" required></label>
|
||||
<label class="dim" style="display:flex;gap:8px;align-items:center;font-size:.85rem;margin:8px 0 12px"><input type="checkbox" name="remember" style="width:auto"> Remember on this device. Otherwise it is forgotten when this tab closes.</label>
|
||||
<button class="btn acid">Unlock</button>
|
||||
</form>
|
||||
<div data-role="unlocked" hidden><div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
|
||||
<span class="dim" style="font-size:.88rem;flex:1">Key loaded. Values were decrypted in this browser. Nothing was sent.</span>
|
||||
<button class="btn" type="button" data-action="download">Download .env</button>
|
||||
<button class="btn danger" type="button" data-action="forget">Forget key</button>
|
||||
</div></div>
|
||||
<p data-role="status" class="mono" style="font-size:.8rem;margin-bottom:0;color:var(--danger,#c23a3a)"></p>
|
||||
${KEY_HELP}
|
||||
</div></div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* The page body below the app bar. `secrets` are rows of credshare_secrets
|
||||
* (name, version, updated_at only — ciphertext is fetched by vault.js).
|
||||
*/
|
||||
export function vaultPageBody({ team, vault, secrets, hasGrant, publicKey, email }) {
|
||||
const parts = splitVaultName(vault.name);
|
||||
const grantCommand = `logicsrc teams grant ${team.slug} ${parts ? `${parts.project} ${parts.env}` : "<project> <env>"} ${email || "<your email>"}`;
|
||||
const rows = secrets.map((s) => `<tr data-key-name="${esc(s.name)}">
|
||||
<td><code>${esc(s.name)}</code></td>
|
||||
<td class="secret-value"><span class="faint mono">••••••••</span></td>
|
||||
<td class="faint">${Number(s.version) || 1}</td>
|
||||
<td class="faint mono" style="font-size:.78rem;white-space:nowrap">${esc(when(s.updated_at))}</td>
|
||||
</tr>`).join("");
|
||||
return `<main class="wrap" style="max-width:920px;padding-top:26px;padding-bottom:40px"
|
||||
data-vault-id="${esc(vault.id)}" data-vault-name="${esc(vault.name)}"
|
||||
data-public-key="${esc(publicKey || "")}" data-has-grant="${hasGrant ? "1" : "0"}">
|
||||
<p class="faint mono" style="font-size:.8rem;margin:0 0 6px"><a href="/dashboard">teams</a> / ${esc(team.slug)} / vaults</p>
|
||||
<div class="section-title"><h1 style="font-size:1.5rem"><code>${esc(vault.name)}</code></h1><span class="count">${secrets.length}</span></div>
|
||||
${keyCard({ publicKey, hasGrant, grantCommand })}
|
||||
<div class="card"><div class="card-body">
|
||||
${secrets.length
|
||||
? `<div class="table-scroll"><table><thead><tr><th>Name</th><th>Value</th><th>v</th><th>Updated (UTC)</th></tr></thead><tbody>${rows}</tbody></table></div>`
|
||||
: `<p class="faint mono" style="font-size:.82rem;margin:0">This vault is empty. Push to it from the CLI: <code>logicsrc teams push ${esc(team.slug)} ${parts ? `${esc(parts.project)} ${esc(parts.env)}` : "<project> <env>"}</code></p>`}
|
||||
</div></div>
|
||||
</main>
|
||||
<script src="/vendor/libsodium.js" defer></script>
|
||||
<script src="/vendor/libsodium-wrappers.js" defer></script>
|
||||
<script src="/vault.js" defer></script>`;
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
// Teams dashboard (/) + accept-invite (/teams/accept) + settings (/settings).
|
||||
// The browser holds no private key, so it never decrypts — it manages teams,
|
||||
// members, vaults (ciphertext metadata), invites, and CLI API keys.
|
||||
// Teams dashboard (/) + one vault (/teams/:slug/vaults/:id) + accept-invite
|
||||
// (/teams/accept) + settings (/settings). The server never decrypts. The vault
|
||||
// page can, in the browser, once the member pastes their identity key
|
||||
// (public/vault.js); everything else here is ciphertext metadata.
|
||||
import { Router } from "express";
|
||||
import { get, all, run } from "../db.mjs";
|
||||
import { id, sha256 } from "../lib/crypto.mjs";
|
||||
|
|
@ -9,6 +10,7 @@ import { requireAuth, csrfInput } from "../lib/session.mjs";
|
|||
import { createApiKey, listApiKeys, revokeApiKey } from "../lib/apikey.mjs";
|
||||
import { requestOrigin } from "../lib/origin.mjs";
|
||||
import { CLI_HINT } from "../lib/cli-hint.mjs";
|
||||
import { vaultPageBody } from "../lib/vault-page.mjs";
|
||||
import { config } from "../config.mjs";
|
||||
import {
|
||||
TeamMemberError,
|
||||
|
|
@ -49,7 +51,7 @@ async function teamCard(team, uid) {
|
|||
for (const v of vaults) {
|
||||
const count = await get(`SELECT COUNT(*) AS n FROM credshare_secrets WHERE vault_id = ?`, [v.id]);
|
||||
const mine = await get(`SELECT 1 FROM credshare_vault_grants WHERE vault_id = ? AND user_id = ?`, [v.id, uid]);
|
||||
vaultRows.push(`<tr><td><code>${esc(v.name)}</code></td><td>${Number(count?.n || 0)}</td><td>${mine ? "✓ you have access" : "— ask a member to grant you"}</td></tr>`);
|
||||
vaultRows.push(`<tr><td><a href="/teams/${esc(team.slug)}/vaults/${esc(v.id)}"><code>${esc(v.name)}</code></a></td><td>${Number(count?.n || 0)}</td><td>${mine ? "✓ you have access" : "— ask a member to grant you"}</td></tr>`);
|
||||
}
|
||||
|
||||
return `<div class="card" style="margin-bottom:22px">
|
||||
|
|
@ -107,6 +109,26 @@ export async function dashboardHandler(req, res) {
|
|||
|
||||
pagesRouter.get("/dashboard", requireAuth, dashboardHandler);
|
||||
|
||||
// ---- one vault: secret names, values decrypted in the browser ----
|
||||
pagesRouter.get("/teams/:slug/vaults/:vaultId", requireAuth, async (req, res, next) => {
|
||||
const ctx = await teamMemberContext(req);
|
||||
const vault = ctx && await get(`SELECT * FROM credshare_vaults WHERE id = ? AND team_id = ?`, [req.params.vaultId, ctx.team.id]);
|
||||
if (!vault) return next(); // 404, whether the vault is missing or not yours
|
||||
const secrets = await all(`SELECT name, version, updated_at FROM credshare_secrets WHERE vault_id = ? ORDER BY name`, [vault.id]);
|
||||
const grant = await get(`SELECT 1 FROM credshare_vault_grants WHERE vault_id = ? AND user_id = ?`, [vault.id, req.user.id]);
|
||||
const key = await get(`SELECT public_key FROM credshare_keys WHERE user_id = ?`, [req.user.id]);
|
||||
const body = `${appBar(req)}${vaultPageBody({
|
||||
team: ctx.team,
|
||||
vault,
|
||||
secrets,
|
||||
hasGrant: Boolean(grant),
|
||||
publicKey: key?.public_key || "",
|
||||
email: req.user.email
|
||||
})}${footer}`;
|
||||
res.set("Cache-Control", "no-store");
|
||||
res.type("html").send(page({ title: `LogicSRC ▸ ${vault.name}`, body }));
|
||||
});
|
||||
|
||||
// ---- team + invite form actions (session + CSRF) ----
|
||||
pagesRouter.post("/teams", requireAuth, async (req, res) => {
|
||||
const slug = String(req.body.slug || "").trim().toLowerCase();
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import express from "express";
|
||||
import cookieParser from "cookie-parser";
|
||||
import path from "node:path";
|
||||
import { createRequire } from "node:module";
|
||||
import { config } from "./config.mjs";
|
||||
import { migrate } from "./migrate.mjs";
|
||||
import { sessionMiddleware, csrfGuard } from "./lib/session.mjs";
|
||||
|
|
@ -26,6 +27,14 @@ app.use(express.static(path.join(config.root, "public"), { maxAge: "1h" }));
|
|||
// the @simplewebauthn/browser UMD bundle, served from node_modules (no CDN)
|
||||
app.get("/vendor/simplewebauthn-browser.umd.js", (_req, res) =>
|
||||
res.sendFile(path.join(config.root, "node_modules/@simplewebauthn/browser/dist/bundle/index.umd.min.js")));
|
||||
// libsodium for in-browser vault decryption (public/vault.js). Same two files
|
||||
// the CLI loads; resolved, not path-joined, so a hoisted workspace install works.
|
||||
// Load order on the page: libsodium.js (window.libsodium) then the wrappers (window.sodium).
|
||||
const requireHere = createRequire(import.meta.url);
|
||||
const sodiumWrappers = requireHere.resolve("libsodium-wrappers");
|
||||
const sodiumCore = createRequire(sodiumWrappers).resolve("libsodium");
|
||||
app.get("/vendor/libsodium.js", (_req, res) => res.sendFile(sodiumCore));
|
||||
app.get("/vendor/libsodium-wrappers.js", (_req, res) => res.sendFile(sodiumWrappers));
|
||||
|
||||
app.get("/healthz", (_req, res) => res.json({ ok: true, env: config.env }));
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue