Browse Source

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

pull/7605/head
Ramesh Mane 10 months ago
parent
commit
390d0fc358
  1. 15
      packages/nc-gui/components/cell/attachment/utils.ts
  2. 21
      packages/nc-gui/utils/fileUtils.ts

15
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)
}

21
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')
}
}

Loading…
Cancel
Save