refactor(v-html): 过滤v-html内容防范XSS攻击

# Reviewed, transaction id: 19674
TencentBlueKing · Sep 29, 2024 · 1cca8d2 · 1cca8d2
1 parent ebcd556
commit 1cca8d2
Show file tree

Hide file tree

Showing 26 changed files with 56 additions and 41 deletions.
diff --git a/src/dashboard-front/package.json b/src/dashboard-front/package.json
@@ -57,6 +57,7 @@
     "semver": "^7.6.3",
     "transliteration": "^2.3.5",
     "vue": "^3.4.38",
+    "vue-dompurify-html": "^5.1.0",
     "vue-i18n": "^9.14.0",
     "vue-router": "^4.4.3"
   },

diff --git a/src/dashboard-front/src/components/version-diff/index.vue b/src/dashboard-front/src/components/version-diff/index.vue
@@ -217,7 +217,7 @@
                   <DownShape class="expand-icon" v-else />
                   <span
                     class="vm resource-title"
-                    v-html="renderTitle(addItem)"
+                    v-dompurify-html="renderTitle(addItem)"
                     :title="`【${addItem?.method}】${addItem?.path}`"
                   ></span>
                 </div>
@@ -249,7 +249,7 @@
                   <DownShape class="expand-icon" v-else />
                   <span
                     class="vm resource-title"
-                    v-html="renderTitle(deleteItem)"
+                    v-dompurify-html="renderTitle(deleteItem)"
                     :title="`【${deleteItem?.method}】${deleteItem?.path}`"
                   ></span>
                 </div>
@@ -275,7 +275,7 @@
                   <DownShape class="expand-icon" v-else />
                   <span
                     class="vm resource-title"
-                    v-html="renderTitle(deleteItem)"
+                    v-dompurify-html="renderTitle(deleteItem)"
                     :title="`【${deleteItem?.method}】${deleteItem?.path}`"
                   ></span>
                 </div>
@@ -311,7 +311,7 @@
                   <DownShape class="expand-icon" v-else />
                   <span
                     class="vm resource-title"
-                    v-html="renderTitle(updateItem.source)"
+                    v-dompurify-html="renderTitle(updateItem.source)"
                     :title="`【${updateItem?.source?.method}】${updateItem?.source?.path}`"
                   ></span>
                 </div>
@@ -340,7 +340,7 @@
                   <DownShape class="expand-icon" v-else />
                   <span
                     class="vm resource-title"
-                    v-html="renderTitle(updateItem.target)"
+                    v-dompurify-html="renderTitle(updateItem.target)"
                     :title="`【${updateItem?.target?.method}】${updateItem?.target?.path}`"
                   ></span>
                 </div>

diff --git a/src/dashboard-front/src/main.ts b/src/dashboard-front/src/main.ts
@@ -8,6 +8,7 @@ import globalConfig from '@/constant/config';
 import directive from '@/directive/index';
 import mavonEditor from 'mavon-editor';
 import 'mavon-editor/dist/css/index.css';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
 
 // 全量引入 bkui-vue
 import bkui from 'bkui-vue';
@@ -29,4 +30,5 @@ app.use(i18n)
   // .directive('overflowTitle', overflowTitle)
   // .directive('bkTooltips', bkTooltips)
   .use(mavonEditor)
+  .use(VueDOMPurifyHTML)
   .mount('.app');
diff --git a/src/dashboard-front/src/views/apiDocs/components/component-searcher.vue b/src/dashboard-front/src/views/apiDocs/components/component-searcher.vue
@@ -30,9 +30,9 @@
                 <a href="javascript:;">
                   <p class="name">
                     <!-- eslint-disable-next-line vue/no-v-html -->
-                    <strong class="mr5" v-html="hightlightSystemName(item)"></strong>
+                    <strong class="mr5" v-dompurify-html="hightlightSystemName(item)"></strong>
                     <!-- eslint-disable-next-line vue/no-v-html -->
-                    <span v-html="hightlight(item)"></span>
+                    <span v-dompurify-html="hightlight(item)"></span>
                   </p>
                   <p class="desc">{{ item.description || t('暂无描述') }}</p>
                 </a>

