// A small working web app inside a Mac frame. Used on Solutions to show the software side, one sample per sector. // The crypto here is the browser's AES-256-GCM, labelled as a stand in for QDI's Kyber1024 and stacked ciphers. const RM = React; const MAC_SAMPLES = { infra: { to: 'Control room', app: 'Grid link', text: 'Substation 14 telemetry: breaker closed, load steady at 62 percent. No action needed.' }, health: { to: 'Referral desk', app: 'Care link', text: 'Referral for patient 0042: cardiology outpatient review within two weeks. Results attached.' }, finance: { to: 'Treasury operations', app: 'Settlement link', text: 'Settlement batch 7731 approved by two signatories. Release at 16:00.' }, defence: { to: 'Command post', app: 'Field link', text: 'Position report 0600: route clear, supplies adequate. Requesting a resupply window.' }, gov: { to: 'Policy office', app: 'Briefing link', text: 'Draft briefing, OFFICIAL SENSITIVE: summary of the departmental review for ministers.' }, intel: { to: 'Analysis cell', app: 'Source link', text: 'Source report filed. Retention requirement: fifty years. Distribution: named readers only.' }, }; const hex = (u8) => Array.from(u8).map((b) => b.toString(16).padStart(2, '0')).join(''); // Real AES-GCM when the browser allows it (secure pages). Otherwise a clearly simulated cipher so the demo still works. const macCrypto = (() => { const subtle = window.crypto && window.crypto.subtle; let keyP = null; const getKey = () => keyP || (keyP = subtle.generateKey({ name: 'AES-GCM', length: 256 }, false, ['encrypt', 'decrypt'])); const fakeKey = Array.from({ length: 32 }, () => Math.floor(Math.random() * 256)); const stream = (n, iv) => { let s = 2166136261; fakeKey.concat(Array.from(iv)).forEach((b) => { s = Math.imul(s ^ b, 16777619) >>> 0; }); const o = new Uint8Array(n); for (let i = 0; i < n; i++) { s ^= s << 13; s >>>= 0; s ^= s >>> 17; s ^= s << 5; s >>>= 0; o[i] = s & 255; } return o; }; const tag = (u8) => { let h = 5381; for (let i = 0; i < u8.length; i++) h = (Math.imul(h, 33) ^ u8[i]) >>> 0; return h; }; return { real: !!subtle, async encrypt(text) { const iv = window.crypto.getRandomValues(new Uint8Array(12)); const pt = new TextEncoder().encode(text); if (subtle) { const ct = new Uint8Array(await subtle.encrypt({ name: 'AES-GCM', iv }, await getKey(), pt)); return { iv, ct }; } const ks = stream(pt.length, iv), body = pt.map((b, i) => b ^ ks[i]), t = tag(body); const ct = new Uint8Array(body.length + 4); ct.set(body); ct.set([t >>> 24, (t >>> 16) & 255, (t >>> 8) & 255, t & 255], body.length); return { iv, ct }; }, async decrypt(iv, ct) { if (subtle) return new TextDecoder().decode(await subtle.decrypt({ name: 'AES-GCM', iv }, await getKey(), ct)); const body = ct.slice(0, ct.length - 4), t = tag(body), want = ((ct[ct.length - 4] << 24) | (ct[ct.length - 3] << 16) | (ct[ct.length - 2] << 8) | ct[ct.length - 1]) >>> 0; if (t !== want) throw new Error('tag'); const ks = stream(body.length, iv); return new TextDecoder().decode(body.map((b, i) => b ^ ks[i])); }, }; })(); const CIPHERS = ['Serpent', 'Twofish', 'ChaCha20', 'ChaChaPoly1305']; const fp = () => Array.from(crypto.getRandomValues(new Uint8Array(8))).map((b) => b.toString(16).padStart(2, '0')).join(':').toUpperCase(); const clock = () => new Date().toTimeString().slice(0, 8); function MacDemo({ sector }) { const sample = MAC_SAMPLES[sector] || MAC_SAMPLES.infra; const [tab, setTab] = RM.useState('msg'); const [text, setText] = RM.useState(sample.text); const [sent, setSent] = RM.useState(null); // { iv, ct, tampered } const [out, setOut] = RM.useState(null); // { ok, text } const [busy, setBusy] = RM.useState(false); const [log, setLog] = RM.useState([{ t: clock(), k: 'info', m: 'Session started. Key loaded from the QDI key.' }]); const [fprint, setFprint] = RM.useState(() => fp()); const [rot, setRot] = RM.useState(0); const [on, setOn] = RM.useState([true, true, true, false]); const add = (k, m) => setLog((l) => [{ t: clock(), k, m }, ...l].slice(0, 40)); RM.useEffect(() => { setText(sample.text); setSent(null); setOut(null); add('info', 'Switched to ' + sample.app + '.'); }, [sector]); const stepNow = out ? 4 : sent ? 3 : 1; const steps = ['Write', 'Encrypt', 'Intercept', 'Decrypt']; const done = sent ? (out ? 4 : 3) : 0; const stack = CIPHERS.filter((c, i) => on[i]); const send = async () => { if (busy || !text.trim()) return; setBusy(true); setOut(null); try { const r = await macCrypto.encrypt(text); setSent({ iv: r.iv, ct: r.ct, tampered: false }); add('ok', 'Encrypted ' + text.length + ' characters for ' + sample.to + ' (' + (stack.length) + ' cipher layer' + (stack.length === 1 ? '' : 's') + ').'); } catch (e) { setSent(null); } setBusy(false); }; const tamper = () => { if (!sent || sent.tampered) return; const ct = sent.ct.slice(); ct[0] ^= 1; setSent({ iv: sent.iv, ct, tampered: true }); setOut(null); add('warn', 'One bit changed in transit.'); }; const open = async () => { if (!sent || busy) return; setBusy(true); try { const t = await macCrypto.decrypt(sent.iv, sent.ct); setOut({ ok: true, text: t }); add('ok', 'Opened at ' + sample.to + '. Integrity check passed.'); } catch (e) { setOut({ ok: false }); add('bad', 'Rejected at ' + sample.to + '. Message was altered.'); } setBusy(false); }; const reset = () => { setText(sample.text); setSent(null); setOut(null); }; const rotate = () => { setFprint(fp()); setRot((n) => n + 1); setSent(null); setOut(null); add('info', 'New session key exchanged (Kyber1024).'); }; const toggle = (i) => setOn((a) => { const n = a.slice(); if (n[i] && n.filter(Boolean).length === 1) return a; n[i] = !n[i]; return n; }); const TABS = [ { id: 'msg', label: 'Messages', ic: 'M4 5h16v11H8l-4 4V5z' }, { id: 'keys', label: 'Keys', ic: 'M14 10a4 4 0 11-3.9-4A4 4 0 0114 10zm-3.5 3.5L4 20h3v-2h2v-2h2.2' }, { id: 'log', label: 'Audit log', ic: 'M6 4h12v16H6zM9 9h6M9 13h6M9 17h4' }, ]; return (
QDI {sample.app} Sample data
{tab === 'msg' && ( <>
New message
    {steps.map((s, i) =>
  1. {i + 1}{s}
    2. )}

Your message

To{sample.to}{stack.length} layer{stack.length === 1 ? '' : 's'}