fix: copy to clipboard failed in non-secure (HTTP) contexts (#32287)

web/app/components/develop/secret-key/input-copy.tsx

@@ -1,10 +1,10 @@
 'use client'
-import copy from 'copy-to-clipboard'
 import { t } from 'i18next'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Tooltip from '@/app/components/base/tooltip'
+import { writeTextToClipboard } from '@/utils/clipboard'
 
 type IInputCopyProps = {
   value?: string
@@ -39,8 +39,9 @@ const InputCopy = ({
           <div
             className="r-0 absolute left-0 top-0 w-full cursor-pointer truncate pl-2 pr-2"
             onClick={() => {
-              copy(value)
-              setIsCopied(true)
+              writeTextToClipboard(value).then(() => {
+                setIsCopied(true)
+              })
             }}
           >
             <Tooltip

web/utils/clipboard.spec.ts

@@ -8,10 +8,28 @@
  * The implementation ensures clipboard operations work across all supported browsers
  * while gracefully handling permissions and API availability.
  */
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+
 import { writeTextToClipboard } from './clipboard'
 
 describe('Clipboard Utilities', () => {
   describe('writeTextToClipboard', () => {
+    /**
+     * Setup global mocks required for the clipboard utility tests.
+     * We need to mock 'isSecureContext' because the modern Clipboard API
+     * is only available in secure contexts. We also provide a default mock
+     * for 'execCommand' to prevent 'is not a function' errors in fallback tests.
+     */
+    beforeAll(() => {
+      Object.defineProperty(window, 'isSecureContext', {
+        value: true,
+        writable: true,
+      })
+
+      // Provide a default mock for document.execCommand for JSDOM
+      document.execCommand = vi.fn().mockReturnValue(true)
+    })
+
     afterEach(() => {
       vi.restoreAllMocks()
     })

web/utils/clipboard.ts

@@ -1,5 +1,5 @@
 export async function writeTextToClipboard(text: string): Promise<void> {
-  if (navigator.clipboard && navigator.clipboard.writeText)
+  if (window.isSecureContext && navigator.clipboard && navigator.clipboard.writeText)
     return navigator.clipboard.writeText(text)
 
   return fallbackCopyTextToClipboard(text)