fix(webapp): tighten session create and webhook endpoint permissions

Tighten three permission checks in the webapp:

- The webhook endpoint page's generate secret, set secret and generate
verify token actions now require `write:webhooks`, matching the API, and
their buttons are disabled without it.
- Session `externalId`s can no longer contain a `/channels` path segment
or end in `:channels`, since both forms name a session's channels.
Session create returns 422, and webhook session keys and playground chat
ids follow the same rule.
- Session create no longer stores the webhook-only `channelEvent` and
`actionSource: "webhook"` fields from a client's base payload, matching
how client `.in` appends are already handled.

Mono-RevId: d1aa9aad641047f37d54396774d4dd4e84530e68

Author: ericallam

.server-changes/session-external-id-channels-segment.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Session external ids can no longer contain a `/channels` path segment (for example `chat-1/channels/support`) or end in `:channels`, since both forms name a session's channels. Creating a session with one now returns a 422 validation error.

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks.endpoints.$endpointParam/route.tsx

@@ -17,6 +17,7 @@ import type { WebhookValueSource } from "@trigger.dev/core/v3";
 import { type MutableRefObject, Suspense, useEffect, useRef, useState } from "react";
 import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
+import type { RuntimeEnvironmentType } from "@trigger.dev/database";
 import { WebhookIcon } from "~/assets/icons/WebhookIcon";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { PageBody } from "~/components/layout/AppLayout";
@@ -127,6 +128,25 @@ async function canCancelWaiters(
   return auth.ok && auth.ability.can("write", { type: "waitpoints", envType: environment.type });
 }
 
+const NO_WEBHOOKS_WRITE = "You don't have permission to change webhooks in this environment.";
+
+async function canWriteWebhooks(
+  request: Request,
+  scope: {
+    userId: string;
+    organizationId: string;
+    projectId: string;
+    environmentType: RuntimeEnvironmentType;
+  }
+): Promise<boolean> {
+  const auth = await rbac.authenticateSession(request, {
+    userId: scope.userId,
+    organizationId: scope.organizationId,
+    projectId: scope.projectId,
+  });
+  return auth.ok && auth.ability.can("write", { type: "webhooks", envType: scope.environmentType });
+}
+
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const { user, project, environment, endpointParam } = await requireWebhookAccess(request, params);
 
@@ -203,6 +223,12 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   return typeddefer({
     canCancelWaiters: await canCancelWaiters(request, { user, project, environment }),
+    canWrite: await canWriteWebhooks(request, {
+      userId: user.id,
+      organizationId: project.organizationId,
+      projectId: project.id,
+      environmentType: environment.type,
+    }),
     endpoint,
     ingestUrl,
     routing,
@@ -268,6 +294,14 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
         };
   }
 