diff --git a/src/dashboard-front/src/views/apiDocs/components/doc-detail-main-content.vue b/src/dashboard-front/src/views/apiDocs/components/doc-detail-main-content.vue
@@ -52,7 +52,7 @@
         <!--  API markdown 文档  -->
         <article v-if="markdownHtml" class="res-detail-content">
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <div class="ag-markdown-view" id="resMarkdown" v-html="markdownHtml"></div>
+          <div class="ag-markdown-view" id="resMarkdown" v-dompurify-html="markdownHtml"></div>
         </article>
       </main>
     </main>

diff --git a/src/dashboard-front/src/views/apiDocs/components/sdk-instruction-content.vue b/src/dashboard-front/src/views/apiDocs/components/sdk-instruction-content.vue
@@ -13,7 +13,7 @@
       <bk-button class="is-selected" style="width: 150px">Python</bk-button>
     </div>
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <div v-if="sdkDoc" class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-html="markdownHtml"></div>
+    <div v-if="sdkDoc" class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-dompurify-html="markdownHtml"></div>
     <bk-exception
       v-else
       class="exception-wrap-item exception-part"

diff --git a/src/dashboard-front/src/views/apiDocs/doc-detail.vue b/src/dashboard-front/src/views/apiDocs/doc-detail.vue
@@ -113,10 +113,10 @@
                         @click="handleApiClick(api.id)"
                       >
                         <!-- eslint-disable-next-line vue/no-v-html -->
-                        <header class="res-item-name" v-html="getHighlightedHtml(api.name)" v-bk-overflow-tips
+                        <header class="res-item-name" v-dompurify-html="getHighlightedHtml(api.name)" v-bk-overflow-tips
                         ></header>
                         <!-- eslint-disable-next-line vue/no-v-html -->
-                        <main class="res-item-desc" v-html="getHighlightedHtml(api.description)"></main>
+                        <main class="res-item-desc" v-dompurify-html="getHighlightedHtml(api.description)"></main>
                       </article>
                     </template>
                     <template v-else-if="keyword">

diff --git a/src/dashboard-front/src/views/apigwDocs/components/detail.vue b/src/dashboard-front/src/views/apigwDocs/components/detail.vue
@@ -78,9 +78,9 @@
                         :class="{ 'active': curComponentName === component.name }"
                         @click="handleShowDoc(component)">
                         <!-- eslint-disable-next-line vue/no-v-html -->
-                        <p class="name" v-html="hightlight(component.name)" v-bk-overflow-tips></p>
+                        <p class="name" v-dompurify-html="hightlight(component.name)" v-bk-overflow-tips></p>
                         <!-- eslint-disable-next-line vue/no-v-html -->
-                        <p class="label" v-html="hightlight(component.description) || $t('暂无描述')" v-bk-overflow-tips>
+                        <p class="label" v-dompurify-html="hightlight(component.description) || $t('暂无描述')" v-bk-overflow-tips>
                         </p>
                       </li>
                     </ul>

diff --git a/src/dashboard-front/src/views/apigwDocs/components/doc.vue b/src/dashboard-front/src/views/apigwDocs/components/doc.vue
@@ -67,7 +67,7 @@
             </div>
           </div>
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <div class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-html="curComponent.markdownHtml"></div>
+          <div class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-dompurify-html="curComponent.markdownHtml"></div>
         </bk-tab-panel>
         <bk-tab-panel
           :name="'sdk'"
@@ -92,7 +92,7 @@
 
             <h3 class="f16 mt20"> {{ $t('SDK使用样例') }} </h3>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div class="ag-markdown-view mt20" :key="renderHtmlIndex" v-html="sdkMarkdownHtml"></div>
+            <div class="ag-markdown-view mt20" :key="renderHtmlIndex" v-dompurify-html="sdkMarkdownHtml"></div>
           </div>
         </bk-tab-panel>
       </bk-tab>

