152 lines
6.8 KiB
HTML
152 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="no-js">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<title>SURE - Secure URL Requests</title>
|
|
|
|
<script type="module">
|
|
document.documentElement.classList.remove("no-js");
|
|
document.documentElement.classList.add("js");
|
|
|
|
window.onload = function () {
|
|
document.body.style.opacity = "1";
|
|
}
|
|
</script>
|
|
|
|
<meta name="description" content="Securely request information via SURE links" />
|
|
<meta property="og:title" content="SURE - Secure URL Requests" />
|
|
<meta property="og:description" content="Securely request information via SURE links" />
|
|
<meta property="og:image" content="https://sure.dog/img/logo.png" />
|
|
<meta property="og:image:alt" content="Abstract logo of the letter S" />
|
|
<meta property="og:locale" content="en_US" />
|
|
<meta property="og:type" content="website" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta property="og:url" content="https://sure.dog/" />
|
|
<link rel="canonical" href="https://sure.dog/" />
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
|
|
<link rel="manifest" href="/manifest.json" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="application-name" content="SURE" />
|
|
<meta name="apple-mobile-web-app-title" content="SURE" />
|
|
<meta name="theme-color" content="#44a616" />
|
|
<meta name="msapplication-navbutton-color" content="#44a616" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="msapplication-starturl" content="/" />
|
|
</head>
|
|
|
|
<body style="opacity: 0;">
|
|
<header class="container">
|
|
<hgroup>
|
|
<h1>
|
|
SURE
|
|
</h1>
|
|
<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>
|
|
|
|
<!-- No JS Warning -->
|
|
<dialog open class="js-warning">
|
|
<article>
|
|
<header>No Javascript Detected</header>
|
|
<p>
|
|
Unfortunately, this site requires Javascript in order to generate
|
|
keypairs, save them in localstorage, and encrypt/decrypt data. Please
|
|
enable Javascript and refresh the page.
|
|
</p>
|
|
</article>
|
|
</dialog>
|
|
|
|
<div id="keyManagerContainer"></div>
|
|
|
|
<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>
|
|
<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">
|
|
<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> |