-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
229 lines (210 loc) · 17.3 KB
/
about.html
File metadata and controls
229 lines (210 loc) · 17.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SLS94VX99N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SLS94VX99N');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About ZeroKey | Zero-Knowledge Architecture</title>
<meta name="description" content="Discover how ZeroKey's client-side AES-GCM encryption and zero-knowledge architecture securely deliver your sensitive payloads without leaving a trace.">
<meta name="keywords" content="ZeroKey architecture, zero-knowledge proof, client-side encryption, AES-GCM, secure payload, privacy mission, Web Crypto API">
<meta name="author" content="Dippan Bhusal">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:url" content="https://zerokey.vercel.app/about">
<meta property="og:title" content="About ZeroKey | Technical Architecture">
<meta property="og:description" content="Discover how ZeroKey's client-side AES-GCM encryption securely delivers your sensitive payloads.">
<meta property="og:image" content="https://zerokey.vercel.app/assets/og/about.png">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="About ZeroKey | Technical Architecture">
<meta property="twitter:description" content="Discover how ZeroKey's client-side AES-GCM encryption securely delivers your sensitive payloads.">
<meta property="twitter:image" content="https://zerokey.vercel.app/assets/og/about.png">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "AboutPage",
"name": "About ZeroKey",
"description": "Technical architecture and mission statement of the ZeroKey zero-knowledge payload delivery system.",
"url": "https://zerokey.vercel.app/about",
"publisher": {
"@type": "Organization",
"name": "ZeroKey",
"founder": {
"@type": "Person",
"name": "Dippan Bhusal",
"url": "https://github.com/kdippan"
}
}
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<link rel="stylesheet" href="/style.css">
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="64x64" href="/assets/favicon-64x64.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="128x128" href="/assets/favicon-128x128.png">
<link rel="apple-touch-icon" sizes="57x57" href="/assets/favicon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/assets/favicon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/favicon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/assets/favicon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/favicon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/favicon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/favicon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/favicon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="256x256" href="/assets/favicon-256x256.png">
<link rel="icon" type="image/png" sizes="384x384" href="/assets/favicon-384x384.png">
<link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon-512x512.png">
<link rel="manifest" href="/assets/site.webmanifest">
<meta name="msapplication-TileColor" content="#0f172a">
<meta name="msapplication-TileImage" content="/assets/favicon-144x144.png">
</head>
<body class="bg-[#0f172a] text-slate-300 min-h-screen font-sans overflow-x-hidden relative selection:bg-blue-500/30 selection:text-blue-200 flex flex-col">
<div class="fixed top-0 left-1/4 w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[150px] pointer-events-none z-0"></div>
<div class="fixed bottom-0 right-1/4 w-[500px] h-[500px] bg-emerald-600/10 rounded-full blur-[150px] pointer-events-none z-0"></div>
<nav class="relative z-10 border-b border-slate-800/50 bg-[#0f172a]/80 backdrop-blur-md sticky top-0">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<div class="flex items-center gap-2 text-slate-100 font-bold text-2xl tracking-tight">
<i class="ph ph-fingerprint text-blue-500"></i> ZeroKey
</div>
<div class="hidden md:flex gap-6 text-sm font-medium text-slate-400">
<a href="/" class="hover:text-white transition-colors">Home</a>
<a href="/privacy" class="hover:text-white transition-colors">Privacy</a>
<a href="/contact" class="hover:text-white transition-colors">Contact</a>
<a href="/donate" class="hover:text-red-400 transition-colors flex items-center gap-1"><i class="ph-fill ph-heart text-red-500"></i> Support</a>
</div>
<a href="/encrypt" class="bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold px-5 py-2 rounded-lg transition-all shadow-[0_0_15px_rgba(37,99,235,0.3)] hover:shadow-[0_0_25px_rgba(37,99,235,0.5)]">
Launch Vault
</a>
</div>
</nav>
<main class="relative z-10 flex-grow py-12 px-4 sm:px-6 lg:px-8">
<article class="max-w-4xl mx-auto glass-panel p-6 md:p-12 rounded-2xl shadow-2xl border border-slate-700/50 bg-slate-900/60 backdrop-blur-md">
<header class="mb-10 border-b border-slate-800 pb-8">
<h1 class="text-3xl md:text-5xl font-extrabold text-white mb-6 flex items-center gap-3 tracking-tight">
<i class="ph ph-shield-check text-emerald-400"></i> ZeroKey Architecture
</h1>
<p class="text-slate-400 leading-relaxed text-lg">
ZeroKey is a paranoid-grade, zero-knowledge payload delivery system designed for ethical hackers, journalists, and privacy advocates. It guarantees that sensitive information is transmitted across the internet without leaving a digital paper trail or falling victim to middle-man interceptions. Here is the full technical breakdown of our security pipeline.
</p>
</header>
<div class="space-y-12">
<section>
<h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-2 border-b border-slate-800 pb-3">
<i class="ph ph-cpu text-blue-400 text-3xl"></i> 1. The Cryptographic Engine
</h2>
<p class="leading-relaxed text-slate-300 mb-4">
ZeroKey does not trust the server. All encryption happens completely locally inside your browser's memory using the native <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:underline">Web Crypto API</a> before a single byte of data is transmitted over the network.
</p>
<ul class="space-y-4 text-slate-400">
<li class="flex items-start gap-3 bg-slate-950/40 p-4 rounded-xl border border-slate-800/50">
<i class="ph ph-key text-emerald-400 text-xl mt-0.5"></i>
<div><strong class="text-slate-200">Key Derivation (PBKDF2):</strong> If a PIN is provided, it is combined with a cryptographically secure random 16-byte salt and hashed 100,000 times using the SHA-256 algorithm. This intentional computational delay thwarts brute-force attacks.</div>
</li>
<li class="flex items-start gap-3 bg-slate-950/40 p-4 rounded-xl border border-slate-800/50">
<i class="ph ph-lock-key text-emerald-400 text-xl mt-0.5"></i>
<div><strong class="text-slate-200">Encryption Standard (AES-256-GCM):</strong> Your text and converted media buffers are encrypted using the Advanced Encryption Standard with a 256-bit key. We specifically use Galois/Counter Mode (GCM) because it provides <em>Authenticated Encryption</em>. If an attacker alters even a single bit of the encrypted blob in transit, the decryption will automatically fail.</div>
</li>
</ul>
</section>
<section>
<h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-2 border-b border-slate-800 pb-3">
<i class="ph ph-database text-blue-400 text-3xl"></i> 2. Distributed Cloud Storage
</h2>
<p class="leading-relaxed text-slate-300 mb-4">
Once the data is scrambled into high-entropy, unreadable ciphertext, it is transmitted via TLS 1.3 to our backend infrastructure powered by <a href="https://supabase.com/" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:underline">Supabase</a>. We separate the text and media to optimize performance and security:
</p>
<ul class="space-y-4 text-slate-400">
<li class="flex items-start gap-3 bg-slate-950/40 p-4 rounded-xl border border-slate-800/50">
<i class="ph ph-table text-blue-400 text-xl mt-0.5"></i>
<div><strong class="text-slate-200">Text & Metadata (PostgreSQL):</strong> The Base64 encrypted text string, the Initialization Vector (IV), and the salt are stored in a strict row-level-secured PostgreSQL database.</div>
</li>
<li class="flex items-start gap-3 bg-slate-950/40 p-4 rounded-xl border border-slate-800/50">
<i class="ph ph-hard-drives text-blue-400 text-xl mt-0.5"></i>
<div><strong class="text-slate-200">Media Blobs (Object Storage):</strong> Images and files (up to 2MB) are uploaded to a locked Storage Bucket. The database only holds a reference path to this bucket. Because the file was encrypted on the client side, the server only sees a meaningless <code>application/octet-stream</code> blob.</div>
</li>
</ul>
</section>
<section>
<h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-2 border-b border-slate-800 pb-3">
<i class="ph ph-link-break text-blue-400 text-3xl"></i> 3. The URL Hash Exploit
</h2>
<p class="leading-relaxed text-slate-300 mb-4">
The biggest challenge in end-to-end encryption is sharing the key. ZeroKey uses a standard web architecture feature to achieve this securely. A generated link looks like this:
</p>
<div class="my-6 p-5 bg-slate-950/80 rounded-xl border border-slate-700 font-mono text-sm text-slate-300 break-all shadow-inner">
https://zerokey.vercel.app/view?id=uuid-string&salt=base64<span class="text-emerald-400 font-bold">#SECRET_KEY_DATA</span>
</div>
<p class="leading-relaxed text-slate-400">
The <strong>Fragment Identifier</strong> (anything following the <code class="text-emerald-400 font-bold">#</code>) is designed to jump to sections on a webpage. Because of this, standard web browsers <em>never transmit the fragment to the server</em>. The decryption key effectively hitches a ride on the URL but drops off before the HTTP request hits our backend, ensuring a true Zero-Knowledge pipeline.
</p>
</section>
<section>
<h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-2 border-b border-slate-800 pb-3">
<i class="ph ph-scan text-blue-400 text-3xl"></i> 4. Bot-Shields & Geofencing
</h2>
<p class="leading-relaxed text-slate-300 mb-4">
Before decryption can even be attempted, the recipient must pass localized security checkpoints:
</p>
<ul class="space-y-4 text-slate-400">
<li class="flex items-start gap-3 bg-slate-950/40 p-4 rounded-xl border border-slate-800/50">
<i class="ph ph-robot-slash text-emerald-400 text-xl mt-0.5"></i>
<div><strong class="text-slate-200">Anti-Bot WebAuthn:</strong> Social media apps (like WhatsApp or Slack) automatically scan links to generate previews. To prevent these bots from triggering the "burn" sequence, ZeroKey requires physical human interaction and invokes the device's native WebAuthn (FaceID/Fingerprint) hardware.</div>
</li>
<li class="flex items-start gap-3 bg-slate-950/40 p-4 rounded-xl border border-slate-800/50">
<i class="ph ph-map-pin text-emerald-400 text-xl mt-0.5"></i>
<div><strong class="text-slate-200">GPS Radius Locking:</strong> If enabled, the sender's coordinates are encrypted within the payload. The recipient's browser calculates the Haversine distance locally. If the recipient is outside the 50-meter radius, the payload immediately self-destructs without decrypting.</div>
</li>
</ul>
</section>
<section>
<h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-2 border-b border-slate-800 pb-3">
<i class="ph ph-fire text-red-400 text-3xl"></i> 5. Volatile Memory & Destruction
</h2>
<p class="leading-relaxed text-slate-400 mb-4">
ZeroKey is designed to exist strictly in volatile memory (RAM). When media is decrypted, we use <code>URL.createObjectURL()</code> to render the image directly from RAM, ensuring it is never cached or written to the device's physical hard drive.
</p>
<div class="bg-red-500/10 border border-red-500/20 p-5 rounded-xl">
<p class="leading-relaxed text-red-200">
The exact millisecond the data is successfully fetched, the API executes a permanent <code class="text-red-400 font-mono font-bold bg-red-950/50 px-1 rounded">DELETE</code> command on the PostgreSQL row and a <code class="text-red-400 font-mono font-bold bg-red-950/50 px-1 rounded">REMOVE</code> command on the Storage bucket. After 30 seconds, the local ObjectURL is revoked, and the browser's garbage collector wipes the payload from local memory. <strong>It is gone forever.</strong>
</p>
</div>
</section>
</div>
</article>
</main>
<footer class="border-t border-slate-800/50 bg-[#0f172a] relative z-10 pt-12 pb-8 mt-auto">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-6 mb-8">
<div class="flex items-center gap-2 text-slate-100 font-bold text-xl tracking-tight">
<i class="ph ph-fingerprint text-slate-500"></i> ZeroKey
</div>
<div class="flex flex-wrap justify-center gap-6 text-sm font-medium text-slate-500">
<a href="/privacy" class="hover:text-blue-400 transition-colors">Privacy Policy</a>
<a href="/terms" class="hover:text-blue-400 transition-colors">Terms & Conditions</a>
<a href="/disclaimer" class="hover:text-blue-400 transition-colors">Disclaimer</a>
<a href="/cookie-policy" class="hover:text-blue-400 transition-colors">Cookie Policy</a>
<a href="/contact" class="hover:text-blue-400 transition-colors">Contact</a>
<a href="/donate" class="hover:text-red-400 transition-colors text-red-500/70">Donate</a>
</div>
</div>
<div class="flex flex-col md:flex-row justify-between items-center text-xs text-slate-600 border-t border-slate-800/50 pt-6">
<p>© 2026 ZeroKey. All rights reserved.</p>
<p class="mt-2 md:mt-0">Built for digital privacy by <a href="https://github.com/kdippan" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:text-blue-300 font-semibold transition-colors">Dippan Bhusal</a>.</p>
</div>
</div>
</footer>
</body>
</html>