feat: 修复xss漏洞

WeBankFinTech · Oct 16, 2024 · ee9c9a4 · ee9c9a4
1 parent eda6fba
commit ee9c9a4
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json
@@ -30,6 +30,7 @@
     "peerDependencies": {
         "@fesjs/fes": "^3.1.13",
         "@fesjs/fes-design": ">=0.7.0",
+        "dompurify": "^3.1.7",
         "vue": "^3.2.47",
         "vue-router": "^4.0.1"
     },

diff --git a/packages/fes-plugin-layout/src/runtime/helpers/svg.js b/packages/fes-plugin-layout/src/runtime/helpers/svg.js
@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 const isStr = function (str) {
     return typeof str === 'string';
 };
@@ -26,7 +28,7 @@ export function isValid(elm) {
 
 export function validateContent(svgContent) {
     const div = document.createElement('div');
-    div.innerHTML = svgContent;
+    div.innerHTML = DOMPurify.sanitize(svgContent);
 
     // setup this way to ensure it works on our buddy IE
     for (let i = div.childNodes.length - 1; i >= 0; i--) {

diff --git a/packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue b/packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue
@@ -1,11 +1,11 @@
 <script lang="jsx">
-import { ref, onBeforeMount, isVNode } from 'vue';
-// eslint-disable-next-line import/extensions
+import { isVNode, onBeforeMount, ref } from 'vue';
+
 import Icons from '../icons';
 import { validateContent } from '../helpers/svg';
 
 const urlReg = /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
-const isUrlResource = (name) => urlReg.test(name) || name.includes('.svg');
+const isUrlResource = name => urlReg.test(name) || name.includes('.svg');
 
 export default {
     props: {
@@ -25,7 +25,8 @@ export default {
                             });
                         }
                     });
-                } else {
+                }
+                else {
                     AIconComponent.value = Icons[props.icon];
                 }
             }
@@ -39,13 +40,14 @@ export default {
                 return <AIconComponent.value />;
             }
             if (AText.value) {
-                return <span class={'fes-layout-icon'} innerHTML={AText.value}></span>;
+                return <span class="fes-layout-icon" innerHTML={AText.value}></span>;
             }
             return null;
         };
     },
 };
 </script>
+
 <style>
 .fes-layout-icon {
     display: inline-block;

diff --git a/packages/fes-template/src/app.jsx b/packages/fes-template/src/app.jsx
@@ -9,7 +9,7 @@ export const beforeRender = {
         const { setRole, getRole } = accessApi;
         return new Promise((resolve) => {
             setTimeout(() => {
-                setRole('menuTest');
+                setRole('admin');
                 resolve({
                     userName: '李雷',
                 });

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml