diff --git a/README.md b/README.md index 135d507..8dddea7 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,38 @@ # whisper-ui ![](img-doc/whisper.png) Secure and very easy to use sending of encrypted data anywhere (browser ui) -## idea -Make it super easy to locally encrypt sensible data for only specific recipients ensuring privacy, integrity and compliance on whatever way the data is transported. +## Motivation +Make it super easy to locally encrypt sensible data for designated recipients ensuring privacy, integrity and compliance on whatever way the data is transported. Keys should be considered throw away material and not be reused often in order to render the transported cryptograms useless, even if they are retained in e.g. mailboxes. + +## How does it work? +![](img-doc/how-does-it-work.png) +This is quite simple: Whisper! uses [asymmetric cryptography](https://en.wikipedia.org/wiki/Public-key_cryptography) and +the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) to create two keys. One can be used for encryption and the other for decryption. The latter should not leave your browser's local storage. To exchange sensitive data the following steps are executed: +1. The recipients send their public key parts to the sender and use whatever communication channel they see fit. +1. The sender uses the key parts of all intended recipients, encrypts the data locally in the browser and sends the resulting cryptogram to the recipients. +1. The recipients decrypt the cryptogram locally in their browser and save the sensitive data. They may throw away their keys rendering the cryptogram useless. + +Thus the sensitive data never leaves the senders' and recipients' devices. ### Create and encrypt locally in you browser -![](img-doc/create-whisper.png) +Drop recipients' keys and some sensitive data, then locally and download cryptograms: +
+ drop keys and data +   + encrypt and download +
-### Receive and decrpt locally in your browser -![](img-doc/receive-whisper.png) +### Receive and decrypt locally in your browser +Drop encrypted stuff you received, then decrypt locally and download result: +
+ drop cryptogram +   + decrypt and download +
## Features (free) * A keypair is automatically generated locally and stored in the browser's IndexedDB -* The public part of the keypair can be copied and desitribiuted to those who want to send you sensitive data +* The public part of the keypair can be copied and distributed to those who want to send you sensitive data * The private part remains local and is the only way to decrypt data addressed to you * Use the hosted version (the good stuff happens locally anyway) or self host and modify it * TODO: List security and compliance features @@ -25,14 +45,14 @@ Make it super easy to locally encrypt sensible data for only specific recipients * Synchronization of the created cryptograms to the designated recepients (no need to send them separately) * OAuth2 / OIDC login with your IDP or e-mail accounts of your org * optional audit / usage log +* support with your compliance frameworks and certifications * TODO: continue - ## Stack and development - very early experimental phase ;) * plain HTML, CSS * Typescript -some magnificent and lightweigt libraries +some magnificent and lightweight libraries * [jose](https://github.com/panva/jose) library * [Pure](https://pure-css.github.io/) * [Iconify](https://pictogrammers.com/docs/guides/iconify/) and [Material Design Icons](https://pictogrammers.com/library/mdi/) @@ -43,12 +63,7 @@ Use [Bun](https://bun.sh/) to run build script that compiles icons bun run ./build/build-iconify.ts ``` -Use [Bun](https://bun.sh/) for on the fly typescript compilation +Use [Bun](https://bun.sh/) for on the fly typescript compilation and serving the app ```sh -bun build src/* --outdir dist --watch +bun build index.html ``` - -and a http server of your choise to serve, e.g. -```sh -python3 -m http.server 8080 -``` \ No newline at end of file diff --git a/build/build-iconify.ts b/build/build-iconify.ts index 0207420..f54811e 100644 --- a/build/build-iconify.ts +++ b/build/build-iconify.ts @@ -15,6 +15,7 @@ const chosenIcons: Array = [ 'check', 'close', 'github', + 'help-circle-outline', 'human-greeting', 'information-outline', 'key-chain', diff --git a/img-doc/create-and-send-1.png b/img-doc/create-and-send-1.png new file mode 100644 index 0000000..c88cca7 Binary files /dev/null and b/img-doc/create-and-send-1.png differ diff --git a/img-doc/create-and-send-2.png b/img-doc/create-and-send-2.png new file mode 100644 index 0000000..be29676 Binary files /dev/null and b/img-doc/create-and-send-2.png differ diff --git a/img-doc/create-whisper.png b/img-doc/create-whisper.png deleted file mode 100644 index dfff592..0000000 Binary files a/img-doc/create-whisper.png and /dev/null differ diff --git a/img-doc/how-does-it-work.png b/img-doc/how-does-it-work.png new file mode 100644 index 0000000..221f32b Binary files /dev/null and b/img-doc/how-does-it-work.png differ diff --git a/img-doc/receive-1.png b/img-doc/receive-1.png new file mode 100644 index 0000000..6414490 Binary files /dev/null and b/img-doc/receive-1.png differ diff --git a/img-doc/receive-2.png b/img-doc/receive-2.png new file mode 100644 index 0000000..215b850 Binary files /dev/null and b/img-doc/receive-2.png differ diff --git a/img-doc/receive-whisper.png b/img-doc/receive-whisper.png deleted file mode 100644 index ab63b82..0000000 Binary files a/img-doc/receive-whisper.png and /dev/null differ diff --git a/img/how-does-it-work.svg b/img/how-does-it-work.svg new file mode 100644 index 0000000..49d88ba --- /dev/null +++ b/img/how-does-it-work.svg @@ -0,0 +1,3 @@ +SenderRecipient213 \ No newline at end of file diff --git a/index.html b/index.html index 9eaae89..13e10f4 100644 --- a/index.html +++ b/index.html @@ -63,8 +63,8 @@

  • to GitHub     + class="button-icon icon--mdi icon--mdi--github">
    to + GitHub
    • @@ -232,13 +232,13 @@

    Welcome

    Welcome! - In order to decypher encypted data that has been sent sent to you, please drop at least one - file into the box. + In order to decrypt prviously encrypted data that has been sent sent to you, please drop at + least one file into the box. Nice! - Now you and only you can decypt the content using your locally stored private key. + Now you and only you can decrypt the content using your locally stored private key. Great! - The files have been decypted and can be downloaded. + The files have been decrypted and can be downloaded. @@ -307,21 +307,46 @@

    Complete!

    -
    +
    -

    Your keys

    +

    What can Whisper! do?

    +
    + +
    +

    + You can either head over to the Send section to encrypt + something for somebody who has given you their Whisper! public key. +

    +

    + Or you use the + Receive section to decrypt previously encrypted data sent to you. To receive a file + that can only be decrypted by you, hand your current Whisper! public key to the sender(s). +

    +
    +
    +
    +
    +
    +
    +

    Your keys

    We have successfully created a keypair for you and stored it in your local browser! You can - download the public key here. It is no secret and can be sent to anyone you want to receive - whispers from. + download the Whisper! public key here. It is not a secret and can be sent to anyone you wish + to + receive whispers from.

    - Please note that if you clear your browser data for this site, existing keys will be - lost and new keys will be generated. This is by design, please ensure that senders - have your latest public key file. + Please note, that if you clear your browser data for this site, existing keys will + be + lost and new keys will be generated. This is by design, so please ensure that + senders + have your latest Whisper! public key file.

    Before downloading and distributing your key, please provide some info on who you might @@ -361,7 +386,7 @@

    About Whisper!

    Whisper! was created by Syncorix in order to securely exchange sensitive data with others. It - runs in your browser and does not transmit data to us. In order to make it available on the + runs in your browser and does not transmit any data to us. In order to make it available on the internet, it needs to be hosted. We chose our hosters with regard to privacy.
    Please also see @@ -374,6 +399,31 @@

    About Whisper!

    +
    +
    +

    How does Whisper! work

    +
    + how does it work +
    +
    + This is quite simple: Whisper! uses asymmetric cryptography and + the Web Crypto API + to create two keys. One can be used for encryption and the other for decryption. The latter should + not + leave your browser's local storage. To exchange sensitive data the following steps are executed: +
      +
    1. The recipients send their public key parts to the sender and use whatever communication + channel they see fit.
      2. +
    2. The sender uses the key parts of all intended recipients, encrypts the data locally in + the browser and sends the resulting cryptogram to the recipients.
      3. +
    3. The recipients decrypt the cryptogram locally in their browser and save the sensitive data. + They may throw away their keys rendering the cryptogram useless.
      4. +
    + Thus the sensitive data never leaves the senders' and recipients' devices. +
    +
    +

    Security of Transmission

    diff --git a/src/whisper.ts b/src/whisper.ts index 9a55b88..43c42b2 100644 --- a/src/whisper.ts +++ b/src/whisper.ts @@ -197,7 +197,7 @@ function executeDecryption() { crypto.decryptFile(f.jwe, jwk) .then(d => ({ name: tryExtractFileName(f.name), data: base64(d) } as DecryptedFile)) .then(r => store.receivedScreen.decryptedFiles.push(r)) - .then(() => console.log("Successully decypted %s with kid %s.", f.name, jwk.kid)) + .then(() => console.log("Successully decrypted %s with kid %s.", f.name, jwk.kid)) .catch(e => console.warn("Failed to decrypt %s", f.name, e)) }) }