From 92f562920d16e42e5fa2e327478ab97e83c0b138 Mon Sep 17 00:00:00 2001
From: taohe <hetao7@pku.edu.cn>
Date: Thu, 11 Jun 2026 15:12:18 +0800
Subject: [PATCH] Avoid password autofill for channel secrets

---
 .../channel-runtime-config-dialog.tsx         | 27 +++++++++++++++++--
 frontend/tests/e2e/channels.spec.ts           |  6 +++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/workspace/channels/channel-runtime-config-dialog.tsx b/frontend/src/components/workspace/channels/channel-runtime-config-dialog.tsx
index 11753f5e7..c857d5449 100644
--- a/frontend/src/components/workspace/channels/channel-runtime-config-dialog.tsx
+++ b/frontend/src/components/workspace/channels/channel-runtime-config-dialog.tsx
@@ -1,7 +1,13 @@
 "use client";
 
 import { LoaderCircleIcon } from "lucide-react";
-import { type FormEvent, useEffect, useMemo, useState } from "react";
+import {
+  type CSSProperties,
+  type FormEvent,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -30,6 +36,14 @@ type ChannelRuntimeConfigDialogProps = {
   ) => void;
 };
 
+type SecretInputStyle = CSSProperties & {
+  WebkitTextSecurity?: "disc";
+};
+
+const SECRET_INPUT_STYLE: SecretInputStyle = {
+  WebkitTextSecurity: "disc",
+};
+
 export function ChannelRuntimeConfigDialog({
   provider,
   open,
@@ -83,6 +97,7 @@ export function ChannelRuntimeConfigDialog({
           <div className="space-y-3">
             {fields.map((field) => {
               const inputId = `channel-${provider.provider}-${field.name}`;
+              const isSecretField = field.type === "password";
               return (
                 <div key={field.name} className="space-y-1.5">
                   <label
@@ -93,10 +108,18 @@ export function ChannelRuntimeConfigDialog({
                   </label>
                   <Input
                     id={inputId}
-                    type={field.type === "password" ? "password" : "text"}
+                    type="text"
                     value={values[field.name] ?? ""}
                     required={field.required}
                     autoComplete="off"
+                    autoCorrect="off"
+                    autoCapitalize="none"
+                    spellCheck={false}
+                    data-1p-ignore={isSecretField ? "true" : undefined}
+                    data-bwignore={isSecretField ? "true" : undefined}
+                    data-form-type={isSecretField ? "other" : undefined}
+                    data-lpignore={isSecretField ? "true" : undefined}
+                    style={isSecretField ? SECRET_INPUT_STYLE : undefined}
                     onChange={(event) => {
                       setValues((current) => ({
                         ...current,
diff --git a/frontend/tests/e2e/channels.spec.ts b/frontend/tests/e2e/channels.spec.ts
index 45c2a2544..7a8a3507f 100644
--- a/frontend/tests/e2e/channels.spec.ts
+++ b/frontend/tests/e2e/channels.spec.ts
@@ -226,6 +226,12 @@ test.describe("IM channels", () => {
 
     const setupDialog = page.getByRole("dialog", { name: "Connect Slack" });
     await expect(setupDialog).toBeVisible();
+    const botTokenInput = setupDialog.getByLabel("Bot token");
+    await expect(botTokenInput).toHaveAttribute("type", "text");
+    await expect(botTokenInput).toHaveAttribute("autocomplete", "off");
+    await expect(botTokenInput).toHaveAttribute("data-lpignore", "true");
+    await expect(botTokenInput).toHaveAttribute("data-1p-ignore", "true");
+    await expect(botTokenInput).toHaveCSS("-webkit-text-security", "disc");
     await setupDialog.getByLabel("Bot token").fill("xoxb-ui");
     await setupDialog.getByLabel("App token").fill("xapp-ui");
     await setupDialog.getByRole("button", { name: "Save and connect" }).click();