From 79753bf442f4865f8f0b5bb2a1e52b349c68635a Mon Sep 17 00:00:00 2001
From: butschster <butschster@gmail.com>
Date: Tue, 31 Mar 2026 21:20:41 +0400
Subject: [PATCH] fix: add clipboard fallback for non-secure (HTTP)
 environments

navigator.clipboard API requires a secure context (HTTPS) and fails
silently on plain HTTP. Added a shared clipboard utility with
execCommand('copy') fallback and replaced all direct navigator.clipboard
usages across Vue components and sf-dumper.
---
 .../ui/preview-card/preview-card.vue          |  3 +-
 .../profile-summary-card.vue                  |  3 +-
 src/shared/lib/clipboard.ts                   | 44 +++++++++++++++++++
 src/shared/lib/vendor/sf-dumper/dumper.js     | 17 ++++++-
 src/shared/ui/code-snippet/code-snippet.vue   |  4 +-
 src/shared/ui/preview-card/preview-card.vue   |  3 +-
 .../layout-preview-events.vue                 | 13 +++---
 7 files changed, 74 insertions(+), 13 deletions(-)
 create mode 100644 src/shared/lib/clipboard.ts

diff --git a/src/entities/http-dump/ui/preview-card/preview-card.vue b/src/entities/http-dump/ui/preview-card/preview-card.vue
index c0291340..081b801e 100644
--- a/src/entities/http-dump/ui/preview-card/preview-card.vue
+++ b/src/entities/http-dump/ui/preview-card/preview-card.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
+import { copyTextToClipboard } from '@/shared/lib/clipboard'
 import type { NormalizedEvent } from '@/shared/types'
 import { PreviewCard, IconSvg } from '@/shared/ui'
 import type { HttpDump } from '../../types'
