feat: hardened input validation

Author: jaybuidl

.vscode/settings.json

@@ -8,5 +8,9 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "eslint.packageManager": "yarn",
   "prettier.useEditorConfig": true,
-  "prettier.configPath": "prettier-config/.prettierrc.js"
+  "prettier.configPath": "prettier-config/.prettierrc.js",
+  "sonarlint.connectedMode.project": {
+    "connectionId": "kleros",
+    "projectKey": "kleros_kleros-v2"
+  }
 }

web/netlify/functions/update-settings.ts

@@ -3,40 +3,108 @@ import { verifyTypedData } from "viem";
 import { createClient } from "@supabase/supabase-js";
 import { Database } from "../../src/types/supabase-notification";
 import messages from "../../src/consts/eip712-messages";
+import { EMAIL_REGEX, TELEGRAM_REGEX, ETH_ADDRESS_REGEX, ETH_SIGNATURE_REGEX } from "../../src/consts/index";
 
-const supabase = createClient<Database>(process.env.SUPABASE_URL!, process.env.SUPABASE_CLIENT_API_KEY!);
+type NotificationSettings = {
+  email?: string;
+  telegram?: string;
+  nonce: `${number}`;
+  address: `0x${string}`;
+  signature: string;
+};
+
+const parse = (inputString: string): NotificationSettings => {
+  let input;
+  try {
+    input = JSON.parse(inputString);
+  } catch (err) {
+    throw new Error("Invalid JSON format");
+  }
+
+  const requiredKeys: (keyof NotificationSettings)[] = ["nonce", "address", "signature"];
+  const optionalKeys: (keyof NotificationSettings)[] = ["email", "telegram"];
+  const receivedKeys = Object.keys(input);
+
+  for (const key of requiredKeys) {
+    if (!receivedKeys.includes(key)) {
+      throw new Error(`Missing key: ${key}`);
+    }
+  }
+
+  const allExpectedKeys = [...requiredKeys, ...optionalKeys];
+  for (const key of receivedKeys) {
+    if (!allExpectedKeys.includes(key as keyof NotificationSettings)) {
+      throw new Error(`Unexpected key: ${key}`);
+    }
+  }
+
+  const email = input.email ? input.email.trim() : "";
+  if (email && !EMAIL_REGEX.test(email)) {
+    throw new Error("Invalid email format");
+  }
+
+  const telegram = input.telegram ? input.telegram.trim() : "";
+  if (telegram && !TELEGRAM_REGEX.test(telegram)) {
+    throw new Error("Invalid Telegram username format");
+  }
+
+  if (!/^\d+$/.test(input.nonce)) {
+    throw new Error("Invalid nonce format. Expected an integer as a string.");
+  }
+
+  if (!ETH_ADDRESS_REGEX.test(input.address)) {
+    throw new Error("Invalid Ethereum address format");
+  }
+
+  if (!ETH_SIGNATURE_REGEX.test(input.signature)) {
+    throw new Error("Invalid signature format");
+  }
+
+  return {
+    email: input.email.trim(),
+    telegram: input.telegram.trim(),
+    nonce: input.nonce,
+    address: input.address.trim().toLowerCase(),
+    signature: input.signature.trim(),
+  };
+};
 
 export const handler: Handler = async (event) => {
   try {
     if (!event.body) {
       throw new Error("No body provided");
     }
-    // TODO: sanitize event.body
-    const { email, telegram, nonce, address, signature } = JSON.parse(event.body);
+    const { email, telegram, nonce, address, signature } = parse(event.body);
     const lowerCaseAddress = address.toLowerCase() as `0x${string}`;
     // Note: this does NOT work for smart contract wallets, but viem's publicClient.verifyMessage() fails to verify atm.
     // https://viem.sh/docs/utilities/verifyTypedData.html
+    const data = messages.contactDetails(address, nonce, telegram, email);
     const isValid = await verifyTypedData({
-      ...messages.contactDetails(address, nonce, telegram, email),
+      ...data,
       signature,
     });
     if (!isValid) {
       // If the recovered address does not match the provided address, return an error
       throw new Error("Signature verification failed");
     }
-    // TODO: use typed supabase client
+
+    const supabase = createClient<Database>(process.env.SUPABASE_URL!, process.env.SUPABASE_CLIENT_API_KEY!);
+
     // If the message is empty, delete the user record
     if (email === "" && telegram === "") {
       const { error } = await supabase.from("users").delete().match({ address: lowerCaseAddress });
       if (error) throw error;
       return { statusCode: 200, body: JSON.stringify({ message: "Record deleted successfully." }) };
     }
+
     // For a user matching this address, upsert the user record
     const { error } = await supabase
       .from("user-settings")
       .upsert({ address: lowerCaseAddress, email: email, telegram: telegram })
       .match({ address: lowerCaseAddress });
-    if (error) throw error;
+    if (error) {
+      throw error;
+    }
     return { statusCode: 200, body: JSON.stringify({ message: "Record updated successfully." }) };
   } catch (err) {
     return { statusCode: 500, body: JSON.stringify({ message: `Error: ${err}` }) };

web/package.json

@@ -55,15 +55,15 @@
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.61.0",
     "@typescript-eslint/utils": "^5.58.0",
-    "@wagmi/cli": "^1.3.0",
+    "@wagmi/cli": "^1.5.2",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-parcel": "^1.10.6",
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "lru-cache": "^7.18.3",
     "parcel": "2.8.3",
-    "supabase": "^1.88.0",
+    "supabase": "^1.102.2",
     "typescript": "^4.9.5"
   },
   "dependencies": {
@@ -99,8 +99,8 @@
     "react-toastify": "^9.1.3",
     "react-use": "^17.4.0",
     "styled-components": "^5.3.9",
-    "viem": "^0.3.48",
-    "wagmi": "^1.1.0"
+    "viem": "^1.15.4",
+    "wagmi": "^1.4.3"
   },
   "volta": {
     "node": "16.20.1",

web/src/consts/index.ts

@@ -10,3 +10,10 @@ export const GIT_HASH = gitCommitShortHash;
 export const GIT_DIRTY = clean ? "" : "-dirty";
 export const GIT_URL = `https://github.com/kleros/kleros-v2/tree/${gitCommitHash}/web`;
 export const RELEASE_VERSION = version;
+
+// https://www.w3.org/TR/2012/WD-html-markup-20120329/input.email.html#input.email.attrs.value.single
+// eslint-disable-next-line security/detect-unsafe-regex
+export const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+export const TELEGRAM_REGEX = /^@\w{5,32}$/;
+export const ETH_ADDRESS_REGEX = /^0x[a-fA-F0-9]{40}$/;
+export const ETH_SIGNATURE_REGEX = /^0x[a-fA-F0-9]{130}$/;

web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx

@@ -5,6 +5,7 @@ import { Button } from "@kleros/ui-components-library";
 import { uploadSettingsToSupabase } from "utils/uploadSettingsToSupabase";
 import FormContact from "./FormContact";
 import messages from "../../../../../../../consts/eip712-messages";
+import { EMAIL_REGEX, TELEGRAM_REGEX } from "../../../../../../../consts/index";
 import { ISettings } from "../../types";
 
 const FormContainer = styled.form`
@@ -70,7 +71,7 @@ const FormContactDetails: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
           contactIsValid={telegramIsValid}
           setContactInput={setTelegramInput}
           setContactIsValid={setTelegramIsValid}
-          validator={/^@[a-zA-Z0-9_]{5,32}$/}
+          validator={TELEGRAM_REGEX}
         />
       </FormContactContainer>
       <FormContactContainer>
@@ -81,7 +82,7 @@ const FormContactDetails: React.FC<ISettings> = ({ setIsSettingsOpen }) => {
           contactIsValid={emailIsValid}
           setContactInput={setEmailInput}
           setContactIsValid={setEmailIsValid}
-          validator={/^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})$/}
+          validator={EMAIL_REGEX}
         />
       </FormContactContainer>