44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
import { html } from "uhtml";
|
|
|
|
export const HowItWorks = html`<details>
|
|
<summary><strong>How it Works:</strong></summary>
|
|
<p>The first thing to understand is how public key cryptography works.</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
|
|
width="100%"
|
|
height="auto"
|
|
loading="lazy"
|
|
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
|
|
width="100%"
|
|
height="auto"
|
|
loading="lazy"
|
|
src="/img/flowchart.png"
|
|
alt="Flowchart of the SURE process"
|
|
/>
|
|
</details>`;
|