djm-ui 0.67.4 → 0.73.0

package/src/utils/sanitize-html.js

@@ -17,7 +17,13 @@ const TAGS = new Set([
 ])
 
 // 通用属性
-const GLOBAL_ATTRS = new Set(['class', 'title'])
+const GLOBAL_ATTRS = new Set(['class', 'title', 'style'])
+
+// 富文本用到的内联样式白名单：只放行排版类属性，避免靠样式做定位或引外部资源
+const STYLE_PROPS = new Set([
+  'color', 'background-color', 'font-size', 'font-weight', 'font-style',
+  'text-decoration', 'text-align', 'text-indent', 'line-height'
+])
 
 // 各标签额外允许的属性
 const TAG_ATTRS = {
@@ -28,13 +34,39 @@ const TAG_ATTRS = {
   td: new Set(['colspan', 'rowspan'])
 }
 
+// 逐条过滤样式声明，丢掉白名单之外的属性与可疑取值
+function cleanStyle (value) {
+  return String(value || '')
+    .split(';')
+    .map((item) => {
+      const index = item.indexOf(':')
+      if (index === -1) return ''
+      const name = item.slice(0, index).trim().toLowerCase()
+      const val = item.slice(index + 1).trim()
+      if (!STYLE_PROPS.has(name)) return ''
+      if (/url\s*\(|expression\s*\(|javascript:/i.test(val)) return ''
+      return name + ': ' + val
+    })
+    .filter(Boolean)
+    .join('; ')
+}
+
+// 允许的协议：相对地址没有协议，直接放行
+const SAFE_SCHEMES = new Set(['http', 'https', 'mailto', 'tel'])
+
 function safeUrl (value, tag) {
   // 浏览器解析 URL 时会忽略换行、制表符等控制字符，先去掉再判断协议
-  const url = String(value || '').replace(/[\u0000-\u0020]+/g, '').toLowerCase()
-  if (url.startsWith('javascript:') || url.startsWith('vbscript:')) return false
-  // data: 只允许图片，且只能用于 img，避免链接跳到可执行的 SVG
-  if (url.startsWith('data:')) return tag === 'img' && url.startsWith('data:image/')
-  return true
+  const url = String(value || '').replace(/[\u0000-\u0020]+/g, '')
+  const scheme = url.match(/^([a-z][a-z0-9+.-]*):/i)
+  if (!scheme) return true
+  const name = scheme[1].toLowerCase()
+  if (SAFE_SCHEMES.has(name)) return true
+  // 图片额外允许 blob 与 data:image；data:text/html 这类一律拒绝
+  if (tag === 'img') {
+    if (name === 'blob') return true
+    if (name === 'data' && /^data:image\//i.test(url)) return true
+  }
+  return false
 }
 
 function cleanNode (node) {
@@ -63,6 +95,12 @@ function cleanNode (node) {
         child.removeAttribute(attr.name)
         return
       }
+      if (name === 'style') {
+        const style = cleanStyle(attr.value)
+        if (style) child.setAttribute('style', style)
+        else child.removeAttribute('style')
+        return
+      }
       if ((name === 'href' || name === 'src') && !safeUrl(attr.value, tag)) {
         child.removeAttribute(attr.name)
       }

package/types/index.d.ts

@@ -133,10 +133,13 @@ export const DjmCard: DefineComponent<{
 
 export const DjmProgress: DefineComponent<{
   percent?: number
+  type?: 'line' | 'circle'
   status?: '' | 'success' | 'error' | 'warning'
   showText?: boolean
   strokeWidth?: number
   color?: string
+  size?: number
+  label?: string
 }>
 
 export const DjmSkeleton: DefineComponent<{
@@ -312,7 +315,11 @@ export const DjmAlert: DefineComponent<{
 export const DjmSpin: DefineComponent<{
   spinning?: boolean
   size?: string
+  type?: 'ring' | 'dots' | 'bars' | 'pulse'
   tip?: string
+  delay?: number
+  fullscreen?: boolean
+  color?: string
 }>
 
 export const DjmPopconfirm: DefineComponent<{
@@ -944,6 +951,7 @@ export const DjmModal: DefineComponent<{
   showClose?: boolean
   closeOnEsc?: boolean
   fullscreen?: boolean
+  glass?: boolean
 }, {}, {}, {}, {}, {}, {}, DjmModalEmits>
 
 export const DjmDrawer: DefineComponent<{
@@ -954,6 +962,7 @@ export const DjmDrawer: DefineComponent<{
   maskClosable?: boolean
   showClose?: boolean
   closeOnEsc?: boolean
+  glass?: boolean
 }, {}, {}, {}, {}, {}, {}, DjmModalEmits>
 
 export type DjmConfirmDialogEmits = {
@@ -1117,6 +1126,7 @@ export const DjmTreeSelect: DefineComponent<{
 
 export type DjmRichEditorEmits = {
   'update:modelValue': (html: string) => void
+  'upload-error': (payload: { file: File, message: string }) => void
 }
 
 export const DjmRichEditor: DefineComponent<{
@@ -1125,6 +1135,13 @@ export const DjmRichEditor: DefineComponent<{
   minHeight?: number
   sanitize?: boolean
   disabled?: boolean
+  toolbar?: 'simple' | 'basic' | 'full' | Array<'history' | 'format' | 'inline' | 'color' | 'align' | 'list' | 'insert' | 'view'>
+  uploadImage?: ((file: File) => Promise<string | { url: string }>) | null
+  media?: Array<string | { id?: string | number, url: string, name?: string }>
+  accept?: string
+  maxImageSize?: number
+  multiple?: boolean
+  showCount?: boolean
 }, {}, {}, {}, {}, {}, {}, DjmRichEditorEmits>
 
 /* ---------------- 业务组件 ---------------- */