diff --git a/src/dashboard-front/src/views/basic-info/index.vue b/src/dashboard-front/src/views/basic-info/index.vue
@@ -188,7 +188,7 @@
       @closed="delApigwDialog.isShow = false">
       <div class="ps-form">
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="form-tips" v-html="delTips" />
+        <div class="form-tips" v-dompurify-html="delTips" />
         <div class="mt15">
           <bk-input v-model="formRemoveConfirmApigw"></bk-input>
         </div>

diff --git a/src/dashboard-front/src/views/component-doc/components/detail.vue b/src/dashboard-front/src/views/component-doc/components/detail.vue
@@ -33,9 +33,9 @@
               :class="{ 'active': curComponentName === component.name }" v-for="component of curComponentList"
               :key="component.id" @click="handleShowDoc(component)">
               <!-- eslint-disable-next-line vue/no-v-html -->
-              <p class="name" v-html="hightlight(component.name, 'api')"></p>
+              <p class="name" v-dompurify-html="hightlight(component.name, 'api')"></p>
               <!-- eslint-disable-next-line vue/no-v-html -->
-              <p class="label" v-html="hightlight(component.description, 'api')"></p>
+              <p class="label" v-dompurify-html="hightlight(component.description, 'api')"></p>
             </li>
           </ul>
           <template v-else-if="keyword">
@@ -85,11 +85,11 @@
                           params: { version: curVersionData.board, id: item.name }
                         }">
                         <!-- eslint-disable-next-line vue/no-v-html -->
-                        <span v-html="hightlight(item.description, 'panel')" @click="isNavPanelShow = false"></span>
+                        <span v-dompurify-html="hightlight(item.description, 'panel')" @click="isNavPanelShow = false"></span>
                       </router-link>
                       <p class="desc">
                         <!-- eslint-disable-next-line vue/no-v-html -->
-                        <span v-html="hightlight(item.name, 'panel')"></span>
+                        <span v-dompurify-html="hightlight(item.name, 'panel')"></span>
                       </p>
                     </li>
                   </ul>

diff --git a/src/dashboard-front/src/views/component-doc/components/doc.vue b/src/dashboard-front/src/views/component-doc/components/doc.vue
@@ -54,7 +54,7 @@
             </div>
           </div>
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <div class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-html="curComponent.markdownHtml"></div>
+          <div class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-dompurify-html="curComponent.markdownHtml"></div>
         </bk-tab-panel>
         <bk-tab-panel
           :name="'sdk '"
@@ -77,7 +77,7 @@
             </div>
             <h3 class="f16 mt30 fw700 mt15 mb15 balck">{{ t('SDK使用样例') }}</h3>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div class="ag-markdown-view mt20" :key="renderHtmlIndex" v-html="sdkMarkdownHtml"></div>
+            <div class="ag-markdown-view mt20" :key="renderHtmlIndex" v-dompurify-html="sdkMarkdownHtml"></div>
           </div>
         </bk-tab-panel>
       </bk-tab>

diff --git a/src/dashboard-front/src/views/component-doc/components/searcher/index.vue b/src/dashboard-front/src/views/component-doc/components/searcher/index.vue
@@ -29,9 +29,9 @@
                 <a href="javascript:;">
                   <p class="name">
                     <!-- eslint-disable-next-line vue/no-v-html -->
-                    <strong class="mr5" v-html="hightlightSystemName(item)"></strong>
+                    <strong class="mr5" v-dompurify-html="hightlightSystemName(item)"></strong>
                     <!-- eslint-disable-next-line vue/no-v-html -->
-                    <span v-html="hightlight(item)"></span>
+                    <span v-dompurify-html="hightlight(item)"></span>
                   </p>
                   <p class="desc">{{ item.description || t('暂无描述') }}</p>
                 </a>

diff --git a/src/dashboard-front/src/views/components-access/manage/components/render-system.vue b/src/dashboard-front/src/views/components-access/manage/components/render-system.vue
@@ -33,15 +33,15 @@
             <p class="name">
               <span class="title-wrapper">
                 <!-- eslint-disable-next-line vue/no-v-html -->
