Merge pull request #4596 from dataease/pr@dev@refactor_xss-attack

refactor: 仪表板防范XSS攻击 #4585

frontend/package.json

@@ -88,7 +88,8 @@
     "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",
     "webpack": "^4.46.0",
-    "xlsx": "^0.17.0"
+    "xlsx": "^0.17.0",
+    "xss": "^1.0.14"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0-0",

frontend/src/components/canvas/customComponent/DeRichText.vue

@@ -37,6 +37,7 @@ import 'tinymce/plugins/nonbreaking'
 import 'tinymce/plugins/pagebreak'
 import { mapState } from 'vuex'
 import Vue from 'vue'
+import xssCheck from 'xss'
 
 export default {
   name: 'DeRichText',
@@ -77,7 +78,7 @@ export default {
       canEdit: false,
       // 初始化配置
       tinymceId: 'tinymce-' + this.element.id,
-      myValue: this.propValue,
+      myValue: xssCheck(this.propValue),
       init: {
         selector: '#tinymce-' + this.element.id,
         toolbar_items_size: 'small',

frontend/src/components/canvas/customComponent/DeRichTextView.vue

@@ -38,6 +38,7 @@ import 'tinymce/plugins/pagebreak'
 import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import { uuid } from 'vue-uuid'
+import xssCheck from 'xss'
 
 export default {
   name: 'DeRichTextView',
@@ -152,7 +153,7 @@ export default {
     viewInit() {
       bus.$on('fieldSelect-' + this.element.propValue.viewId, this.fieldSelect)
       tinymce.init({})
-      this.myValue = this.assignment(this.element.propValue.textValue)
+      this.myValue = xssCheck(this.assignment(this.element.propValue.textValue))
       bus.$on('initCurFields-' + this.element.id, this.initCurFieldsChange)
       this.$nextTick(() => {
         this.initReady = true

frontend/src/components/canvas/customComponent/VText.vue

@@ -18,7 +18,7 @@
       @mousedown="handleMousedown"
       @blur="handleBlur"
       @input="handleInput"
-      v-html="element.propValue"
+      v-html="$xss(element.propValue)"
     />
     <div
       v-if="!canEdit"
@@ -28,7 +28,7 @@
       @mousedown="handleMousedown"
       @blur="handleBlur"
       @input="handleInput"
-      v-html="element.propValue"
+      v-html="$xss(element.propValue)"
     />
   </div>
   <div
@@ -37,7 +37,7 @@
   >
     <div
       :style="{ verticalAlign: element.style.verticalAlign }"
-      v-html="textInfo"
+      v-html="$xss(textInfo)"
     />
   </div>
 </template>
@@ -80,7 +80,7 @@ export default {
     },
     textInfo() {
       if (this.element && this.element.hyperlinks && this.element.hyperlinks.enable) {
-        return "<a title='" + this.element.hyperlinks.content + "' target='" + this.element.hyperlinks.openMode + "' href='" + this.element.hyperlinks.content + "'>" + this.element.propValue + '</a>'
+        return '<a title=\'' + this.element.hyperlinks.content + '\' target=\'' + this.element.hyperlinks.openMode + '\' href=\'' + this.element.hyperlinks.content + '\'>' + this.element.propValue + '</a>'
       } else {
         return this.element.propValue
       }

frontend/src/main.js

@@ -43,6 +43,12 @@ import 'video.js/dist/video-js.css'
 // 控制标签宽高成比例的指令
 import proportion from 'vue-proportion-directive'
 
+import xss from 'xss'
+// 定义全局XSS解决方法
+Object.defineProperty(Vue.prototype, '$xss', {
+  value: xss
+})
+
 Vue.config.productionTip = false
 Vue.use(VueClipboard)
 Vue.use(widgets)