Fix: Sanitise comment data (#2343)

* fix: sanitise row comment description Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: add dom purify and sanitize content - Add DOMPurify in nuxt - On update value encode html tags to render as text in comment Signed-off-by: Pranav C <pranavxc@gmail.com> * fix: add missing dependency Signed-off-by: Pranav C <pranavxc@gmail.com>
nocodb · Jun 13, 2022 · 362f8f0 · 362f8f0
1 parent b1f785b
commit 362f8f0
Show file tree

Hide file tree

Showing 9 changed files with 1,725 additions and 40 deletions.
diff --git a/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/RowsXcDataTable.vue
@@ -755,6 +755,7 @@ import Pagination from '~/components/project/spreadsheet/components/Pagination'
 import ColumnFilter from '~/components/project/spreadsheet/components/ColumnFilterMenu'
 import MoreActions from '~/components/project/spreadsheet/components/MoreActions'
 import ShareViewMenu from '~/components/project/spreadsheet/components/ShareViewMenu'
+import getPlainText from '~/components/project/spreadsheet/helpers/getPlainText'
 
 export default {
   name: 'RowsXcDataTable',
@@ -1217,8 +1218,8 @@ export default {
               fk_model_id: this.meta.id,
               column_name: column.title,
               row_id: id,
-              value: rowObj[column.title],
-              prev_value: oldRow[column.title]
+              value: getPlainText(rowObj[column.title]),
+              prev_value: getPlainText(oldRow[column.title])
             })
             .then(() => {})
 

diff --git a/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue b/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
@@ -242,9 +242,9 @@
 
                       <p
                         v-else
+                        v-dompurify-html="log.details"
                         class="caption mb-0"
                         style="word-break: break-all"
-                        v-html="log.details"
                       />
 
                       <p class="time text-right mb-0">
@@ -329,6 +329,7 @@ import EditableCell from '~/components/project/spreadsheet/components/EditableCe
 import colors from '@/mixins/colors'
 import VirtualCell from '~/components/project/spreadsheet/components/VirtualCell'
 import VirtualHeaderCell from '~/components/project/spreadsheet/components/VirtualHeaderCell'
+import getPlainText from '~/components/project/spreadsheet/helpers/getPlainText'
 
 const relativeTime = require('dayjs/plugin/relativeTime')
 const utc = require('dayjs/plugin/utc')
@@ -555,8 +556,8 @@ export default {
                 fk_model_id: this.meta.id,
                 column_name: key,
                 row_id: id,
-                value: updatedObj[key],
-                prev_value: this.oldRow[key]
+                value: getPlainText(updatedObj[key]),
+                prev_value: getPlainText(this.oldRow[key])
               })
               .then(() => {
               })

diff --git a/packages/nc-gui/components/project/spreadsheet/helpers/getPlainText.js b/packages/nc-gui/components/project/spreadsheet/helpers/getPlainText.js
@@ -0,0 +1,5 @@
+export default function getPlainText(htmlString) {
+  const div = document.createElement('div')
+  div.textContent = htmlString || ''
+  return div.innerHTML
+}
diff --git a/packages/nc-gui/nuxt.config.js b/packages/nc-gui/nuxt.config.js
@@ -66,6 +66,10 @@ export default {
       src: '~plugins/confetti.js',
       ssr: false
     },
+    {
+      src: '~plugins/domPurify.js',
+      ssr: false
+    },
     {
       src: '~plugins/axiosInterceptor.js',
       ssr: false