+  const canWrite = await canWriteWebhooks(request, {
+    userId: user.id,
+    organizationId: project.organizationId,
+    projectId: project.id,
+    environmentType: environment.type,
+  });
+  if (!canWrite) throwPermissionDenied(NO_WEBHOOKS_WRITE);
+
   // Generate (integrator-supplied secret): the UI reveals it ONCE for pasting into the provider.
   if (intent === "generate-secret") {
     const ttl = PreviousSecretTtlFormField.safeParse(Object.fromEntries(formData));
@@ -324,6 +358,7 @@ export default function Page() {
     waiters,
     composerEndpoints,
     canCancelWaiters: canCancel,
+    canWrite,
   } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
@@ -485,6 +520,7 @@ export default function Page() {
               routing={routing}
               verifier={verifier}
               hasVerifyToken={hasVerifyToken}
+              canWrite={canWrite}
             />
           </ResizablePanel>
         </ResizablePanelGroup>
@@ -501,13 +537,18 @@ function EndpointSidebar({
   routing,
   verifier,
   hasVerifyToken,
+  canWrite,
 }: {
   endpoint: WebhookEndpointDetail;
   ingestUrl: string;
   hasVerifyToken: boolean;
   routing: LoaderData["routing"];
   verifier: LoaderData["verifier"];
+  canWrite: boolean;
 }) {
+  const disabledReason = canWrite
+    ? undefined
+    : "You don't have permission to change this endpoint.";
   const metadataJson =
     endpoint.metadata != null && Object.keys(endpoint.metadata as object).length > 0
       ? JSON.stringify(endpoint.metadata, null, 2)
@@ -569,12 +610,16 @@ function EndpointSidebar({
                   )}
                   <div className="flex flex-wrap items-center gap-2">
                     {canGenerate ? (
-                      <GenerateSecretDialog hasSigningSecret={endpoint.hasSigningSecret} />
+                      <GenerateSecretDialog
+                        hasSigningSecret={endpoint.hasSigningSecret}
+                        disabledReason={disabledReason}
+                      />
                     ) : null}
                     <SetSecretDialog
                       hasSigningSecret={endpoint.hasSigningSecret}
                       credentialNoun={credentialNoun}
                       variant={canGenerate ? "tertiary/small" : "secondary/small"}
+                      disabledReason={disabledReason}
                     />
                   </div>
                 </div>
@@ -595,7 +640,10 @@ function EndpointSidebar({
                         Not set, the provider cannot verify this URL yet
                       </span>
                     )}
-                    <GenerateVerifyTokenDialog hasVerifyToken={hasVerifyToken} />
+                    <GenerateVerifyTokenDialog
+                      hasVerifyToken={hasVerifyToken}
+                      disabledReason={disabledReason}
+                    />
                     <Hint>
                       The provider sends a GET with <code>{getHandshake.tokenParam}</code> when you
                       save the URL; it must carry this token.
@@ -841,10 +889,12 @@ function SetSecretDialog({
   hasSigningSecret,
   credentialNoun,
   variant = "secondary/small",
+  disabledReason,
 }: {
   hasSigningSecret: boolean;
   credentialNoun: string;
   variant?: "secondary/small" | "tertiary/small";
+  disabledReason?: string;
 }) {
   const fetcher = useFetcher<typeof action>();
   const [open, setOpen] = useState(false);
@@ -863,7 +913,12 @@ function SetSecretDialog({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant={variant} LeadingIcon={KeyIcon}>
+        <Button
+          variant={variant}
+          LeadingIcon={KeyIcon}
+          disabled={disabledReason !== undefined}
+          tooltip={disabledReason}
+        >
           {verb} {credentialNoun}
         </Button>
       </DialogTrigger>
@@ -916,7 +971,13 @@ function SetSecretDialog({
 
 // For integrator-supplied secrets (GitHub/GitLab/standard): mint a strong secret server-side,
 // store it, and reveal it ONCE so the user can paste it into their provider.
-function GenerateSecretDialog({ hasSigningSecret }: { hasSigningSecret: boolean }) {
+function GenerateSecretDialog({
+  hasSigningSecret,
+  disabledReason,
+}: {
+  hasSigningSecret: boolean;
+  disabledReason?: string;
+}) {
   const fetcher = useFetcher<typeof action>();
   const [open, setOpen] = useState(false);
   const isSubmitting = fetcher.state !== "idle";
@@ -930,7 +991,12 @@ function GenerateSecretDialog({ hasSigningSecret }: { hasSigningSecret: boolean
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="secondary/small" LeadingIcon={SparklesIcon}>
+        <Button
+          variant="secondary/small"
+          LeadingIcon={SparklesIcon}
+          disabled={disabledReason !== undefined}
+          tooltip={disabledReason}
+        >
           {hasSigningSecret ? "Regenerate secret" : "Generate secret"}
         </Button>
       </DialogTrigger>
@@ -995,7 +1061,13 @@ function GenerateSecretDialog({ hasSigningSecret }: { hasSigningSecret: boolean
  * signing secret: minted server-side, stored encrypted, revealed once for the provider's Verify
  * Token field. Regenerating replaces it and the URL must be re-verified in the provider.
  */
-function GenerateVerifyTokenDialog({ hasVerifyToken }: { hasVerifyToken: boolean }) {
+function GenerateVerifyTokenDialog({
+  hasVerifyToken,
+  disabledReason,
+}: {
+  hasVerifyToken: boolean;
+  disabledReason?: string;
+}) {
   const fetcher = useFetcher<typeof action>();
   const [open, setOpen] = useState(false);
   const [dismissedToken, setDismissedToken] = useState<string | undefined>(undefined);
@@ -1029,7 +1101,12 @@ function GenerateVerifyTokenDialog({ hasVerifyToken }: { hasVerifyToken: boolean
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTrigger asChild>
-        <Button variant="secondary/small" LeadingIcon={SparklesIcon}>
+        <Button
+          variant="secondary/small"
+          LeadingIcon={SparklesIcon}
+          disabled={disabledReason !== undefined}
+          tooltip={disabledReason}
+        >
           {hasVerifyToken ? "Regenerate verify token" : "Generate verify token"}
         </Button>
       </DialogTrigger>

apps/webapp/app/routes/api.v1.sessions.ts

@@ -12,9 +12,10 @@ import { $replica, prisma, type PrismaClient } from "~/db.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { logger } from "~/services/logger.server";
 import { mintSessionToken } from "~/services/realtime/mintSessionToken.server";
+import { stripClientIngressFieldsFromBasePayload } from "~/services/realtime/sanitizeSessionInput.server";
 import {
   isSafeSessionExternalId,
-  SESSION_CHANNEL_SCOPE_INFIX,
+  SESSION_EXTERNAL_ID_FOLD_ERROR,
 } from "~/services/realtime/sessionChannels.server";
 import {
   ensureRunForSession,
@@ -163,12 +164,7 @@ const { action } = createActionApiRoute(
   async ({ authentication, body, ability }) => {
     try {
       if (body.externalId && !isSafeSessionExternalId(body.externalId)) {
-        return json(
-          {
-            error: `externalId cannot contain "${SESSION_CHANNEL_SCOPE_INFIX}" or end in ":out" or ":in"`,
-          },
-          { status: 422 }
-        );
+        return json({ error: SESSION_EXTERNAL_ID_FOLD_ERROR }, { status: 422 });
       }
 
       const sessionIds = body.externalId ? [body.externalId] : [];
@@ -189,13 +185,18 @@ const { action } = createActionApiRoute(
         return json({ error: "Unauthorized" }, { status: 403 });
       }
 
+      const triggerConfig = {
+        ...body.triggerConfig,
+        basePayload: stripClientIngressFieldsFromBasePayload(body.triggerConfig.basePayload),
+      };
+
       // Defer cached config changes until the stored task has been authorized.
       const { session, isCached } = await findOrCreateSession({
         environment: authentication.environment,
         externalId: body.externalId,
         type: body.type,
         taskIdentifier: body.taskIdentifier,
-        triggerConfig: body.triggerConfig,
+        triggerConfig,
         tags: body.tags,
         metadata: body.metadata as Record<string, unknown> | undefined,
         expiresAt: body.expiresAt,
@@ -241,7 +242,7 @@ const { action } = createActionApiRoute(
           session,
           await prisma.session.update({
             where: { id: session.id },
-            data: { triggerConfig: body.triggerConfig as unknown as Prisma.InputJsonValue },
+            data: { triggerConfig: triggerConfig as unknown as Prisma.InputJsonValue },
             select: { triggerConfig: true, updatedAt: true },
           })
         );

apps/webapp/app/routes/realtime.v1.sessions.$session.$io.append.ts

@@ -6,6 +6,7 @@ import {
   resolveSessionWithWriterFallback,
 } from "~/services/realtime/sessions.server";
 import { stripClientIngressFields } from "~/services/realtime/sanitizeSessionInput.server";
+import { isSafeSessionExternalId } from "~/services/realtime/sessionChannels.server";
 import { ensureRunThenAppend } from "~/services/realtime/sessionChannelAppend.server";
 import { anyResource, createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
 
@@ -57,7 +58,9 @@ const { action, loader } = createActionApiRoute(
           ids.add(session.friendlyId);
           if (session.externalId) ids.add(session.externalId);
         }
-        return anyResource([...ids].map((id) => ({ type: "sessions", id })));
+        return anyResource(
+          [...ids].filter(isSafeSessionExternalId).map((id) => ({ type: "sessions", id }))
+        );
       },
     },
   },

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.playground.action.tsx

@@ -9,6 +9,11 @@ import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { requireUserId } from "~/services/session.server";
 import { EnvironmentParamSchema } from "~/utils/pathBuilder";
 import { mintSessionToken } from "~/services/realtime/mintSessionToken.server";
+import {
+  isSafeSessionExternalId,
+  SESSION_EXTERNAL_ID_FOLD_ERROR,
+} from "~/services/realtime/sessionChannels.server";
+import { stripClientIngressFieldsFromBasePayload } from "~/services/realtime/sanitizeSessionInput.server";
 import { ensureRunForSession } from "~/services/realtime/sessionRunManager.server";
 import { runStore } from "~/v3/runStore.server";
 
@@ -95,6 +100,9 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
       if (!chatId) {
         return json({ error: "chatId is required" }, { status: 400 });
       }
+      if (!isSafeSessionExternalId(chatId)) {
+        return json({ error: SESSION_EXTERNAL_ID_FOLD_ERROR }, { status: 400 });
+      }
 
       // Parse the optional initial payload — used as the basePayload
       // for the first run trigger. After session create, the agent
@@ -126,7 +134,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
       ].slice(0, 10);
 
       const triggerConfig = {
-        basePayload: {
+        basePayload: stripClientIngressFieldsFromBasePayload({
           // The first run boots before the user's first message lands on
           // `.in/append`, so it sees `messages: []` and `trigger: "preload"`.
           // Mirrors the defaults in `chat.createStartSessionAction` —
@@ -137,7 +145,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
           ...payload,
           chatId,
           ...(parsedClientData ? { metadata: parsedClientData } : {}),
-        },
+        }),
         ...(machine ? { machine } : {}),
         tags,
         ...(maxAttempts ? { maxAttempts: parseInt(maxAttempts, 10) } : {}),

apps/webapp/app/services/realtime/sanitizeSessionInput.server.ts

@@ -24,12 +24,22 @@ export function stripClientIngressFields(part: string): string {
   const payload = (record as { payload?: unknown }).payload as Record<string, unknown> | undefined;
   if (!payload || typeof payload !== "object") return part;
 
+  return removeClientIngressFields(payload) ? JSON.stringify(record) : part;
+}
+
+export function stripClientIngressFieldsFromBasePayload<T extends Record<string, unknown>>(
+  basePayload: T
+): T {
+  const copy = { ...basePayload };
+  removeClientIngressFields(copy);
+  return copy;
+}
+
+function removeClientIngressFields(payload: Record<string, unknown>): boolean {
   const forgedWebhookAction =
     Object.hasOwn(payload, "actionSource") && payload.actionSource === "webhook";
   const forgedChannelEvent = Object.hasOwn(payload, "channelEvent");
-  if (!forgedWebhookAction && !forgedChannelEvent) return part;
-
   if (forgedWebhookAction) delete payload.actionSource;
   if (forgedChannelEvent) delete payload.channelEvent;
-  return JSON.stringify(record);
+  return forgedWebhookAction || forgedChannelEvent;
 }