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

TencentBlueKing · Oct 8, 2024 · 661be07 · 661be07
1 parent 9637f77
commit 661be07
Show file tree

Hide file tree

Showing 18 changed files with 87 additions and 33 deletions.
diff --git a/src/dashboard-front/package.json b/src/dashboard-front/package.json
@@ -25,8 +25,8 @@
     "@blueking/bkui-form": "1.0.0-beta.5",
     "@blueking/login-modal": "^1.0.3",
     "@blueking/notice-component": "^2.0.2",
-    "@blueking/release-note": "0.0.1-beta.16",
     "@blueking/platform-config": "^1.0.3",
+    "@blueking/release-note": "0.0.1-beta.16",
     "art-template": "^4.13.2",
     "bkui-vue": "1.0.3-beta.58",
     "connect-history-api-fallback": "^2.0.0",
@@ -52,6 +52,7 @@
     "semver": "^7.6.0",
     "transliteration": "^2.3.5",
     "vue": "^3.4.27",
+    "vue-dompurify-html": "^5.1.0",
     "vue-i18n": "^9.5.0",
     "vue-router": "^4.1.6"
   },
@@ -85,8 +86,8 @@
     "sass": "^1.52.3",
     "sass-loader": "^13.0.0",
     "ts-loader": "^9.5.1",
-    "typescript": "5.4.5",
-    "vue-eslint-parser": "^9.4.2"
+    "typescript": "5.3.3",
+    "vue-eslint-parser": "^9.4.3"
   },
   "engines": {
     "node": ">= 14.16.1",

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
@@ -16,6 +16,7 @@ import bkui from 'bkui-vue';
 import 'bkui-vue/dist/style.css';
 // 图标
 import './assets/iconfont/style.css';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
 
 const app = createApp(App);
 app.config.globalProperties.GLOBAL_CONFIG = globalConfig;
@@ -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/apigwDocs/components/detail.vue b/src/dashboard-front/src/views/apigwDocs/components/detail.vue
@@ -78,9 +78,13 @@
                         :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,12 @@
             </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 +97,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,14 @@
                           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,12 @@
             </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 +82,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/resources-doc/index.vue b/src/dashboard-front/src/views/components/resources-doc/index.vue
@@ -42,7 +42,11 @@
           </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">
           <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/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
@@ -3621,6 +3621,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"
@@ -8164,7 +8169,12 @@ typed-array-length@^1.0.4:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typescript@5.4.5, typescript@^5.1.6, typescript@^5.3.2:
+typescript@5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
+  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
+
+typescript@^5.1.6, typescript@^5.3.2:
   version "5.4.5"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz"
   integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
@@ -8307,6 +8317,13 @@ vue-demi@>=0.14.5:
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz"
   integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
 
+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"
@@ -8320,6 +8337,19 @@ vue-eslint-parser@^9.3.1, vue-eslint-parser@^9.4.2:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-eslint-parser@^9.4.3:
+  version "9.4.3"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz#9b04b22c71401f1e8bca9be7c3e3416a4bde76a8"
+  integrity sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==
+  dependencies:
+    debug "^4.3.4"
+    eslint-scope "^7.1.1"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.3.1"
+    esquery "^1.4.0"
+    lodash "^4.17.21"
+    semver "^7.3.6"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz"