refactor: move XSS protection logic to utils and update related components

Author: NoOne7135

adminforth/documentation/docs/tutorial/03-Customization/13-standardPagesTuning.md

@@ -534,7 +534,7 @@ export default {
 
 Doing so, will result in UI displaying each item of the array as a separate input corresponding to `isArray.itemType` on create and edit pages.
 
-`itemType` value can be any of `AdminForthDataTypes` except `JSON` and `RICHTEXT`.
+`itemType` value can be any of `AdminForthDataTypes` except `JSON` and `TEXT`.
 
 By default it is forbidden to store duplicate values in an array column. To change that you can add `allowDuplicateItems: true` to `isArray`, like so:
 

adminforth/spa/src/components/ValueRenderer.vue

@@ -89,7 +89,6 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import {checkEmptyValues} from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
-import sanitizeHtml from 'sanitize-html';
 import { JsonViewer } from "vue3-json-viewer";
 import "vue3-json-viewer/dist/index.css";
 import type { AdminForthResourceColumnCommon } from '@/types/Common';
@@ -108,26 +107,6 @@ const props = defineProps<{
   record: any
 }>();
 
-
-function protectAgainstXSS(value: string) {
-  return sanitizeHtml(value, {
-    allowedTags: [
-      "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
-      "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
-      "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
-      "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
-      "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
-      "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
-      "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img'
-    ],
-    allowedAttributes: {
-      'li': [ 'data-list' ],
-      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
-    } 
-  });
-}
-
-
 function formatDateTime(date: string) {
   if (!date) return '';
   return dayjs.utc(date).local().format(`${coreStore.config?.datesFormat} ${coreStore.config?.timeFormat}` || 'YYYY-MM-DD HH:mm:ss');

adminforth/spa/src/renderers/RichText.vue

@@ -4,8 +4,7 @@
 
 <script setup lang="ts">
 import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common'
-import { protectAgainstXSS } from '@/components/ValueRenderer.vue' // путь замени на актуальный
-import sanitizeHtml from 'sanitize-html';
+import { protectAgainstXSS } from '@/utils'
 
 const props = defineProps<{
   column: AdminForthResourceColumnCommon
@@ -14,23 +13,6 @@ const props = defineProps<{
   resource: AdminForthResourceCommon
   adminUser: AdminUser
 }>()
-function protectAgainstXSS(value: string) {
-  return sanitizeHtml(value, {
-    allowedTags: [
-      "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
-      "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
-      "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
-      "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
-      "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
-      "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
-      "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img'
-    ],
-    allowedAttributes: {
-      'li': [ 'data-list' ],
-      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
-    } 
-  });
-}
 const htmlContent = protectAgainstXSS(props.record[props.column.name])
 
 </script>

adminforth/spa/src/renderers/ZeroStylesRichText.vue

@@ -5,7 +5,7 @@
   <script setup lang="ts">
   import { onMounted, ref, watch } from 'vue'
   import type { AdminForthResourceColumnCommon, AdminForthResourceCommon, AdminUser } from '@/types/Common'
-  import sanitizeHtml from 'sanitize-html';
+  import { protectAgainstXSS } from '@/utils'
   
   const props = defineProps<{
     column: AdminForthResourceColumnCommon
@@ -33,23 +33,6 @@
     doc.close()
   }
 
-  function protectAgainstXSS(value: string) {
-    return sanitizeHtml(value, {
-      allowedTags: [
-        "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
-        "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
-        "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
-        "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
-        "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
-        "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
-        "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img'
-      ],
-      allowedAttributes: {
-        'li': [ 'data-list' ],
-        'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
-      } 
-    });
-  }
 
   onMounted(renderHtml)
   watch(() => props.record[props.column.name], renderHtml)

adminforth/spa/src/utils.ts

@@ -6,6 +6,7 @@ import { useCoreStore } from './stores/core';
 import { useUserStore } from './stores/user';
 import { Dropdown } from 'flowbite';
 import adminforth from './adminforth';
+import sanitizeHtml  from 'sanitize-html'
 
 const LS_LANG_KEY = `afLanguage`;
 
@@ -183,3 +184,21 @@ export function humanifySize(size) {
   }
   return `${size.toFixed(1)} ${units[i]}`
 }
+
+export function protectAgainstXSS(value: string) {
+  return sanitizeHtml(value, {
+    allowedTags: [
+      "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
+      "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
+      "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
+      "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
+      "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
+      "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
+      "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", 'img'
+    ],
+    allowedAttributes: {
+      'li': [ 'data-list' ],
+      'img': [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
+    } 
+  });
+}