-                <span v-html="highlight(item)"></span>
+                <span v-dompurify-html="highlight(item)"></span>
               </span>
               <span v-if="item.is_official" class="tag">
                 {{ t('官方') }}
               </span>
               <span class="count fr">{{ item.component_count }}</span>
             </p>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <p class="desc" v-html="highlightDesc(item)"></p>
+            <p class="desc" v-dompurify-html="highlightDesc(item)"></p>
           </div>
         </template>
         <template v-else>

diff --git a/src/dashboard-front/src/views/components-access/manage/components/sync-access.vue b/src/dashboard-front/src/views/components-access/manage/components/sync-access.vue
@@ -5,11 +5,11 @@
         <p class="ag-table-change">
           {{ t('请确认以下组件对应网关资源的变更：') }}
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <span v-html="addInfo"></span>
+          <span v-dompurify-html="addInfo"></span>
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <span v-html="updateInfo"></span>
+          <span v-dompurify-html="updateInfo"></span>
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <span v-html="deleteInfo"></span>
+          <span v-dompurify-html="deleteInfo"></span>
         </p>
         <bk-input
           :clearable="true"

diff --git a/src/dashboard-front/src/views/components-access/system/index.vue b/src/dashboard-front/src/views/components-access/system/index.vue
@@ -128,7 +128,7 @@
         <div
           class="ft13"
           style="margin: 8px 0"
-          v-html="systemDelTips"
+          v-dompurify-html="systemDelTips"
         ></div>
         <bk-input v-model="formRemoveConfirmCode" />
         <div class="mt10 ft13">

diff --git a/src/dashboard-front/src/views/components/plugin-manage/plugin-info.vue b/src/dashboard-front/src/views/components/plugin-manage/plugin-info.vue
@@ -124,7 +124,7 @@
       </header>
       <main class="example-main">
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <pre class="example-pre" v-html="exampleHtml"></pre>
+        <pre class="example-pre" v-dompurify-html="exampleHtml"></pre>
       </main>
     </aside>
   </div>

diff --git a/src/dashboard-front/src/views/components/resource-doc-slider/index.vue b/src/dashboard-front/src/views/components/resource-doc-slider/index.vue
@@ -58,7 +58,7 @@
                 </p>
               </div>
               <!-- eslint-disable vue/no-v-html -->
-              <div class="ag-markdown-view" v-html="markdownHtml" v-show="!isEdited"></div>
+              <div class="ag-markdown-view" v-dompurify-html="markdownHtml" v-show="!isEdited"></div>
               <div class="ag-markdown-editor" v-show="isEdited">
                 <mavon-editor
                   ref="markdownRef"

diff --git a/src/dashboard-front/src/views/components/resources-doc/index.vue b/src/dashboard-front/src/views/components/resources-doc/index.vue
@@ -46,7 +46,7 @@
           </p>
         </div>
         <!-- eslint-disable vue/no-v-html -->
-        <div class="ag-markdown-view" v-html="markdownHtml" v-show="!isEdited" style="padding-bottom: 54px;"></div>
+        <div class="ag-markdown-view" v-dompurify-html="markdownHtml" v-show="!isEdited" style="padding-bottom: 54px;"></div>
         <div class="ag-markdown-editor" v-show="isEdited">
           <mavon-editor
             ref="markdownRef"

diff --git a/src/dashboard-front/src/views/home.vue b/src/dashboard-front/src/views/home.vue
@@ -140,7 +140,7 @@
       </div>
       Copyright © 2012-{{curYear}} Tencent BlueKing. All Rights Reserved. V{{GLOBAL_CONFIG.FOOT_INFO.VERSION}} -->
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <p class="contact" v-html="contact"></p>
+      <p class="contact" v-dompurify-html="contact"></p>
       <p class="copyright">{{copyright}}</p>
     </div>
 

diff --git a/src/dashboard-front/src/views/online-debug/components/doc.vue b/src/dashboard-front/src/views/online-debug/components/doc.vue
@@ -56,7 +56,7 @@
             </div>
           </div>
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <div class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-html="curComponent.markdownHtml"></div>
+          <div class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-dompurify-html="curComponent.markdownHtml"></div>
         </bk-tab-panel>
         <!-- <bk-tab-panel
           :name="'sdk'"
