@evolvere/sgp-ui 1.6.9 → 1.6.10

package/packages/editor/src/index.vue

@@ -3,15 +3,23 @@
 </template>
 
 <script>
+import {
+  MAX_IMAGE_COUNT,
+  MAX_IMAGE_SIZE,
+  isSafeLink,
+  isSafeMediaSource,
+  sanitizeEditorHtml,
+  validateImageFiles
+} from './html-security';
 import { validateOnlineVideo } from './video-security';
 
-let signIsEditorChange = true;
 export default {
   name: 'ElEditor',
   data() {
     return {
       editor: null,
-      editorData: ''
+      editorData: '',
+      isEditorChange: true
     };
   },
   props: {
@@ -69,7 +77,8 @@ export default {
       editor.config.uploadImgServer = '/apiv2/nfs/file/upload/wangEditor';
     }
     editor.config.showLinkImg = false;
-    editor.config.uploadImgMaxSize = 1000 * 1024 * 1024; // 100M
+    editor.config.uploadImgMaxSize = MAX_IMAGE_SIZE;
+    editor.config.uploadImgMaxLength = MAX_IMAGE_COUNT;
     editor.config.emotions = [
       {
         title: 'emoji',
@@ -83,6 +92,46 @@ export default {
       ...this.options
     };
 
+    const customPasteTextHandle = editor.config.pasteTextHandle;
+    const customLinkCheck = editor.config.linkCheck;
+    const customLinkImgCheck = editor.config.linkImgCheck;
+    const customUploadImgBefore = editor.config.uploadImgHooks && editor.config.uploadImgHooks.before;
+
+    // Security-sensitive settings cannot be relaxed through component options.
+    editor.config.uploadImgServer = '/apiv2/nfs/file/upload/wangEditor';
+    editor.config.uploadImgShowBase64 = false;
+    editor.config.showLinkImg = false;
+    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif'];
+    editor.config.uploadImgMaxSize = MAX_IMAGE_SIZE;
+    editor.config.uploadImgMaxLength = MAX_IMAGE_COUNT;
+    editor.config.withCredentials = true;
+    editor.config.pasteTextHandle = content => sanitizeEditorHtml(
+      typeof customPasteTextHandle === 'function' ? customPasteTextHandle(content) : content
+    );
+    editor.config.linkCheck = (text, link) => {
+      if (!isSafeLink(link)) return '链接地址不安全，仅支持 http、https、mailto 和 tel';
+      return typeof customLinkCheck === 'function' ? customLinkCheck(text, link) : true;
+    };
+    editor.config.linkImgCheck = (src, alt, href) => {
+      if (!isSafeMediaSource(src) || (href && !isSafeLink(href))) {
+        return '图片地址不安全';
+      }
+      return typeof customLinkImgCheck === 'function'
+        ? customLinkImgCheck(src, alt, href)
+        : true;
+    };
+    editor.config.uploadImgHooks = {
+      ...editor.config.uploadImgHooks,
+      before: (xhr, currentEditor, files) => {
+        if (!validateImageFiles(files)) {
+          return {prevent: true, msg: '仅允许上传 10 张以内、单张不超过 5MB 的 JPG、PNG 或 GIF 图片'};
+        }
+        return typeof customUploadImgBefore === 'function'
+          ? customUploadImgBefore(xhr, currentEditor, files)
+          : undefined;
+      }
+    };
+
     // wangEditor 4 inserts online-video markup with insertHTML. Always run the
     // built-in security check before an optional consumer-provided validator.
     const customOnlineVideoCheck = editor.config.onlineVideoCheck;
@@ -95,29 +144,27 @@ export default {
     };
 
     editor.config.onchange = newHtml => {
-      // this.editorData = newHtml;
-      signIsEditorChange = false;
-      this.$emit('input', newHtml);
+      const safeHtml = sanitizeEditorHtml(newHtml);
+      this.isEditorChange = false;
+      this.$emit('input', safeHtml);
       this.$nextTick(() => {
-        signIsEditorChange = true;
+        this.isEditorChange = true;
       });
-      this.$emit('change', {html: newHtml, text: editor.txt.text(), editor});
+      this.$emit('change', {html: safeHtml, text: editor.txt.text(), editor});
     };
 
     editor.config.onblur = newHtml => {
-      // this.editorData = newHtml;
-      this.$emit('blur', {html: newHtml, text: editor.txt.text(), editor});
+      this.$emit('blur', {html: sanitizeEditorHtml(newHtml), text: editor.txt.text(), editor});
     };
 
     editor.config.onfocus = newHtml => {
-      // this.editorData = newHtml;
-      this.$emit('focus', {html: newHtml, text: editor.txt.text(), editor});
+      this.$emit('focus', {html: sanitizeEditorHtml(newHtml), text: editor.txt.text(), editor});
     };
 
     editor.create();
 
     const initValue = (this.value !== undefined && this.value !== null) ? this.value : this.content;
-    editor.txt.html(initValue);
+    editor.txt.html(sanitizeEditorHtml(initValue || ''));
     if (this.disabled) {
       editor.disable();
     }
@@ -135,10 +182,16 @@ export default {
       }
     },
     value() {
-      if (this.editor && signIsEditorChange) {
-        this.editor.txt.html(this.value);
+      if (this.editor && this.isEditorChange) {
+        this.editor.txt.html(sanitizeEditorHtml(this.value || ''));
       }
     }
+  },
+  beforeDestroy() {
+    if (this.editor) {
+      this.editor.destroy();
+      this.editor = null;
+    }
   }
 };
 </script>

package/packages/editor/src/video-security.js

@@ -6,6 +6,7 @@ const ALLOWED_IFRAME_ATTRIBUTES = [
   'loading',
   'mozallowfullscreen',
   'referrerpolicy',
+  'sandbox',
   'src',
   'title',
   'webkitallowfullscreen',

package/packages/theme-chalk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evolvere/element-theme-chalk",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "description": "Element component chalk theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",

package/src/index.js

@@ -212,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '1.6.9',
+  version: '1.6.10',
   locale: locale.use,
   i18n: locale.i18n,
   install,