diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index 1f0e5dfd8..0e859e79c 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -2,6 +2,7 @@
     import { trackEvent } from '$lib/actions/analytics';
     import { tooltip } from '$lib/actions/tooltip';
     import { clickOnEnter } from '$lib/helpers/a11y';
+    import { copy } from '$lib/helpers/copy';
     import { addNotification } from '$lib/stores/notifications';
 
     export let value: string;
@@ -9,27 +10,28 @@
 
     let content = 'Click to copy';
 
-    const copy = async () => {
-        try {
-            await navigator.clipboard.writeText(value);
+    async function handleClick() {
+        const success = await copy(value);
+
+        if (success) {
             content = 'Copied';
-        } catch (error) {
+        } else {
             addNotification({
-                message: error.message,
+                message: 'Unable to copy to clipboard',
                 type: 'error'
             });
-        } finally {
-            if (event) {
-                trackEvent('click_id_tag', {
-                    name: event
-                });
-            }
         }
-    };
+
+        if (event) {
+            trackEvent('click_id_tag', {
+                name: event
+            });
+        }
+    }
 </script>
 
 <span
-    on:click|preventDefault={copy}
+    on:click|preventDefault={handleClick}
     on:keyup={clickOnEnter}
     on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
     use:tooltip={{
diff --git a/src/lib/components/copyInput.svelte b/src/lib/components/copyInput.svelte
index 65bd6bb81..b06f1ae36 100644
--- a/src/lib/components/copyInput.svelte
+++ b/src/lib/components/copyInput.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { tooltip } from '$lib/actions/tooltip';
+    import { copy } from '$lib/helpers/copy';
 
     import { addNotification } from '$lib/stores/notifications';
 
@@ -9,13 +10,14 @@
 
     let content = 'Click to copy';
 
-    const copy = async () => {
-        try {
-            await navigator.clipboard.writeText(value);
+    const handleCopy = async () => {
+        const success = await copy(value);
+
+        if (success) {
             content = 'Copied';
-        } catch (error) {
+        } else {
             addNotification({
-                message: error.message,
+                message: 'Unable to copy to clipboard',
                 type: 'error'
             });
         }
@@ -31,7 +33,7 @@
                 type="button"
                 class="input-button"
                 aria-label="Click to copy."
-                on:click={copy}
+                on:click={handleCopy}
                 on:mouseenter={() => setTimeout(() => (content = 'Click to copy'))}
                 use:tooltip={{
                     content,
diff --git a/src/lib/helpers/copy.ts b/src/lib/helpers/copy.ts
new file mode 100644
index 000000000..6399995ea
--- /dev/null
+++ b/src/lib/helpers/copy.ts
@@ -0,0 +1,36 @@
+async function securedCopy(value: string) {
+    try {
+        await navigator.clipboard.writeText(value);
+    } catch {
+        return false;
+    }
+
+    return true;
+}
+
+function unsecuredCopy(value: string) {
+    const textArea = document.createElement('textarea');
+    textArea.value = value;
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    let success = true;
+    try {
+        document.execCommand('copy');
+    } catch {
+        success = false;
+    } finally {
+        document.body.removeChild(textArea);
+    }
+
+    return success;
+}
+
+export async function copy(value: string) {
+    // securedCopy works only in HTTPS environment.
+    // unsecuredCopy works in HTTP and only runs if securedCopy fails.
+    const success = (await securedCopy(value)) || unsecuredCopy(value);
+
+    return success;
+}