@@ -78,7 +79,7 @@ const buildCurl = (): string => {
 
 const copyCurl = () => {
   isCopied.value = true
-  navigator.clipboard.writeText(buildCurl()).catch(console.error)
+  copyTextToClipboard(buildCurl()).catch(console.error)
   setTimeout(() => {
     isCopied.value = false
   }, 1500)
diff --git a/src/entities/profiler/ui/profile-summary-card/profile-summary-card.vue b/src/entities/profiler/ui/profile-summary-card/profile-summary-card.vue
index e033135e..50597835 100644
--- a/src/entities/profiler/ui/profile-summary-card/profile-summary-card.vue
+++ b/src/entities/profiler/ui/profile-summary-card/profile-summary-card.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from 'vue'
+import { copyTextToClipboard } from '@/shared/lib/clipboard'
 import { useProfiler } from '../../lib'
 import type { ProfilerSummary } from '../../types'
 
@@ -29,7 +30,7 @@ const toggle = () => {
 const copied = ref('')
 
 const selectFunction = (fn: string) => {
-  navigator.clipboard.writeText(fn).then(() => {
+  copyTextToClipboard(fn).then(() => {
     copied.value = fn
     setTimeout(() => {
       copied.value = ''
diff --git a/src/shared/lib/clipboard.ts b/src/shared/lib/clipboard.ts
new file mode 100644
index 00000000..7ee77dbf
--- /dev/null
+++ b/src/shared/lib/clipboard.ts
@@ -0,0 +1,44 @@
+/**
+ * Clipboard utilities with fallback for non-secure (HTTP) contexts
+ * where navigator.clipboard API is not available.
+ */
+
+export function copyTextToClipboard(text: string): Promise<void> {
+  if (navigator.clipboard?.writeText) {
+    return navigator.clipboard.writeText(text)
+  }
+
+  return new Promise((resolve, reject) => {
+    const textarea = document.createElement('textarea')
+    textarea.value = text
+    textarea.style.position = 'fixed'
+    textarea.style.opacity = '0'
+    document.body.appendChild(textarea)
+    textarea.select()
+
+    try {
+      document.execCommand('copy')
+      resolve()
+    } catch (e) {
+      reject(e)
+    } finally {
+      document.body.removeChild(textarea)
+    }
+  })
+}
+
+export function copyBlobToClipboard(blob: Blob): Promise<void> {
+  if (navigator.clipboard?.write) {
+    return navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])
+  }
+
+  // Fallback: convert image blob to a data URL and copy as text
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => {
+      copyTextToClipboard(reader.result as string).then(resolve, reject)
+    }
+    reader.onerror = () => reject(reader.error)
+    reader.readAsDataURL(blob)
+  })
+}
diff --git a/src/shared/lib/vendor/sf-dumper/dumper.js b/src/shared/lib/vendor/sf-dumper/dumper.js
index bc31db66..9187aa60 100644
--- a/src/shared/lib/vendor/sf-dumper/dumper.js
+++ b/src/shared/lib/vendor/sf-dumper/dumper.js
@@ -546,7 +546,22 @@ export function SfdumpWrap(doc) {
           showSearch()
         } else if (action === 'copy') {
           var text = root.innerText || root.textContent || ''
-          if (navigator.clipboard) navigator.clipboard.writeText(text.trim())
+          if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(text.trim())
+          } else {
+            var textarea = document.createElement('textarea')
+            textarea.value = text.trim()
+            textarea.style.position = 'fixed'
+            textarea.style.opacity = '0'
+            document.body.appendChild(textarea)
+            textarea.select()
+            try {
+              document.execCommand('copy')
+            } catch (e) {
+              /* noop */
+            }
+            document.body.removeChild(textarea)
+          }
         } else if (depth) {
           collapseAll(root)
           expandToDepth(root, parseInt(depth, 10))
diff --git a/src/shared/ui/code-snippet/code-snippet.vue b/src/shared/ui/code-snippet/code-snippet.vue
index 4e53f8e2..6652262b 100644
--- a/src/shared/ui/code-snippet/code-snippet.vue
+++ b/src/shared/ui/code-snippet/code-snippet.vue
@@ -2,6 +2,7 @@
 import highlightPlugin from '@highlightjs/vue-plugin'
 import isString from 'lodash.isstring'
 import { ref, computed } from 'vue'
+import { copyTextToClipboard } from '../../lib/clipboard'
 import { logger } from '../../lib/logger'
 import { IconSvg } from '../icon-svg'
 
@@ -26,8 +27,7 @@ const normalizedCode = computed(() =>
 const copyCode = (): void => {
   isCopied.value = true
 
-  navigator.clipboard
-    .writeText(normalizedCode.value)
+  copyTextToClipboard(normalizedCode.value)
     .then(() => {
       setTimeout(() => {
         isCopied.value = false
diff --git a/src/shared/ui/preview-card/preview-card.vue b/src/shared/ui/preview-card/preview-card.vue
index 0a10b6a1..f6c95924 100644
--- a/src/shared/ui/preview-card/preview-card.vue
+++ b/src/shared/ui/preview-card/preview-card.vue
@@ -2,6 +2,7 @@
 import download from 'downloadjs'
 import { toBlob, toPng } from 'html-to-image'
 import { ref, computed, onBeforeMount, onMounted } from 'vue'
+import { copyBlobToClipboard } from '../../lib/clipboard'
 import { REST_API_URL } from '../../lib/io'
 import { logger } from '../../lib/logger'
 import { useEvents } from '../../lib/use-events'
@@ -112,7 +113,7 @@ const copyCode = () => {
     toBlob(eventRef.value as HTMLElement)
       .then((blob) => {
         if (blob) {
-          navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])
+          copyBlobToClipboard(blob)
         }
       })
       .catch((e) => logger(['UI: Operation failed', e]))
diff --git a/src/widgets/ui/layout-preview-events/layout-preview-events.vue b/src/widgets/ui/layout-preview-events/layout-preview-events.vue
index 551c4d90..28d4e13b 100644
--- a/src/widgets/ui/layout-preview-events/layout-preview-events.vue
+++ b/src/widgets/ui/layout-preview-events/layout-preview-events.vue
@@ -5,6 +5,7 @@ import { storeToRefs } from 'pinia'
 import { computed, ref, watch, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 import { PAGE_TYPES } from '@/shared/constants'
+import { copyTextToClipboard, copyBlobToClipboard } from '@/shared/lib/clipboard'
 import { useEvents } from '@/shared/lib/use-events'
 import { useKeyboardNav, showToast, screenshotingEventId } from '@/shared/lib/use-keyboard-nav'
 import { useEventsStore } from '@/shared/stores'
@@ -20,7 +21,7 @@ type Props = {
 
 const props = withDefaults(defineProps<Props>(), {
   title: '',
-  favoritesOnly: false,
+  favoritesOnly: false
 })
 
 const { events, cachedEvents, lockedIds } = useEvents()
@@ -117,9 +118,9 @@ const { focusedId } = useKeyboardNav(eventUuids, {
   onCopyPayload: (id) => {
     const event = visibleEvents.value.find((e) => e.uuid === id)
     if (event) {
-      navigator.clipboard
-        .writeText(JSON.stringify(event.payload, null, 2))
-        .then(() => showToast('Payload copied'))
+      copyTextToClipboard(JSON.stringify(event.payload, null, 2)).then(() =>
+        showToast('Payload copied')
+      )
     }
   },
   onScreenshot: (id) => {
@@ -131,9 +132,7 @@ const { focusedId } = useKeyboardNav(eventUuids, {
         toBlob(el as HTMLElement)
           .then((blob) => {
             if (blob) {
-              navigator.clipboard
-                .write([new ClipboardItem({ [blob.type]: blob })])
-                .then(() => showToast('Screenshot copied'))
+              copyBlobToClipboard(blob).then(() => showToast('Screenshot copied'))
             }
           })
           .finally(() => {