Merge pull request #2482 from Infisical/daniel/shorter-share-url

feat(secret-sharing): server-side encryption

frontend/src/views/ShareSecretPublicPage/components/ShareSecretForm.tsx

@@ -1,5 +1,3 @@
-import crypto from "crypto";
-
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { faCheck, faCopy, faRedo } from "@fortawesome/free-solid-svg-icons";
@@ -8,7 +6,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { encryptSymmetric } from "@app/components/utilities/cryptography/crypto";
 import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app/components/v2";
 import { useTimedReset } from "@app/hooks";
 import { useCreatePublicSharedSecret, useCreateSharedSecret } from "@app/hooks/api";
@@ -79,30 +76,16 @@ export const ShareSecretForm = ({ isPublic, value }: Props) => {
     try {
       const expiresAt = new Date(new Date().getTime() + Number(expiresIn));
 
-      const key = crypto.randomBytes(16).toString("hex");
-      const hashedHex = crypto.createHash("sha256").update(key).digest("hex");
-      const { ciphertext, iv, tag } = encryptSymmetric({
-        plaintext: secret,
-        key
-      });
-
       const { id } = await createSharedSecret.mutateAsync({
         name,
         password,
-        encryptedValue: ciphertext,
-        hashedHex,
-        iv,
-        tag,
+        secretValue: secret,
         expiresAt,
         expiresAfterViews: viewLimit === "-1" ? undefined : Number(viewLimit),
         accessType
       });
 
-      setSecretLink(
-        `${window.location.origin}/shared/secret/${id}?key=${encodeURIComponent(
-          hashedHex
-        )}-${encodeURIComponent(key)}`
-      );
+      setSecretLink(`${window.location.origin}/shared/secret/${id}`);
       reset();
 
       setCopyTextSecret("secret");

frontend/src/views/ViewSecretPublicPage/ViewSecretPublicPage.tsx

@@ -1,23 +1,42 @@
 import { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { NextRouter, useRouter } from "next/router";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AxiosError } from "axios";
 
 import { useGetActiveSharedSecretById } from "@app/hooks/api/secretSharing";
 
-import { PasswordContainer,SecretContainer, SecretErrorContainer } from "./components";
+import { PasswordContainer, SecretContainer, SecretErrorContainer } from "./components";
+
+const extractDetailsFromUrl = (router: NextRouter) => {
+  const { id, key: urlEncodedKey } = router.query;
+
+  const idString = id as string;
+
+  if (urlEncodedKey) {
+    const [hashedHex, key] = urlEncodedKey ? urlEncodedKey.toString().split("-") : ["", ""];
+
+    return {
+      id: idString,
+      hashedHex,
+      key
+    };
+  }
+
+  return {
+    id: idString,
+    hashedHex: null,
+    key: null
+  };
+};
 
 export const ViewSecretPublicPage = () => {
   const router = useRouter();
   const [password, setPassword] = useState<string>();
-  const { id, key: urlEncodedPublicKey } = router.query;
 
-  const [hashedHex, key] = urlEncodedPublicKey
-    ? urlEncodedPublicKey.toString().split("-")
-    : ["", ""];
+  const { hashedHex, key, id } = extractDetailsFromUrl(router);
 
   const {
     data: fetchSecret,
@@ -25,7 +44,7 @@ export const ViewSecretPublicPage = () => {
     isLoading,
     isFetching
   } = useGetActiveSharedSecretById({
-    sharedSecretId: id as string,
+    sharedSecretId: id,
     hashedHex,
     password
   });
@@ -80,7 +99,7 @@ export const ViewSecretPublicPage = () => {
         )}
         {!isLoading && (
           <>
-            {!error && fetchSecret?.secret && key && (
+            {!error && fetchSecret?.secret && (
               <SecretContainer secret={fetchSecret.secret} secretKey={key} />
             )}
             {error && !isInvalidCredential && <SecretErrorContainer />}

frontend/src/views/ViewSecretPublicPage/components/SecretContainer.tsx

@@ -15,7 +15,7 @@ import { TViewSharedSecretResponse } from "@app/hooks/api/secretSharing";
 
 type Props = {
   secret: TViewSharedSecretResponse["secret"];
-  secretKey: string;
+  secretKey: string | null;
 };
 
 export const SecretContainer = ({ secret, secretKey: key }: Props) => {
@@ -25,6 +25,10 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
   });
 
   const decryptedSecret = useMemo(() => {
+    if (secret.secretValue) {
+      return secret.secretValue;
+    }
+
     if (secret && secret.encryptedValue && key) {
       const res = decryptSymmetric({
         ciphertext: secret.encryptedValue,