From 6a10a81f58f055eede23e2126938f6ae37909b6e Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 31 May 2023 15:58:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=BC=95=E5=85=A5=20v-dompurify-html=20?=
 =?UTF-8?q?=E6=8C=87=E4=BB=A4=E8=A7=A3=E5=86=B3=20v-html=20=E7=9A=84?=
 =?UTF-8?q?=E5=AE=89=E5=85=A8=E9=9A=90=E6=82=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.dev                                         |  4 ++--
 package.json                                     |  1 +
 src/components/Form/src/Form.vue                 | 16 ++++++++--------
 src/main.ts                                      |  5 ++++-
 src/views/infra/build/index.vue                  |  8 ++++----
 src/views/infra/codegen/PreviewCode.vue          |  2 +-
 .../product/spu/components/DescriptionForm.vue   |  2 +-
 src/views/system/mail/log/MailLogDetail.vue      |  2 +-
 8 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/.env.dev b/.env.dev
index a52eec30..9249ced8 100644
--- a/.env.dev
+++ b/.env.dev
@@ -19,13 +19,13 @@ VITE_API_URL=/admin-api
 VITE_BASE_PATH=/
 
 # 是否删除debugger
-VITE_DROP_DEBUGGER=false
+VITE_DROP_DEBUGGER=true
 
 # 是否删除console.log
 VITE_DROP_CONSOLE=false
 
 # 是否sourcemap
-VITE_SOURCEMAP=true
+VITE_SOURCEMAP=false
 
 # 输出路径
 VITE_OUT_DIR=dist-dev
diff --git a/package.json b/package.json
index 3d9bbd75..8cdf9380 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "url": "^0.11.0",
     "video.js": "^8.3.0",
     "vue": "3.3.4",
+    "vue-dompurify-html": "^4.1.4",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.1.6",
     "vue-types": "^5.0.2",
diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue
index c1121641..3dca6c94 100644
--- a/src/components/Form/src/Form.vue
+++ b/src/components/Form/src/Form.vue
@@ -1,16 +1,16 @@
 <script lang="tsx">
-import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue'
-import { ElForm, ElFormItem, ElRow, ElCol, ElTooltip } from 'element-plus'
+import { computed, defineComponent, onMounted, PropType, ref, unref, watch } from 'vue'
+import { ElCol, ElForm, ElFormItem, ElRow, ElTooltip } from 'element-plus'
 import { componentMap } from './componentMap'
 import { propTypes } from '@/utils/propTypes'
 import { getSlot } from '@/utils/tsxHelper'
 import {
-  setTextPlaceholder,
-  setGridProp,
-  setComponentProps,
-  setItemComponentSlots,
   initModel,
-  setFormItemSlots
+  setComponentProps,
+  setFormItemSlots,
+  setGridProp,
+  setItemComponentSlots,
+  setTextPlaceholder
 } from './helper'
 import { useRenderSelect } from './components/useRenderSelect'
 import { useRenderRadio } from './components/useRenderRadio'
@@ -196,7 +196,7 @@ export default defineComponent({
               <span>{item.label}</span>
               <ElTooltip placement="right" raw-content>
                 {{
-                  content: () => <span v-html={item.labelMessage}></span>,
+                  content: () => <span v-dompurify-html={item.labelMessage}></span>,
                   default: () => (
                     <Icon
                       icon="ep:warning"
diff --git a/src/main.ts b/src/main.ts
index b37b8243..7fb836f7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -38,9 +38,10 @@ import App from './App.vue'
 import './permission'
 
 import '@/plugins/tongji' // 百度统计
-
 import Logger from '@/utils/Logger'
 
+import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
+
 // 创建实例
 const setupAll = async () => {
   const app = createApp(App)
@@ -61,6 +62,8 @@ const setupAll = async () => {
 
   await router.isReady()
 
+  app.use(VueDOMPurifyHTML)
+
   app.mount('#app')
 }
 
diff --git a/src/views/infra/build/index.vue b/src/views/infra/build/index.vue
index c26c2e6c..ec8f978c 100644
--- a/src/views/infra/build/index.vue
+++ b/src/views/infra/build/index.vue
@@ -16,20 +16,20 @@
   </ContentWrap>
 
   <!-- 弹窗：表单预览 -->
-  <Dialog :title="dialogTitle" v-model="dialogVisible" max-height="600">
-    <div ref="editor" v-if="dialogVisible">
+  <Dialog v-model="dialogVisible" :title="dialogTitle" max-height="600">
+    <div v-if="dialogVisible" ref="editor">
       <el-button style="float: right" @click="copy(formData)">
         {{ t('common.copy') }}
       </el-button>
       <el-scrollbar height="580">
         <div>
-          <pre><code class="hljs" v-html="highlightedCode(formData)"></code></pre>
+          <pre><code v-dompurify-html="highlightedCode(formData)" class="hljs"></code></pre>
         </div>
       </el-scrollbar>
     </div>
   </Dialog>
 </template>
-<script setup lang="ts" name="InfraBuild">
+<script lang="ts" name="InfraBuild" setup>
 import FcDesigner from '@form-create/designer'
 import { useClipboard } from '@vueuse/core'
 import { isString } from '@/utils/is'
diff --git a/src/views/infra/codegen/PreviewCode.vue b/src/views/infra/codegen/PreviewCode.vue
index e27d790a..c682e836 100644
--- a/src/views/infra/codegen/PreviewCode.vue
+++ b/src/views/infra/codegen/PreviewCode.vue
@@ -46,7 +46,7 @@
               {{ t('common.copy') }}
             </el-button>
             <div>
-              <pre><code class="hljs" v-html="highlightedCode(item)"></code></pre>
+              <pre><code v-dompurify-html="highlightedCode(item)" class="hljs"></code></pre>
             </div>
           </el-tab-pane>
         </el-tabs>
diff --git a/src/views/mall/product/spu/components/DescriptionForm.vue b/src/views/mall/product/spu/components/DescriptionForm.vue
index f97e4041..f7597006 100644
--- a/src/views/mall/product/spu/components/DescriptionForm.vue
+++ b/src/views/mall/product/spu/components/DescriptionForm.vue
@@ -19,7 +19,7 @@
   >
     <!-- 展示 HTML 内容 -->
     <template #description="{ row }">
-      <div style="width: 600px" v-html="row.description"></div>
+      <div v-dompurify-html="row.description" style="width: 600px"></div>
     </template>
   </Descriptions>
 </template>
diff --git a/src/views/system/mail/log/MailLogDetail.vue b/src/views/system/mail/log/MailLogDetail.vue
index 26c56bc1..13f7956a 100644
--- a/src/views/system/mail/log/MailLogDetail.vue
+++ b/src/views/system/mail/log/MailLogDetail.vue
@@ -3,7 +3,7 @@
     <Descriptions :data="detailData" :schema="allSchemas.detailSchema">
       <!-- 展示 HTML 内容 -->
       <template #templateContent="{ row }">
-        <div v-html="row.templateContent"></div>
+        <div v-dompurify-html="row.templateContent"></div>
       </template>
     </Descriptions>
   </Dialog>