silentsilas/sure
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

add link at bottom of page to import/export keys, add copy to clipboard buttons, adjust the How It Works section, add FAQ section

Browse Source
This commit is contained in:
Silas
2024-02-01 16:37:18 -05:00
parent 141788714b
commit d2d91e6ab3
7 changed files with 263 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
index.html
View File

@@ -41,17 +41,17 @@
<meta name="msapplication-starturl" content="/" />
</head>
<body style="opacity: 0; background-color: #11191f;">
<body style="opacity: 0;">
<header class="container">
<hgroup>
<h1>
SURE
</h1>
<p>
<span style="color: #44a616;">S</span>ecure
<span style="color: #44a616;">U</span>RL
<span style="color: #44a616;">Re</span>quests
</p>
<h3>
<span style="color: #1095C1;">S</span>ecure
<span style="color: #1095C1;">U</span>RL
<span style="color: #1095C1;">Re</span>quests
</h3>
</hgroup>
</header>
@@ -67,41 +67,107 @@
</article>
</dialog>
<dialog class="key-manager" id="keyManagerModal">
<article>
<header>Key Manager</header>
<p>
If you'd like to manage your keys, you can do so here. You can export your keys to transfer to a different
device, or import keys exported from a different device.
</p>
<p>
Public Key:
<pre id="ecdhPublicKey"></pre>
</p>
<p>
Private Key:
<pre id="ecdhPrivateKey"></pre>
</p>
<p>
<button id="exportKeypair">Export Keys</button>
<button id="importKeypair">Import Keys</button>
<button id="closeKeyManager">Close</button>
</p>
</article>
</dialog>
<main class="container">
<section>
<div id="app"></div>
<details>
<summary>How it Works:</summary>
<p><strong>The first thing to understand is how public key cryptography works.</strong></p>
<p>Essentially, you generate a pair of keys that can undo the operations of each other. If you encrypt a message
with your public key, it can only be decrypted by your private key.</p>
<div style="width: fit-content; margin: auto;">
<img src="/img/public_key_crypto_chart.png" alt="Chart of the public key cryptography process" />
</div>
<p style="margin-top: 20px">This is why you're safe to share your "Request URL" out in the open. Anyone who
accesses this URL will receive your public key, and encrypt the message with it along with their own private
key. When you receive the URL with their encrypted message, you take their public key and your private key to
undo the operations of their private key and your public key.
</p>
<p><strong>But of course it's not as simple as that</strong></p>
<p>Traditional public-key cryptography like RSA is limited in the messages it can encrypt by the size of the
public key. To overcome this limitation, we use ECDH for short public keys that can encrypt an arbitrary
amount of data by establishing a shared "symmetric" key for encryption/decryption, which is beyond the scope
of this explanation. But the following chart should give you a general idea of how the process works.</p>
<img src="/img/flowchart.png" alt="Flowchart of the SURE process" />
</details>
<details>
<summary>FAQ</summary>
<ul>
<li>Each client generates an ECDH keypair, consisting of a public key and a private key.</li>
<li>Your private key is kept in localStorage, and never leaves your device.</li>
<li>Your public key is embedded in the URLs you generate. This key can be safely shared anywhere without
compromising security.</li>
<li>When another client opens your generated URL, they will find your public ECDH key. They then generate a
random IV for this specific message, and use it, along with their private ECDH key and your public ECDH key,
to derive a shared secret (AES-GCM).</li>
<li>This derived shared secret never leaves their device. It is used to encrypt their message to you.
The encrypted message, along with their public key and the IV for this message, are embedded in the URL they
generate.</li>
<li>Upon opening the response URL, your device uses your private ECDH key, along with the public key and IV
from the URL, to recreate the shared secret. This secret is used to decrypt the message. If the message was
properly encrypted using the expected keys, it will be successfully decrypted and displayed to you.</li>
<li>If you clear your browser's local storage, you will not be able to decrypt any response URLs generated
with your previous unique URL.</li>
<li>
<strong>What is this?</strong>
<p>
SURE is a system for securely sending information via a URL request. It uses the Elliptic Curve
Diffie-Hellman algorithm to generate a shared secret between the sender and recipient, which is then used
to encrypt the message in a response URL. The device that generated the URL request can then decrypt the
message in the URL sent back to them using their private key.
</p>
</li>
<li>
<strong>What if I want all of my devices to be able to decrypt messages from the same request?</strong>
<p>
If you want to be able to decrypt messages from the same request on multiple devices, you'll need to
export the keypair from the device that generated the request, and then import it into the other
devices. You can do this by clicking the "Manage Keys" link at the bottom of the page, and then clicking
the "Export Keys" button. This will give you a JSON file that you can import on other devices via the
"Import Keys" button.
</p>
</li>
<li>
<strong>What if I lose my keys?</strong>
<p>
If you lose your keys, either from clearing your localstorage or losing your device, you won't be able to
decrypt any messages sent to you. You'll need to send over the new request URL from your device to anyone
who wants to send you a message.
</p>
</li>
<li>
<strong>Why was this built?</strong>
<p>
This was built as a proof of concept for a secure messaging system that doesn't require a user to sign up
for an account or download an app. It can even work entirely offline if you build the app from source and
open the HTML file in your browser. You can also manage your keys so that all of your devices can decrypt
messages from the same request URL.
</li>
</ul>
</details>
</section>
</main>
<footer class="container">
<p>
<a href="https://git.silentsilas.com/silentsilas/sure" target="_blank" rel="noopener noreferrer">Source Code</a> |
<a href="https://silentsilas.com" target="_blank" rel="noopener noreferrer">whoami</a>
</p>
<div style="width: fit-content; margin: auto;">
<a href="https://git.silentsilas.com/silentsilas/sure" target="_blank" rel="noopener noreferrer">Source Code</a>
|
<a href="https://silentsilas.com" target="_blank" rel="noopener noreferrer">whoami</a> |
<a href="#" id="openKeyManager">Manage Keys</a>
</div>
</footer>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
</html>