Merge pull request #2050 from Infisical/feat/native-slack-webhook

feat: added native slack webhook type

backend/src/db/migrations/20240702055253_add-encrypted-webhook-url.ts

@@ -0,0 +1,53 @@
+import { Knex } from "knex";
+
+import { WebhookType } from "@app/services/webhook/webhook-types";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasUrlCipherText = await knex.schema.hasColumn(TableName.Webhook, "urlCipherText");
+  const hasUrlIV = await knex.schema.hasColumn(TableName.Webhook, "urlIV");
+  const hasUrlTag = await knex.schema.hasColumn(TableName.Webhook, "urlTag");
+  const hasType = await knex.schema.hasColumn(TableName.Webhook, "type");
+
+  if (await knex.schema.hasTable(TableName.Webhook)) {
+    await knex.schema.alterTable(TableName.Webhook, (tb) => {
+      if (!hasUrlCipherText) {
+        tb.text("urlCipherText");
+      }
+      if (!hasUrlIV) {
+        tb.string("urlIV");
+      }
+      if (!hasUrlTag) {
+        tb.string("urlTag");
+      }
+      if (!hasType) {
+        tb.string("type").defaultTo(WebhookType.GENERAL);
+      }
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasUrlCipherText = await knex.schema.hasColumn(TableName.Webhook, "urlCipherText");
+  const hasUrlIV = await knex.schema.hasColumn(TableName.Webhook, "urlIV");
+  const hasUrlTag = await knex.schema.hasColumn(TableName.Webhook, "urlTag");
+  const hasType = await knex.schema.hasColumn(TableName.Webhook, "type");
+
+  if (await knex.schema.hasTable(TableName.Webhook)) {
+    await knex.schema.alterTable(TableName.Webhook, (t) => {
+      if (hasUrlCipherText) {
+        t.dropColumn("urlCipherText");
+      }
+      if (hasUrlIV) {
+        t.dropColumn("urlIV");
+      }
+      if (hasUrlTag) {
+        t.dropColumn("urlTag");
+      }
+      if (hasType) {
+        t.dropColumn("type");
+      }
+    });
+  }
+}

backend/src/db/schemas/webhooks.ts

@@ -21,7 +21,11 @@ export const WebhooksSchema = z.object({
   keyEncoding: z.string().nullable().optional(),
   createdAt: z.date(),
   updatedAt: z.date(),
-  envId: z.string().uuid()
+  envId: z.string().uuid(),
+  urlCipherText: z.string().nullable().optional(),
+  urlIV: z.string().nullable().optional(),
+  urlTag: z.string().nullable().optional(),
+  type: z.string().default("general").nullable().optional()
 });
 
 export type TWebhooks = z.infer<typeof WebhooksSchema>;

backend/src/server/routes/v1/webhook-router.ts

@@ -6,13 +6,17 @@ import { removeTrailingSlash } from "@app/lib/fn";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { AuthMode } from "@app/services/auth/auth-type";
+import { WebhookType } from "@app/services/webhook/webhook-types";
 
 export const sanitizedWebhookSchema = WebhooksSchema.omit({
   encryptedSecretKey: true,
   iv: true,
   tag: true,
   algorithm: true,
-  keyEncoding: true
+  keyEncoding: true,
+  urlCipherText: true,
+  urlIV: true,
+  urlTag: true
 }).merge(
   z.object({
     projectId: z.string(),
@@ -33,13 +37,24 @@ export const registerWebhookRouter = async (server: FastifyZodProvider) => {
     },
     onRequest: verifyAuth([AuthMode.JWT]),
     schema: {
-      body: z.object({
+      body: z
-        workspaceId: z.string().trim(),
+        .object({
-        environment: z.string().trim(),
+          type: z.nativeEnum(WebhookType).default(WebhookType.GENERAL),
-        webhookUrl: z.string().url().trim(),
+          workspaceId: z.string().trim(),
-        webhookSecretKey: z.string().trim().optional(),
+          environment: z.string().trim(),
-        secretPath: z.string().trim().default("/").transform(removeTrailingSlash)
+          webhookUrl: z.string().url().trim(),
-      }),
+          webhookSecretKey: z.string().trim().optional(),
+          secretPath: z.string().trim().default("/").transform(removeTrailingSlash)
+        })
+        .superRefine((data, ctx) => {
+          if (data.type === WebhookType.SLACK && !data.webhookUrl.includes("hooks.slack.com")) {
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: "Incoming Webhook URL is invalid.",
+              path: ["webhookUrl"]
+            });
+          }
+        }),
       response: {
         200: z.object({
           message: z.string(),

backend/src/services/webhook/webhook-fns.ts

@@ -4,55 +4,63 @@ import { AxiosError } from "axios";
 import picomatch from "picomatch";
 
 import { SecretKeyEncoding, TWebhooks } from "@app/db/schemas";
-import { getConfig } from "@app/lib/config/env";
 import { request } from "@app/lib/config/request";
-import { decryptSymmetric, decryptSymmetric128BitHexKeyUTF8 } from "@app/lib/crypto";
+import { infisicalSymmetricDecrypt } from "@app/lib/crypto/encryption";
 import { BadRequestError } from "@app/lib/errors";
 import { logger } from "@app/lib/logger";
 
 import { TProjectEnvDALFactory } from "../project-env/project-env-dal";
 import { TWebhookDALFactory } from "./webhook-dal";
+import { WebhookType } from "./webhook-types";
 
 const WEBHOOK_TRIGGER_TIMEOUT = 15 * 1000;
-export const triggerWebhookRequest = async (
+
-  { url, encryptedSecretKey, iv, tag, keyEncoding }: TWebhooks,
+export const decryptWebhookDetails = (webhook: TWebhooks) => {
-  data: Record<string, unknown>
+  const { keyEncoding, iv, encryptedSecretKey, tag, urlCipherText, urlIV, urlTag, url } = webhook;
-) => {
+
-  const headers: Record<string, string> = {};
+  let decryptedSecretKey = "";
-  const payload = { ...data, timestamp: Date.now() };
+  let decryptedUrl = url;
-  const appCfg = getConfig();
 
   if (encryptedSecretKey) {
-    const encryptionKey = appCfg.ENCRYPTION_KEY;
+    decryptedSecretKey = infisicalSymmetricDecrypt({
-    const rootEncryptionKey = appCfg.ROOT_ENCRYPTION_KEY;
+      keyEncoding: keyEncoding as SecretKeyEncoding,
-    let secretKey;
+      ciphertext: encryptedSecretKey,
-    if (rootEncryptionKey && keyEncoding === SecretKeyEncoding.BASE64) {
+      iv: iv as string,
-      // case: encoding scheme is base64
+      tag: tag as string
-      secretKey = decryptSymmetric({
+    });
-        ciphertext: encryptedSecretKey,
-        iv: iv as string,
-        tag: tag as string,
-        key: rootEncryptionKey
-      });
-    } else if (encryptionKey && keyEncoding === SecretKeyEncoding.UTF8) {
-      // case: encoding scheme is utf8
-      secretKey = decryptSymmetric128BitHexKeyUTF8({
-        ciphertext: encryptedSecretKey,
-        iv: iv as string,
-        tag: tag as string,
-        key: encryptionKey
-      });
-    }
-    if (secretKey) {
-      const webhookSign = crypto.createHmac("sha256", secretKey).update(JSON.stringify(payload)).digest("hex");
-      headers["x-infisical-signature"] = `t=${payload.timestamp};${webhookSign}`;
-    }
   }
+
+  if (urlCipherText) {
+    decryptedUrl = infisicalSymmetricDecrypt({
+      keyEncoding: keyEncoding as SecretKeyEncoding,
+      ciphertext: urlCipherText,
+      iv: urlIV as string,
+      tag: urlTag as string
+    });
+  }
+
+  return {
+    secretKey: decryptedSecretKey,
+    url: decryptedUrl
+  };
+};
+
+export const triggerWebhookRequest = async (webhook: TWebhooks, data: Record<string, unknown>) => {
+  const headers: Record<string, string> = {};
+  const payload = { ...data, timestamp: Date.now() };
+  const { secretKey, url } = decryptWebhookDetails(webhook);
+
+  if (secretKey) {
+    const webhookSign = crypto.createHmac("sha256", secretKey).update(JSON.stringify(payload)).digest("hex");
+    headers["x-infisical-signature"] = `t=${payload.timestamp};${webhookSign}`;
+  }
+
   const req = await request.post(url, payload, {
     headers,
     timeout: WEBHOOK_TRIGGER_TIMEOUT,
     signal: AbortSignal.timeout(WEBHOOK_TRIGGER_TIMEOUT)
   });
+
   return req;
 };
 
@@ -60,15 +68,48 @@ export const getWebhookPayload = (
   eventName: string,
   workspaceId: string,
   environment: string,
-  secretPath?: string
+  secretPath?: string,
-) => ({
+  type?: string | null
-  event: eventName,
+) => {
-  project: {
+  switch (type) {
-    workspaceId,
+    case WebhookType.SLACK:
-    environment,
+      return {
-    secretPath
+        text: "A secret value has been added or modified.",
+        attachments: [
+          {
+            color: "#E7F256",
+            fields: [
+              {
+                title: "Workspace ID",
+                value: workspaceId,
+                short: false
+              },
+              {
+                title: "Environment",
+                value: environment,
+                short: false
+              },
+              {
+                title: "Secret Path",
+                value: secretPath,
+                short: false
+              }
+            ]
+          }
+        ]
+      };
+    case WebhookType.GENERAL:
+    default:
+      return {
+        event: eventName,
+        project: {
+          workspaceId,
+          environment,
+          secretPath
+        }
+      };
   }
-});
+};
 
 export type TFnTriggerWebhookDTO = {
   projectId: string;
@@ -95,9 +136,10 @@ export const fnTriggerWebhook = async ({
   logger.info("Secret webhook job started", { environment, secretPath, projectId });
   const webhooksTriggered = await Promise.allSettled(
     toBeTriggeredHooks.map((hook) =>
-      triggerWebhookRequest(hook, getWebhookPayload("secrets.modified", projectId, environment, secretPath))
+      triggerWebhookRequest(hook, getWebhookPayload("secrets.modified", projectId, environment, secretPath, hook.type))
     )
   );
+
   // filter hooks by status
   const successWebhooks = webhooksTriggered
     .filter(({ status }) => status === "fulfilled")

backend/src/services/webhook/webhook-service.ts

@@ -1,15 +1,14 @@
 import { ForbiddenError } from "@casl/ability";
 
-import { SecretEncryptionAlgo, SecretKeyEncoding, TWebhooksInsert } from "@app/db/schemas";
+import { TWebhooksInsert } from "@app/db/schemas";
 import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/ee/services/permission/project-permission";
-import { getConfig } from "@app/lib/config/env";
+import { infisicalSymmetricEncypt } from "@app/lib/crypto/encryption";
-import { encryptSymmetric, encryptSymmetric128BitHexKeyUTF8 } from "@app/lib/crypto";
 import { BadRequestError } from "@app/lib/errors";
 
 import { TProjectEnvDALFactory } from "../project-env/project-env-dal";
 import { TWebhookDALFactory } from "./webhook-dal";
-import { getWebhookPayload, triggerWebhookRequest } from "./webhook-fns";
+import { decryptWebhookDetails, getWebhookPayload, triggerWebhookRequest } from "./webhook-fns";
 import {
   TCreateWebhookDTO,
   TDeleteWebhookDTO,
@@ -36,7 +35,8 @@ export const webhookServiceFactory = ({ webhookDAL, projectEnvDAL, permissionSer
     webhookUrl,
     environment,
     secretPath,
-    webhookSecretKey
+    webhookSecretKey,
+    type
   }: TCreateWebhookDTO) => {
     const { permission } = await permissionService.getProjectPermission(
       actor,
@@ -50,30 +50,29 @@ export const webhookServiceFactory = ({ webhookDAL, projectEnvDAL, permissionSer
     if (!env) throw new BadRequestError({ message: "Env not found" });
 
     const insertDoc: TWebhooksInsert = {
-      url: webhookUrl,
+      url: "", // deprecated - we are moving away from plaintext URLs
       envId: env.id,
       isDisabled: false,
-      secretPath: secretPath || "/"
+      secretPath: secretPath || "/",
+      type
     };
+
     if (webhookSecretKey) {
-      const appCfg = getConfig();
+      const { ciphertext, iv, tag, algorithm, encoding } = infisicalSymmetricEncypt(webhookSecretKey);
-      const encryptionKey = appCfg.ENCRYPTION_KEY;
+      insertDoc.encryptedSecretKey = ciphertext;
-      const rootEncryptionKey = appCfg.ROOT_ENCRYPTION_KEY;
+      insertDoc.iv = iv;
-      if (rootEncryptionKey) {
+      insertDoc.tag = tag;
-        const { ciphertext, iv, tag } = encryptSymmetric(webhookSecretKey, rootEncryptionKey);
+      insertDoc.algorithm = algorithm;
-        insertDoc.encryptedSecretKey = ciphertext;
+      insertDoc.keyEncoding = encoding;
-        insertDoc.iv = iv;
+    }
-        insertDoc.tag = tag;
+
-        insertDoc.algorithm = SecretEncryptionAlgo.AES_256_GCM;
+    if (webhookUrl) {
-        insertDoc.keyEncoding = SecretKeyEncoding.BASE64;
+      const { ciphertext, iv, tag, algorithm, encoding } = infisicalSymmetricEncypt(webhookUrl);
-      } else if (encryptionKey) {
+      insertDoc.urlCipherText = ciphertext;
-        const { ciphertext, iv, tag } = encryptSymmetric128BitHexKeyUTF8(webhookSecretKey, encryptionKey);
+      insertDoc.urlIV = iv;
-        insertDoc.encryptedSecretKey = ciphertext;
+      insertDoc.urlTag = tag;
-        insertDoc.iv = iv;
+      insertDoc.algorithm = algorithm;
-        insertDoc.tag = tag;
+      insertDoc.keyEncoding = encoding;
-        insertDoc.algorithm = SecretEncryptionAlgo.AES_256_GCM;
-        insertDoc.keyEncoding = SecretKeyEncoding.UTF8;
-      }
     }
 
     const webhook = await webhookDAL.create(insertDoc);
@@ -131,7 +130,7 @@ export const webhookServiceFactory = ({ webhookDAL, projectEnvDAL, permissionSer
     try {
       await triggerWebhookRequest(
         webhook,
-        getWebhookPayload("test", webhook.projectId, webhook.environment.slug, webhook.secretPath)
+        getWebhookPayload("test", webhook.projectId, webhook.environment.slug, webhook.secretPath, webhook.type)
       );
     } catch (err) {
       webhookError = (err as Error).message;
@@ -162,7 +161,14 @@ export const webhookServiceFactory = ({ webhookDAL, projectEnvDAL, permissionSer
     );
     ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Read, ProjectPermissionSub.Webhooks);
 
-    return webhookDAL.findAllWebhooks(projectId, environment, secretPath);
+    const webhooks = await webhookDAL.findAllWebhooks(projectId, environment, secretPath);
+    return webhooks.map((w) => {
+      const { url } = decryptWebhookDetails(w);
+      return {
+        ...w,
+        url
+      };
+    });
   };
 
   return {

backend/src/services/webhook/webhook-types.ts

@@ -5,6 +5,7 @@ export type TCreateWebhookDTO = {
   secretPath?: string;
   webhookUrl: string;
   webhookSecretKey?: string;
+  type: string;
 } & TProjectPermission;
 
 export type TUpdateWebhookDTO = {
@@ -24,3 +25,8 @@ export type TListWebhookDTO = {
   environment?: string;
   secretPath?: string;
 } & TProjectPermission;
+
+export enum WebhookType {
+  GENERAL = "general",
+  SLACK = "slack"
+}

docs/documentation/platform/webhooks.mdx

@@ -9,7 +9,9 @@ Webhooks can be used to trigger changes to your integrations when secrets are mo
 
 To create a webhook for a particular project, go to `Project Settings > Webhooks`.
 
-When creating a webhook, you can specify an environment and folder path (using glob patterns) to trigger only specific integrations. 
+Infisical supports two webhook types - General and Slack. If you need to integrate with Slack, use the Slack type with an [Incoming Webhook](https://api.slack.com/messaging/webhooks). When creating a webhook, you can specify an environment and folder path to trigger only specific integrations.
+
+![webhook-create](../../images/webhook-create.png)
 
 ## Secret Key Verification
 
@@ -27,7 +29,7 @@ If the signature in the header matches the signature that you generated, then yo
 {
   "event": "secret.modified",
   "project": {
-    "workspaceId":"the workspace id",
+    "workspaceId": "the workspace id",
     "environment": "project environment",
     "secretPath": "project folder path"
   },

frontend/src/hooks/api/webhooks/types.ts

@@ -1,5 +1,11 @@
+export enum WebhookType {
+  GENERAL = "general",
+  SLACK = "slack"
+}
+
 export type TWebhook = {
   id: string;
+  type: WebhookType;
   projectId: string;
   environment: {
     slug: string;
@@ -22,6 +28,7 @@ export type TCreateWebhookDto = {
   webhookUrl: string;
   webhookSecretKey?: string;
   secretPath: string;
+  type: WebhookType;
 };
 
 export type TUpdateWebhookDto = {

frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx

@@ -1,9 +1,8 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
+import { zodResolver } from "@hookform/resolvers/zod";
-import * as yup from "yup";
+import z from "zod";
 
-import GlobPatternExamples from "@app/components/basic/popups/GlobPatternExamples";
 import {
   Button,
   FormControl,
@@ -14,15 +13,28 @@ import {
   Select,
   SelectItem
 } from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
+import { WebhookType } from "@app/hooks/api/webhooks/types";
 
-const formSchema = yup.object({
+const formSchema = z
-  environment: yup.string().required().trim().label("Environment"),
+  .object({
-  webhookUrl: yup.string().url().required().trim().label("Webhook URL"),
+    environment: z.string().trim().describe("Environment"),
-  webhookSecretKey: yup.string().trim().label("Secret Key"),
+    webhookUrl: z.string().url().trim().describe("Webhook URL"),
-  secretPath: yup.string().required().trim().label("Secret Path")
+    webhookSecretKey: z.string().trim().optional().describe("Secret Key"),
-});
+    secretPath: z.string().trim().describe("Secret Path"),
+    type: z.nativeEnum(WebhookType).describe("Type").default(WebhookType.GENERAL)
+  })
+  .superRefine((data, ctx) => {
+    if (data.type === WebhookType.SLACK && !data.webhookUrl.includes("hooks.slack.com")) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Incoming Webhook URL is invalid.",
+        path: ["webhookUrl"]
+      });
+    }
+  });
 
-export type TFormSchema = yup.InferType<typeof formSchema>;
+export type TFormSchema = z.infer<typeof formSchema>;
 
 type Props = {
   isOpen: boolean;
@@ -42,11 +54,50 @@ export const AddWebhookForm = ({
     handleSubmit,
     register,
     reset,
+    watch,
     formState: { errors, isSubmitting }
   } = useForm<TFormSchema>({
-    resolver: yupResolver(formSchema)
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      type: WebhookType.GENERAL
+    }
   });
 
+  const selectedWebhookType = watch("type");
+  const selectedEnvironment = watch("environment");
+
+  const generalFormFields = (
+    <>
+      <FormControl
+        label="Secret Key"
+        isError={Boolean(errors?.webhookSecretKey)}
+        errorText={errors?.webhookSecretKey?.message}
+        helperText="To generate webhook signature for verification"
+      >
+        <Input placeholder="Provided during webhook setup" {...register("webhookSecretKey")} />
+      </FormControl>
+      <FormControl
+        label="Webhook URL"
+        isRequired
+        isError={Boolean(errors?.webhookUrl)}
+        errorText={errors?.webhookUrl?.message}
+      >
+        <Input {...register("webhookUrl")} />
+      </FormControl>
+    </>
+  );
+
+  const slackFormFields = (
+    <FormControl
+      label="Incoming Webhook URL"
+      isRequired
+      isError={Boolean(errors?.webhookUrl)}
+      errorText={errors?.webhookUrl?.message}
+    >
+      <Input placeholder="https://hooks.slack.com/services/..." {...register("webhookUrl")} />
+    </FormControl>
+  );
+
   useEffect(() => {
     if (!isOpen) {
       reset();
@@ -58,6 +109,32 @@ export const AddWebhookForm = ({
       <ModalContent title="Create a new webhook">
         <form onSubmit={handleSubmit(onCreateWebhook)}>
           <div>
+            <Controller
+              control={control}
+              name="type"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label="Type"
+                  isRequired
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    <SelectItem value={WebhookType.GENERAL} key={WebhookType.GENERAL}>
+                      General
+                    </SelectItem>
+                    <SelectItem value={WebhookType.SLACK} key={WebhookType.SLACK}>
+                      Slack
+                    </SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
             <Controller
               control={control}
               name="environment"
@@ -84,38 +161,22 @@ export const AddWebhookForm = ({
                 </FormControl>
               )}
             />
-            <FormControl
+            <Controller
-              label="Secret Path"
+              control={control}
-              icon={<GlobPatternExamples />}
+              defaultValue=""
-              isRequired
+              name="secretPath"
-              isError={Boolean(errors?.secretPath)}
+              render={({ field, fieldState: { error } }) => (
-              errorText={errors?.secretPath?.message}
+                <FormControl
-              helperText="Glob patterns are used to match multiple files or directories"
+                  label="Secret Path"
-            >
+                  isRequired
-              <Input
+                  isError={Boolean(error)}
-                placeholder="glob pattern / or /**/* or /{dir1,dir2}"
+                  errorText={error?.message}
-                {...register("secretPath")}
+                >
-              />
+                  <SecretPathInput {...field} environment={selectedEnvironment} placeholder="/" />
-            </FormControl>
+                </FormControl>
-            <FormControl
+              )}
-              label="Secret Key"
+            />
-              isError={Boolean(errors?.webhookSecretKey)}
+            {selectedWebhookType === WebhookType.SLACK ? slackFormFields : generalFormFields}
-              errorText={errors?.webhookSecretKey?.message}
-              helperText="To generate webhook signature for verification"
-            >
-              <Input
-                placeholder="Provided during webhook setup"
-                {...register("webhookSecretKey")}
-              />
-            </FormControl>
-            <FormControl
-              label="Webhook URL"
-              isRequired
-              isError={Boolean(errors?.webhookUrl)}
-              errorText={errors?.webhookUrl?.message}
-            >
-              <Input {...register("webhookUrl")} />
-            </FormControl>
           </div>
           <div className="mt-8 flex items-center">
             <Button