-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathverify.html
More file actions
262 lines (232 loc) · 14.1 KB
/
verify.html
File metadata and controls
262 lines (232 loc) · 14.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Receipt Verifier | Headless Oracle</title>
<meta name="description" content="Verify Ed25519-signed market-status receipts from Headless Oracle. Paste a receipt JSON and verify the cryptographic signature against the live public key.">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:url" content="https://headlessoracle.com/verify">
<meta property="og:title" content="Receipt Verifier | Headless Oracle">
<meta property="og:description" content="Verify Ed25519-signed market-status receipts. Cryptographic proof of market state for autonomous agents.">
<meta property="og:image" content="https://headlessoracle.com/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Receipt Verifier | Headless Oracle">
<meta name="twitter:description" content="Verify Ed25519-signed market-status receipts. Cryptographic proof in your browser.">
<meta name="twitter:image" content="https://headlessoracle.com/og-image.png">
<link rel="canonical" href="https://headlessoracle.com/verify">
<link rel="alternate" type="application/json" href="/openapi.json" title="OpenAPI 3.1 specification">
<link rel="alternate" type="text/plain" href="/llms.txt" title="llms.txt — machine-readable API summary">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; background-color: #0f172a; }
.glass {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="bg-slate-900 text-slate-300 min-h-screen flex flex-col">
<nav class="w-full max-w-6xl mx-auto p-6 flex justify-between items-center border-b border-slate-800/50">
<div class="flex items-center gap-2">
<span class="text-xl font-bold tracking-wider text-white">HEADLESS<span class="text-blue-500">ORACLE</span></span>
</div>
<div class="flex gap-6 text-sm font-medium">
<a href="/docs" class="hover:text-white transition">Docs</a>
<a href="/status" class="hover:text-white transition">Status</a>
<a href="/pricing" class="hover:text-white transition">Pricing</a>
<a href="/standards" class="hover:text-white transition">Standards</a>
<a href="/blog" class="hover:text-white transition">Blog</a>
<a href="https://github.com/LembaGang" class="hover:text-white transition" target="_blank" rel="noopener">GitHub</a>
</div>
</nav>
<main class="flex-grow flex flex-col items-center justify-center p-4">
<div class="max-w-3xl w-full">
<h1 class="text-3xl font-bold text-white mb-2 text-center">Verify Liability Receipt</h1>
<p class="text-center text-slate-500 mb-8">
Paste a JSON receipt below to independently verify its Ed25519 signature using the Web Crypto API.
<br>This happens entirely in your browser. No data is sent to our servers.
</p>
<div id="browser-warning" class="hidden mb-6 p-4 rounded-lg border border-yellow-500 bg-yellow-900/20 text-yellow-200 text-sm text-center">
⚠️ <strong>Browser Incompatible:</strong> Your browser doesn't support Ed25519. Please use Chrome 113+, Firefox 128+, or the latest Safari.
</div>
<div class="glass rounded-xl p-6 mb-6">
<div class="flex justify-between items-center mb-2">
<label class="block text-sm font-bold text-white">Liability Receipt (JSON)</label>
<button id="fetch-demo-btn" class="text-xs bg-slate-700 hover:bg-slate-600 text-blue-400 px-3 py-1 rounded-md transition font-medium">
Fetch & Verify Live Receipt
</button>
</div>
<textarea id="receipt-input" rows="8"
class="w-full bg-slate-800 border border-slate-700 rounded-lg p-4 font-mono text-xs text-slate-300 focus:ring-2 focus:ring-blue-500 outline-none"
placeholder='{ "receipt_id": "...", "signature": "..." }'></textarea>
</div>
<div class="glass rounded-xl p-6 mb-8">
<label class="block text-sm font-bold text-white mb-2">Oracle Public Key (PEM Format)</label>
<textarea id="public-key-input" rows="3"
class="w-full bg-slate-800 border border-slate-700 rounded-lg p-4 font-mono text-xs text-slate-400 focus:ring-2 focus:ring-blue-500 outline-none"
placeholder="-----BEGIN PUBLIC KEY-----
MCowBQYDK2VwAyEAA9wnmToskIVs3rReIorAZfGPafCTPJF7IzbB51cS8Xg=
-----END PUBLIC KEY-----"></textarea>
<p class="text-xs text-slate-600 mt-2">
Normally fetched automatically from the <a href="ed25519-public-key.txt" target="_blank" class="underline text-blue-500">Public Registry</a>.
</p>
</div>
<button id="verify-btn" class="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold py-4 rounded-lg transition mb-8 shadow-lg shadow-blue-900/20">
Verify Signature
</button>
<div id="result-area" class="hidden rounded-xl p-6 border text-center transition-all">
<div id="result-icon" class="text-6xl mb-4"></div>
<h2 id="result-title" class="text-2xl font-bold mb-2"></h2>
<p id="result-desc" class="text-sm"></p>
</div>
</div>
</main>
<footer class="p-8 text-center text-slate-600 text-xs border-t border-slate-800">
<div class="flex flex-wrap justify-center gap-6 mb-3">
<a href="/" class="hover:text-white transition">Home</a>
<a href="/docs" class="hover:text-white transition">Docs</a>
<a href="/pricing" class="hover:text-white transition">Pricing</a>
<a href="/standards" class="hover:text-white transition">Standards</a>
<a href="/blog" class="hover:text-white transition">Blog</a>
<a href="/llms.txt" class="hover:text-white transition">llms.txt</a>
<a href="/terms" class="hover:text-white transition">Terms</a>
<a href="/privacy" class="hover:text-white transition">Privacy</a>
<a href="https://github.com/LembaGang" class="hover:text-white transition" target="_blank" rel="noopener">GitHub</a>
<a href="mailto:mike@headlessoracle.com" class="hover:text-white transition">mike@headlessoracle.com</a>
</div>
© 2026 Headless Oracle. Verification runs locally via <a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto" class="underline">window.crypto.subtle</a>.
</footer>
<script>
const ORACLE_API = "https://headlessoracle.com";
// Hardcoded fallback — always available even if API is down
const FALLBACK_PUBLIC_KEY = "03dc27993a2c90856cdeb45e228ac065f18f69f0933c917b2336c1e75712f178";
// Auto-fetch public key + check browser capability
window.addEventListener('DOMContentLoaded', async () => {
// 1. Set the fallback key immediately so the field is never empty
const keyInput = document.getElementById('public-key-input');
keyInput.value = FALLBACK_PUBLIC_KEY;
// 2. Try to fetch the live key from the API (overwrites fallback if successful)
try {
const res = await fetch(ORACLE_API + "/v5/keys");
if (res.ok) {
const data = await res.json();
if (data.keys && data.keys.length > 0 && data.keys[0].public_key) {
keyInput.value = data.keys[0].public_key;
}
}
} catch (e) {
// Fallback already set — no action needed
console.log("Using fallback public key (API unreachable):", e.message);
}
// 3. Check Ed25519 browser support
try {
await window.crypto.subtle.importKey(
"raw",
new Uint8Array(32),
{ name: "Ed25519" },
false,
["verify"]
);
} catch (e) {
document.getElementById('browser-warning').classList.remove('hidden');
}
});
async function verifySignature() {
const receiptText = document.getElementById('receipt-input').value.trim();
const publicKeyPem = document.getElementById('public-key-input').value.trim();
const resultArea = document.getElementById('result-area');
const resultTitle = document.getElementById('result-title');
const resultDesc = document.getElementById('result-desc');
const resultIcon = document.getElementById('result-icon');
// Reset UI
resultArea.className = "hidden rounded-xl p-6 border text-center transition-all";
try {
if (!receiptText || !publicKeyPem) throw new Error("Please fill in both fields.");
const receipt = JSON.parse(receiptText);
// V5 AUDIT: Separate the signature from the signed data (payload)
const { signature, ...data } = receipt;
if (!signature) throw new Error("Receipt is missing 'signature' field.");
// V5 CANONICALIZATION: Keys sorted alphabetically, no whitespace.
// Matches signPayload() in the worker. Works for all receipt types
// (market, override, health) without hardcoding field lists.
const sorted = {};
for (const key of Object.keys(data).sort()) {
sorted[key] = data[key];
}
const message = JSON.stringify(sorted);
const msgBuffer = new TextEncoder().encode(message);
// IMPORT PUBLIC KEY — handles hex (from API) or PEM/SPKI (legacy)
let cryptoKey;
const trimmedKey = publicKeyPem.trim();
if (/^[0-9a-fA-F]{64}$/.test(trimmedKey)) {
// Raw 32-byte hex key (current API format: format = "hex")
const keyBytes = new Uint8Array(trimmedKey.match(/.{1,2}/g).map(b => parseInt(b, 16)));
cryptoKey = await window.crypto.subtle.importKey(
"raw", keyBytes, { name: "Ed25519" }, true, ["verify"]
);
} else {
// PEM/SPKI format (legacy fallback)
const pemHeader = "-----BEGIN PUBLIC KEY-----";
const pemFooter = "-----END PUBLIC KEY-----";
const pemContents = trimmedKey.replace(pemHeader, "").replace(pemFooter, "").replace(/\s/g, "");
const binaryKey = Uint8Array.from(atob(pemContents), c => c.charCodeAt(0));
const format = binaryKey.length > 32 ? "spki" : "raw";
cryptoKey = await window.crypto.subtle.importKey(
format, binaryKey, { name: "Ed25519" }, true, ["verify"]
);
}
// CONVERT HEX SIGNATURE TO BYTES
const signatureBytes = new Uint8Array(signature.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
// CRYPTOGRAPHIC VERIFICATION
const isValid = await window.crypto.subtle.verify("Ed25519", cryptoKey, signatureBytes, msgBuffer);
// UPDATE UI WITH RESULTS
resultArea.classList.remove('hidden');
if (isValid) {
resultArea.className = "rounded-xl p-6 border border-green-500 bg-green-900/20 text-green-200";
resultIcon.innerHTML = "✅";
resultTitle.innerText = "Signature Valid";
resultDesc.innerText = `Successfully verified against Key: ${receipt.public_key_id}`;
} else {
throw new Error("Signature Mismatch — The data may have been tampered with.");
}
} catch (err) {
resultArea.classList.remove('hidden');
resultArea.className = "rounded-xl p-6 border border-red-500 bg-red-900/20 text-red-200";
resultIcon.innerHTML = "❌";
resultTitle.innerText = "Verification Failed";
resultDesc.innerText = err.message;
}
}
document.getElementById('verify-btn').addEventListener('click', verifySignature);
// Fetch live demo receipt — then auto-verify
document.getElementById('fetch-demo-btn').addEventListener('click', async () => {
const btn = document.getElementById('fetch-demo-btn');
btn.textContent = 'Fetching...';
btn.disabled = true;
try {
// Ensure public key is populated
const keyInput = document.getElementById('public-key-input');
if (!keyInput.value.trim()) {
keyInput.value = FALLBACK_PUBLIC_KEY;
}
const res = await fetch(ORACLE_API + "/v5/demo");
const data = await res.json();
document.getElementById('receipt-input').value = JSON.stringify(data, null, 2);
// Auto-verify after a brief pause so the user sees both fields fill
setTimeout(() => verifySignature(), 300);
} catch (e) {
document.getElementById('receipt-input').value = '{"error": "Could not fetch receipt: ' + e.message + '"}';
} finally {
btn.textContent = 'Fetch & Verify Live Receipt';
btn.disabled = false;
}
});
</script>
<script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
<script src="/js/paddle-init.js"></script>
</body>
</html>