@@ -80,7 +80,7 @@
             </div>
 
             <h3 class="f16 mt20"> {{ t('SDK使用样例') }} </h3>
-            <div class="ag-markdown-view mt20" :key="renderHtmlIndex" v-html="sdkMarkdownHtml"></div>
+            <div class="ag-markdown-view mt20" :key="renderHtmlIndex" v-dompurify-html="sdkMarkdownHtml"></div>
           </div>
         </bk-tab-panel> -->
       </bk-tab>

diff --git a/src/dashboard-front/src/views/online-debug/index.vue b/src/dashboard-front/src/views/online-debug/index.vue
@@ -55,9 +55,9 @@
                       :class="{ 'active': curComponentName === component.name }"
                       @click="handleShowDoc(component)">
                       <!-- eslint-disable-next-line vue/no-v-html -->
-                      <p class="name" v-html="hightlight(component.name)" v-bk-overflow-tips></p>
+                      <p class="name" v-dompurify-html="hightlight(component.name)" v-bk-overflow-tips></p>
                       <!-- eslint-disable-next-line vue/no-v-html -->
-                      <p class="label" v-html="hightlight(component.description) || t('暂无描述')" v-bk-overflow-tips>
+                      <p class="label" v-dompurify-html="hightlight(component.description) || t('暂无描述')" v-bk-overflow-tips>
                       </p>
                     </li>
                   </ul>

diff --git a/src/dashboard-front/src/views/operate-data/access-log/detail.vue b/src/dashboard-front/src/views/operate-data/access-log/detail.vue
@@ -6,7 +6,7 @@
     <div class="access-log-container">
       <div class="detail-panel" v-show="!hasError">
         <div class="panel-hd">
-          <h2 class="title" v-html="titleInfo"></h2>
+          <h2 class="title" v-dompurify-html="titleInfo"></h2>
           <small class="time">{{transformTime(+routeQuery.bk_timestamp)}}</small>
         </div>
         <div class="panel-bd">

diff --git a/src/dashboard-front/src/views/resource/version/components/resourceDetail.vue b/src/dashboard-front/src/views/resource/version/components/resourceDetail.vue
@@ -28,7 +28,7 @@
                     @click="changeCurrentSource(item)"
                   >
                     <bk-overflow-title type="tips">
-                      <span v-html="renderTitle(item.name)"></span>
+                      <span v-dompurify-html="renderTitle(item.name)"></span>
                     </bk-overflow-title>
                   </div>
                 </template>

diff --git a/src/dashboard-front/src/views/sdk/components/sdk-detail.vue b/src/dashboard-front/src/views/sdk/components/sdk-detail.vue
@@ -96,7 +96,7 @@
           <!-- <bk-button disabled>GO</bk-button> -->
         </div>
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-html="markdownHtml"></div>
+        <div class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-dompurify-html="markdownHtml"></div>
       </bk-tab-panel>
     </bk-tab>
 

diff --git a/src/dashboard-front/yarn.lock b/src/dashboard-front/yarn.lock
@@ -3764,6 +3764,11 @@ domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
+dompurify@^3.0.0:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.7.tgz#711a8c96479fb6ced93453732c160c3c72418a6a"
+  integrity sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==
+
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz"
@@ -8567,6 +8572,13 @@ vue-demi@>=0.14.10, vue-demi@^0.14.10:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
   integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
 
+vue-dompurify-html@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/vue-dompurify-html/-/vue-dompurify-html-5.1.0.tgz#7f720ad0043804642af7d65d4e002c574ce3c951"
+  integrity sha512-616o2/PBdOLM2bwlRWLdzeEC9NerLkwiudqNgaIJ5vBQWXec+u7Kuzh+45DtQQrids67s4pHnTnJZLVfyPMxbA==
+  dependencies:
+    dompurify "^3.0.0"
+
 vue-eslint-parser@^9.3.1, vue-eslint-parser@^9.4.2:
   version "9.4.2"
   resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz"