fix(web-console): don't use navigator.clipboard in insecure context (#417)

Dont use navigator.clipboard in insecure context

Author: emrberk

packages/browser-tests/questdb

@@ -3,6 +3,7 @@ import styled from "styled-components"
 import { Button } from "@questdb/react-components"
 import { FileCopy } from "@styled-icons/remix-line"
 import { CheckboxCircle } from "@styled-icons/remix-fill"
+import { copyToClipboard } from "../../utils/copyToClipboard"
 
 const StyledButton = styled(Button)`
   padding: 1.2rem 0.6rem;
@@ -28,7 +29,7 @@ export const CopyButton = ({
       skin="secondary"
       data-hook="copy-value"
       onClick={(e) => {
-        navigator.clipboard.writeText(text)
+        copyToClipboard(text)
         e.stopPropagation()
         setCopied(true)
         setTimeout(() => setCopied(false), 2000)

packages/web-console/src/components/CopyButton/index.tsx

@@ -21,6 +21,7 @@
  *  limitations under the License.
  *
  ******************************************************************************/
+import { copyToClipboard } from "../../utils/copyToClipboard"
 
 const hashString = (str) => {
   let hash = 0
@@ -1703,8 +1704,7 @@ export function grid(rootElement, _paginationFn, id) {
         textToCopy = focusedCell.innerHTML
       }
 
-      navigator.clipboard
-        .writeText(textToCopy)
+      copyToClipboard(textToCopy)
         .then(undefined)
 
       activeCellPulseClearTimer = setTimeout(() => {

packages/web-console/src/js/console/grid.js

@@ -53,6 +53,7 @@ import { EventType } from "../../modules/EventBus/types"
 import { QuestContext } from "../../providers"
 import { QueryInNotification } from "../Editor/Monaco/query-in-notification"
 import { NotificationType } from "../../store/Query/types"
+import { copyToClipboard } from "../../utils/copyToClipboard"
 
 const Root = styled.div`
   display: flex;
@@ -188,8 +189,7 @@ const Result = ({ viewMode }: { viewMode: ResultViewMode }) => {
       trigger: (
         <PrimaryToggleButton
           onClick={() => {
-            navigator.clipboard
-              .writeText(gridRef?.current?.getResultAsMarkdown() as string)
+            copyToClipboard(gridRef?.current?.getResultAsMarkdown() as string)
               .then(() => {
                 setIsCopied(true)
                 setTimeout(() => setIsCopied(false), 1000)

packages/web-console/src/scenes/Result/index.tsx

@@ -25,6 +25,7 @@ import { ErrorResult } from "../../../utils"
 import { Text, Link } from "../../../components"
 import { errorWorkarounds } from "../../../utils/errorWorkarounds"
 import Joi from "joi"
+import { copyToClipboard } from "../../../utils/copyToClipboard"
 
 const StyledDialogContent = styled(Dialog.Content)`
   border-color: #723131;
@@ -229,7 +230,7 @@ export const SuspensionDialog = ({
                     <Button
                       skin="secondary"
                       onClick={() => {
-                        navigator.clipboard.writeText(
+                        copyToClipboard(
                           walTableData.errorMessage ?? "",
                         )
                       }}

packages/web-console/src/scenes/Schema/SuspensionDialog/index.tsx

@@ -37,6 +37,7 @@ import { TreeNodeKind } from "../../../components/Tree"
 import { SuspensionDialog } from '../SuspensionDialog'
 import { FileCopy, Restart } from "@styled-icons/remix-line"
 import { TABLES_GROUP_KEY, MATVIEWS_GROUP_KEY } from "../localStorageUtils"
+import { copyToClipboard } from "../../../utils/copyToClipboard"
 
 type Props = QuestDB.Table &
   Readonly<{
@@ -205,7 +206,7 @@ const Table = ({
       }
 
       if (response?.type === QuestDB.Type.DQL && response.data?.[0]?.ddl) {
-        navigator.clipboard.writeText(response.data[0].ddl)
+        copyToClipboard(response.data[0].ddl)
         dispatch(
           actions.query.addNotification({
             content: <Text color="foreground">Schema copied to clipboard</Text>,

packages/web-console/src/scenes/Schema/Table/index.tsx

@@ -1,8 +1,22 @@
-export const copyToClipboard = (text: string) => {
-  const el = document.createElement("textarea")
-  el.value = text
-  document.body.appendChild(el)
-  el.select()
-  document.execCommand("copy")
-  document.body.removeChild(el)
+export const copyToClipboard = async (textToCopy: string) => {
+  if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(textToCopy);
+  } else {
+      const textArea = document.createElement("textarea");
+      textArea.value = textToCopy;
+          
+      textArea.style.position = "absolute";
+      textArea.style.left = "-999999px";
+          
+      document.body.prepend(textArea);
+      textArea.select();
+
+      try {
+          document.execCommand('copy');
+      } catch (error) {
+          console.error(error);
+      } finally {
+          textArea.remove();
+      }
+  }
 }