shadanan / cipherly

App for sharing secrets.

Cipherly

A web app for sharing secrets.

Development of this app is being presented as a series of videos on The Friendly TL's YouTube channel.

Build

# Build prod container
DOCKER_DEFAULT_PLATFORM=linux/amd64 docker build -t gcr.io/cipherly/cipherly .

# Run prod container at http://127.0.0.1:8000
docker run -p 8000:8000 gcr.io/cipherly/cipherly

Deploy

Staging is automatically deployed when a PR is merged to main. Prod is deployed by cutting a new release tag.

Manual Deployment

# Upload to Google Container Registry
gcloud builds submit --tag gcr.io/cipherly/cipherly

# Staging Deployment
gcloud run deploy cipherly-staging \
  --image gcr.io/cipherly/cipherly \
  --platform managed \
  --region us-west1 \
  --allow-unauthenticated

# Prod Deployment
gcloud run deploy cipherly \
  --image gcr.io/cipherly/cipherly \
  --platform managed \
  --region us-west1 \
  --allow-unauthenticated

Setting up the Development Environment

1. Install prerequisites.

   • Node.js
   • Rust

     curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

2. Clone the repository.

   git clone [email protected]:shadanan/cipherly.git
   cd cipherly

3. Start a frontend dev server.

   cd frontend
   npm install
   npm run build
   npm run dev

4. Start a backend server using a test KEK First, install cargo-watch then run:

   KEKS='{"v1":"jRg36ErQ6FLcc7nZgngOpjJnJLGwA3xaMy0yx1pxJrI"}' cargo watch -x run

Message Format

URL Form

The basic URL form for a cipherly message is:

/schema/<schema>/version/<version>/<header>.<envelope>#<header>.<secret>

The schema is a name for the secret type. Currently only password is supported.

The version represents what version the secret type is on. Should be 1.

The header is a URL-safe base64 encoded value that is specific to the schema.

Password

For the password schema encrypted message:

/schema/password/version/1/<header>.<envelope>#<secret>

cipherly's Issues

Combined text input + file upload component

Something that would be really awesome is a component that allows you to paste some text to be encrypted / decrypted, or to upload a file to be encrypted / decrypted. The user experience of being able to do either without having to switch tabs would be awesome. I think it's possible by making the payload textfield a dropzone

When a file is dropped on the payload field, we should hide the input field, and display the filename with a clear button that drops the file and unhides the input field. The payload field should also be given some treatment to make it clear that you can drag and drop a file onto it with maybe an upload file button nearby.

With this component, it should be really easy to support file encryption / decryption. The only difference between file encryption and text encryption is that:

• text encryption does: utf8 -> base64(msgpack(payload))
• file encryption will do: Uint8Array -> msgpack(payload)

Wrong favicon used?

It seems to me that this is the favicon that should be used:

But for some reason this is what I'm seeing:

Not sure if a temporary cache issue, I haven't looked into it deeper, just filing this issue as TODO.

Configure input validation

There exists some client side validation on some fields. It shows up like this:

I would like much more fine grained validation to be available. I want to be able to call a function, and if it returns an error, we can display that error in the validation pop up.