fix(SPA): 过滤 XSS

slimkit · Jan 18, 2019 · 7f9beb2 · 7f9beb2
1 parent dcd7784
commit 7f9beb2
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 15 deletions.
diff --git a/resources/spa/src/components/FeedCard/FeedCard.vue b/resources/spa/src/components/FeedCard/FeedCard.vue
@@ -20,7 +20,7 @@
           <div v-if="body.length > 0" class="m-card-con">
             <p
               :class="{needPay}"
-              class="m-text-box m-text-cut-3 feed-body"
+              class="m-text-box m-text-cut-3 feed-body m-text-pre"
               v-html="replaceURI(body)"
             />
           </div>
@@ -94,7 +94,7 @@ import { mapState } from 'vuex'
 import FeedImage from './FeedImage.vue'
 import FeedVideo from './FeedVideo.vue'
 import CommentItem from './CommentItem.vue'
-import { time2txt } from '@/filters.js'
+import { time2txt, escapeHTML } from '@/filters.js'
 import * as api from '@/api/feeds.js'
 
 export default {
@@ -212,12 +212,8 @@ export default {
   },
   methods: {
     replaceURI (str) {
-      // 脚本内容以纯文本方式显示
-      const scriptRegex = /<\s*script\s*>(.*?)<\s*\/\s*script\s*>/i
-      str = str.replace(scriptRegex, '&lt;script&gt;$1&lt;/script&gt;')
-
-      // 换行符转换
-      str = str.replace(/\n/g, '<br>')
+      // XSS filter
+      str = escapeHTML(str)
 
       const reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g
       return str

diff --git a/resources/spa/src/filters.js b/resources/spa/src/filters.js
@@ -12,6 +12,31 @@ export function plusMessageFirst (message, defaultMessage) {
   return plueMessageBundle(message, defaultMessage).getMessage()
 }
 
+/**
+ * 过滤 XSS
+ *
+ * @author mutoe <[email protected]>
+ * @export
+ * @param {string} value
+ * @returns {string}
+ */
+export function escapeHTML (value) {
+  if (typeof value !== 'string') {
+    return value
+  }
+  return value.replace(/[&<>`"'/]/g, function (result) {
+    return {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '`': '&#x60;',
+      '"': '&quot;',
+      "'": '&#x27;',
+      '/': '&#x2f;',
+    }[result]
+  })
+}
+
 /**
  * ThinkSNS Plus 消息解析器，获取顶部消息.
  *

diff --git a/resources/spa/src/page/feed/FeedDetail.vue b/resources/spa/src/page/feed/FeedDetail.vue
@@ -50,7 +50,7 @@
               @click="onFileClick(img)"
             >
           </AsyncFile>
-          <p class="m-text-box" v-html="formatBody(feedContent)" />
+          <p class="m-text-box m-text-pre" v-html="formatBody(feedContent)" />
         </div>
 
         <div class="m-box m-aln-center m-justify-bet m-art-foot">
@@ -124,6 +124,7 @@ import ArticleCard from '@/page/article/ArticleCard.vue'
 import CommentItem from '@/page/article/ArticleComment.vue'
 import ArticleLikeBadge from '@/components/common/ArticleLikeBadge.vue'
 import ArticleRewardBadge from '@/components/common/ArticleRewardBadge.vue'
+import { escapeHTML } from '@/filters'
 
 export default {
   name: 'FeedDetail',
@@ -293,12 +294,8 @@ export default {
   },
   methods: {
     formatBody (str) {
-      // 脚本内容以纯文本方式显示
-      const scriptRegex = /<\s*script\s*>(.*?)<\s*\/\s*script\s*>/i
-      str = str.replace(scriptRegex, '&lt;script&gt;$1&lt;/script&gt;')
-
-      // 换行符转换
-      str = str.replace(/\n/g, '<br>')
+      // XSS filter
+      str = escapeHTML(str)
 
       const reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g
       return str

diff --git a/resources/spa/src/style/base.less b/resources/spa/src/style/base.less
@@ -231,6 +231,9 @@ body,
   word-wrap: break-word;
   word-break: break-all;
 }
+.m-text-pre {
+  white-space: pre-wrap;
+}
 
 .m-text-box > * {
   margin: 0 0 0.375 * 16px 0;