Optional password

SecureSend/ClientApp/serviceWorker.ts

@@ -1,10 +1,12 @@
 /// <reference lib="WebWorker" />
+import { IWorkerInit } from "./src/models/WorkerInit";
+
 declare const self: ServiceWorkerGlobalScope;
 
 import endpoints from "./src/config/endpoints";
 import decryptStream from "./src/utils/streams/decryptionStream";
 
-const map = new Map();
+const map = new Map<string, IWorkerInit>();
 
 self.addEventListener("install", () => {
   self.skipWaiting();
@@ -25,7 +27,7 @@ const decrypt = async (id: string, url: string) => {
     const decryptedResponse = decryptStream(
       body,
       fileData.salt,
-      fileData.password
+      fileData.masterKey
     );
     const headers = {
       "Content-Disposition":

SecureSend/ClientApp/src/components/AlertNotification.vue

@@ -58,7 +58,7 @@ const isShown = ref<boolean>(false);
 
 requestAnimationFrame(() => (isShown.value = true));
 
-const timeout = setTimeout(() => onCloseClick(), 30000);
+const timeout = setTimeout(() => onCloseClick(), 5000);
 
 const onCloseClick = () => {
   clearInterval(timeout);

SecureSend/ClientApp/src/components/CheckboxSchemaInput.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useField } from "vee-validate";
+import SimpleCheckboxInput from "@/components/SimpleCheckboxInput.vue";
+
+const props = defineProps<{
+  name: string;
+  checkedValue?: unknown;
+  uncheckedValue?: unknown;
+}>();
+
+const { errorMessage, value, meta, handleChange, checked } = useField(
+  () => props.name,
+  undefined,
+  {
+    type: "checkbox",
+    checkedValue: props.checkedValue ?? true,
+    uncheckedValue: props.uncheckedValue ?? false,
+  }
+);
+</script>
+<template>
+  <div class="mb-6">
+    <SimpleCheckboxInput
+      :checked="checked"
+      :value="value"
+      @update:model-value="() => handleChange(checkedValue)"
+      :name="name"
+      v-bind="$attrs"
+      :errorMessage="errorMessage"
+      :isValid="meta.valid"
+    >
+    </SimpleCheckboxInput>
+  </div>
+</template>

SecureSend/ClientApp/src/components/FileUploadForm/FormStepper.vue

@@ -23,7 +23,7 @@
       :class="{
         'text-blue-600 after:border-blue-800 transition-background-color linear duration-1000':
           step === 1,
-        'after:border-gray-100 after:border-4 after:inline-block after:border-gray-700 transition-background-color linear duration-1000':
+        'after:border-4 after:inline-block after:border-gray-700 transition-background-color linear duration-1000':
           step !== 1,
       }"
       class="flex w-full items-center after:content-[''] after:w-full after:h-1 after:border-b after:border-4 after:inline-block after:transition-background-color after:linear after:duration-1000"

SecureSend/ClientApp/src/components/SchemaInput.vue

@@ -3,6 +3,7 @@ import { useField } from "vee-validate";
 import SimpleInput from "@/components/SimpleInput.vue";
 const props = defineProps<{
   name: string;
+  disabled?: boolean;
 }>();
 
 const { errorMessage, value, meta } = useField(() => props.name);
@@ -16,6 +17,7 @@ const { errorMessage, value, meta } = useField(() => props.name);
       v-bind="$attrs"
       :errorMessage="errorMessage"
       :isValid="meta.valid"
+      :disabled="disabled"
     ></SimpleInput>
   </div>
 </template>

SecureSend/ClientApp/src/components/SimpleCheckboxInput.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex items-center mb-4">
+    <input
+      :name="name"
+      v-bind="$attrs"
+      :checked="checked"
+      @input="
+        $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+      "
+      id="default-checkbox"
+      type="checkbox"
+      :value="value"
+      class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600"
+    />
+    <label
+      v-if="label"
+      :for="name"
+      class="ml-2 text-sm font-medium text-gray-300"
+      >{{ label }}</label
+    >
+  </div>
+  <ErrorMessage>
+    <span v-show="isValid === false" class="font-medium">{{
+      errorMessage
+    }}</span>
+  </ErrorMessage>
+</template>
+
+<script setup lang="ts">
+import ErrorMessage from "@/components/ErrorMessage.vue";
+
+defineEmits(["update:modelValue"]);
+
+defineProps<{
+  name: string;
+  label?: string;
+  value: unknown;
+  isValid?: boolean;
+  checked?: boolean;
+  errorMessage?: string;
+}>();
+</script>

SecureSend/ClientApp/src/components/SimpleInput.vue

@@ -2,7 +2,8 @@
   <label
     v-if="label"
     :for="props.name"
-    class="block mb-2 text-sm font-medium text-white"
+    class="block mb-2 text-sm font-medium"
+    :class="{ 'text-gray-400': disabled, 'text-white': !disabled }"
     >{{ props.label }}</label
   >
   <input
@@ -12,7 +13,8 @@
     "
     :name="props.name"
     v-bind="$attrs"
-    class="border sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+    :disabled="disabled"
+    class="border sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500 disabled:cursor-not-allowed disabled:text-gray-400"
   />
   <ErrorMessage>
     <span v-show="isValid === false" class="font-medium">{{
@@ -30,6 +32,7 @@ const props = defineProps<{
   value: unknown;
   isValid?: boolean;
   errorMessage?: string;
+  disabled?: boolean;
 }>();
 defineEmits(["update:modelValue"]);
 </script>

SecureSend/ClientApp/src/components/StyledButton.vue

@@ -1,12 +1,14 @@
 <template>
   <button
     type="submit"
-    class="text-white focus:ring-4 focus:enabled::outline-none font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center disabled:cursor-not-allowed disabled:bg-gray-600"
+    class="text-white focus:ring-4 focus:enabled::outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center disabled:cursor-not-allowed disabled:bg-gray-600"
     :class="{
       'bg-blue-600 hover:enabled::bg-blue-700 focus:enabled:ring-blue-800 hover:enabled:bg-blue-800':
         type === ButtonType.primary,
       'bg-gray-800 hover:enabled:bg-gray-900 focus:enabled:ring-gray-700':
         type === ButtonType.back,
+      'bg-red-600 hover:bg-red-700 focus:ring-red-900':
+        type === ButtonType.cancel,
     }"
   >
     <slot>Submit</slot>
@@ -15,6 +17,7 @@
 
 <script setup lang="ts">
 import { ButtonType } from "@/models/enums/ButtonType";
+
 defineProps<{
   type: ButtonType;
 }>();

SecureSend/ClientApp/src/models/WorkerInit.ts

@@ -0,0 +1,8 @@
+import type { encryptionKey } from "@/models/utilityTypes/encryptionKey";
+
+export interface IWorkerInit {
+  request: string;
+  salt: Uint8Array;
+  masterKey: encryptionKey;
+  id: string;
+}

SecureSend/ClientApp/src/models/utilityTypes/encryptionKey.ts

@@ -0,0 +1 @@
+export type encryptionKey = Uint8Array | string;

SecureSend/ClientApp/src/router/index.ts

@@ -38,7 +38,15 @@ const router = createRouter({
               .split("")
               .map((c) => c.charCodeAt(0))
           );
-          to.params.passwordHash = keys[1];
+          const isProtected = to.query["pass"] === "true";
+          (to.params.isPasswordProtected as unknown as boolean) = isProtected;
+          (to.params.masterKey as unknown as string | Uint8Array) = isProtected
+            ? keys[1]
+            : new Uint8Array(
+                atob(keys[1])
+                  .split("")
+                  .map((c) => c.charCodeAt(0))
+              );
         } catch (error) {
           if (error instanceof UploadExpiredError) {
             return {

SecureSend/ClientApp/src/utils/AuthenticatedSecretKeyCryptography.ts

@@ -1,4 +1,5 @@
 import { generateHash } from "./pbkdfHash";
+import type { encryptionKey } from "@/models/utilityTypes/encryptionKey";
 
 export default class AuthenticatedSecretKeyCryptography {
   public static readonly KEY_LENGTH_IN_BYTES = 16;
@@ -8,35 +9,41 @@ export default class AuthenticatedSecretKeyCryptography {
 
   private readonly ALGORITHM = "AES-GCM";
   private secretKey!: CryptoKey;
+  private keyData!: ArrayBuffer;
   private readonly tagLengthInBytes: number;
 
-  private salt: Uint8Array;
+  private readonly salt: Uint8Array;
   private nonceBase!: ArrayBuffer;
-  private password: string;
   public seq: number;
-  public hash?: string;
+  private hash?: string;
+  private readonly masterKey: encryptionKey;
+
+  private readonly requirePassword: boolean;
 
   constructor(
-    password: string,
     salt: Uint8Array,
+    password?: encryptionKey,
     tagLengthInBytes = AuthenticatedSecretKeyCryptography.TAG_LENGTH_IN_BYTES
   ) {
     this.tagLengthInBytes = tagLengthInBytes;
     this.salt = salt;
-    this.password = password;
+    this.masterKey = password
+      ? password
+      : crypto.getRandomValues(new Uint8Array(32));
     this.seq = 0;
+    this.requirePassword = typeof this.masterKey === "string";
   }
 
   async start() {
+    this.secretKey = await this.getCryptoKeyFromRawKey(this.masterKey);
     this.nonceBase = await this.generateNonceBase();
-    this.secretKey = await this.getCryptoKeyFromRawKey(this.password);
   }
 
   async generateNonceBase() {
     const encoder = new TextEncoder();
     const inputKey = await crypto.subtle.importKey(
       "raw",
-      await this.deriveKeyMaterial(this.password, this.salt),
+      this.keyData,
       "HKDF",
       false,
       ["deriveKey"]
@@ -75,23 +82,24 @@ export default class AuthenticatedSecretKeyCryptography {
     return new Uint8Array(nonce.buffer);
   }
 
-  public async getCryptoKeyFromRawKey(password: string) {
-    const key = await crypto.subtle.importKey(
+  public async getCryptoKeyFromRawKey(masterKey: encryptionKey) {
+    const keyData = this.requirePassword
+      ? await this.derivePbkdfKeyMaterial(masterKey as string, this.salt)
+      : await this.deriveHkdfKeyMaterial();
+    return await crypto.subtle.importKey(
       "raw",
-      await this.deriveKeyMaterial(password, this.salt),
+      keyData,
       {
         name: this.ALGORITHM,
       },
       true,
       ["encrypt", "decrypt"]
     );
-
-    return key;
   }
 
   public async encrypt(data: Uint8Array, seq: number): Promise<ArrayBuffer> {
     const nonce = this.generateNonce(seq);
-    const encrypted = await crypto.subtle.encrypt(
+    return await crypto.subtle.encrypt(
       {
         name: this.ALGORITHM,
         iv: nonce,
@@ -100,12 +108,11 @@ export default class AuthenticatedSecretKeyCryptography {
       this.secretKey,
       data.buffer
     );
-    return encrypted;
   }
 
   public async decrypt(data: Uint8Array, seq: number): Promise<ArrayBuffer> {
     const nonce = this.generateNonce(seq);
-    const decrypted = await crypto.subtle.decrypt(
+    return await crypto.subtle.decrypt(
       {
         name: this.ALGORITHM,
         iv: nonce,
@@ -114,10 +121,9 @@ export default class AuthenticatedSecretKeyCryptography {
       this.secretKey,
       data
     );
-    return decrypted;
   }
 
-  public async deriveKeyMaterial(
+  private async derivePbkdfKeyMaterial(
     password: string,
     salt: Uint8Array
   ): Promise<ArrayBuffer> {
@@ -134,7 +140,39 @@ export default class AuthenticatedSecretKeyCryptography {
       keyMaterial,
       256
     );
-    this.hash = generateHash(keyBuffer, this.salt);
+    this.keyData = keyBuffer;
     return keyBuffer;
   }
+
+  private async deriveHkdfKeyMaterial() {
+    const keyMaterial = await crypto.subtle.importKey(
+      "raw",
+      this.masterKey as Uint8Array,
+      "HKDF",
+      false,
+      ["deriveBits"]
+    );
+    const info = new TextEncoder().encode("info");
+    this.keyData = await crypto.subtle.deriveBits(
+      {
+        name: "HKDF",
+        salt: this.salt,
+        info,
+        hash: "SHA-256",
+      },
+      keyMaterial,
+      256 // 256 bits key length
+    );
+    return this.keyData;
+  }
+
+  getMasterKey() {
+    return this.masterKey as Uint8Array;
+  }
+
+  getHash() {
+    if (this.hash) return this.hash;
+    this.hash = generateHash(this.keyData, this.salt);
+    return this.hash;
+  }
 }

SecureSend/ClientApp/src/utils/streams/StreamDecryptor.ts

@@ -1,10 +1,11 @@
 import AuthenticatedSecretKeyCryptography from "../AuthenticatedSecretKeyCryptography";
+import type { encryptionKey } from "@/models/utilityTypes/encryptionKey";
 
 export default class StreamDecryptor {
   private readonly keychain: AuthenticatedSecretKeyCryptography;
 
-  constructor(password: string, salt: Uint8Array) {
-    this.keychain = new AuthenticatedSecretKeyCryptography(password, salt);
+  constructor(masterKey: encryptionKey, salt: Uint8Array) {
+    this.keychain = new AuthenticatedSecretKeyCryptography(salt, masterKey);
   }
 
   public async transform(