fix(nc-gui): use dompurify to parse img src from drag dataTransfer raw html

packages/nc-gui/components/cell/attachment/utils.ts

@@ -1,4 +1,5 @@
 import type { AttachmentReqType, AttachmentType } from 'nocodb-sdk'
+import DOMPurify from 'isomorphic-dompurify'
 import RenameFile from './RenameFile.vue'
 import {
   ColumnInj,
@@ -9,6 +10,7 @@ import {
   NOCO,
   ReadonlyInj,
   computed,
+  extractImageSrcFromRawHtml,
   inject,
   isImage,
   message,
@@ -272,9 +274,12 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       } else {
         event.preventDefault()
 
-        const imageUrl = encodeURIComponent(event.dataTransfer?.getData('text/uri-list') ?? '')
+        // Sanitize the dataTransfer HTML string
+        const sanitizedHtml = DOMPurify.sanitize(event.dataTransfer?.getData('text/html')) ?? ''
 
-        const imageData = await getImageDataFromUrl(imageUrl)
+        const imageUrl = extractImageSrcFromRawHtml(sanitizedHtml) ?? ''
+
+        const imageData = imageUrl ? await getImageDataFromUrl(imageUrl) : ''
         if (imageData) {
           await onFileSelect([], [{ ...imageData, url: imageUrl, fileName: `image.${imageData.mimetype?.split('/')[1]}` }])
         }
@@ -302,11 +307,11 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
         const response = await fetch(imageUrl)
         if (response.ok && response.headers.get('content-type')?.startsWith('image/')) {
           return {
-            mimetype: response.headers.get('content-type') ?? undefined,
-            size: +(response.headers.get('content-length') || 0) ?? undefined,
+            mimetype: response.headers.get('content-type') || undefined,
+            size: +(response.headers.get('content-length') || 0) || undefined,
           }
         }
-        throw Error('Field to parse image url')
+        throw new Error('Field to parse image url')
       } catch (err) {
         console.log(err)
       }

packages/nc-gui/utils/fileUtils.ts

@@ -4,11 +4,7 @@ const isImage = (name: string, mimetype?: string) => {
   return imageExt.some((e) => name?.toLowerCase().endsWith(`.${e}`)) || mimetype?.startsWith('image/')
 }
 
-const isImageUrl = (url: string) => {
-  return imageExt.some((e) => url?.toLowerCase()?.endsWith(`.${e}`))
-}
-
-export { isImage, imageExt, isImageUrl }
+export { isImage, imageExt }
 // Ref : https://stackoverflow.com/a/12002275
 
 // Tested in Mozilla Firefox browser, Chrome
@@ -51,3 +47,18 @@ function ieReadFile(filename: string) {
     return false
   }
 }
+
+export function extractImageSrcFromRawHtml(rawText: string) {
+  // Parse the provided HTML string
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(rawText, 'text/html')
+
+  // Extract the img element
+  const imgElement = doc.querySelector('img')
+
+  // Check if the img element exists
+  if (imgElement) {
+    // Extract the src attribute
+    return imgElement.getAttribute('src')
+  }
+}