♻️ [refactor] XSS 공격 방지를 위한 DOMPurify 설치 및 사용

Author: seorang42

package-lock.json

@@ -16,6 +16,7 @@
     "@tanstack/vue-query": "^5.66.0",
     "axios": "^1.7.9",
     "chart.js": "^4.4.7",
+    "dompurify": "^3.2.4",
     "js-cookie": "^3.0.5",
     "pinia": "^2.3.0",
     "tailwind-scrollbar-hide": "^2.0.0",
@@ -27,6 +28,7 @@
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
+    "@types/dompurify": "^3.0.5",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.10.2",
     "@typescript-eslint/eslint-plugin": "^8.20.0",

package.json

@@ -1,6 +1,7 @@
 import type { NewLabelTypes, UserRegistrationApiProps, UserUpdateValue } from '@/types/admin'
 import type { LabelDataTypes } from '@/types/common'
 import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
+import DOMPurify from 'dompurify'
 
 export const deleteLabelAdmin = async (id: number) => {
   const response = await axiosInstance.delete(`/api/managements/labels/${id}`)
@@ -14,7 +15,7 @@ export const postAddLabelAdmin = async (newLabel: NewLabelTypes) => {
 
 export const patchLabelAdmin = async (editLabel: LabelDataTypes) => {
   const response = await axiosInstance.patch(`/api/managements/labels/${editLabel.labelId}`, {
-    labelName: editLabel.labelName,
+    labelName: DOMPurify.sanitize(editLabel.labelName),
     labelColor: editLabel.labelColor
   })
   return response.data

src/api/admin.ts

@@ -1,6 +1,7 @@
 import type { Status } from '@/types/common'
 import type { RequestApprovePostTypes } from '@/types/manager'
 import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
+import DOMPurify from 'dompurify'
 
 export const postTaskRequest = async (formdata: FormData) => {
   const response = await formDataAxiosInstance.post('/api/tasks', formdata)
@@ -54,7 +55,9 @@ export const getHistory = async (taskID: number | null) => {
 }
 
 export const postComment = async (taskID: number, content: string) => {
-  const response = await axiosInstance.post(`/api/tasks/${taskID}/comments`, { content })
+  const response = await axiosInstance.post(`/api/tasks/${taskID}/comments`, {
+    content: DOMPurify.sanitize(content)
+  })
   return response.data
 }
 
@@ -66,11 +69,6 @@ export const postCommentAttachment = async (taskID: number, formdata: FormData)
   return response.data
 }
 
-export const patchComment = async (commentId: number, content: string) => {
-  const response = await axiosInstance.patch(`/api/comments/${commentId}`, { content })
-  return response.data
-}
-
 export const deleteComment = async (commentId: number) => {
   const response = await axiosInstance.delete(`/api/comments/${commentId}`)
   return response.data

src/api/user.ts

@@ -139,6 +139,8 @@ import FormButtonContainer from './FormButtonContainer.vue'
 import FormCheckbox from './FormCheckbox.vue'
 import ImageContainer from './ImageContainer.vue'
 import ModalView from './ModalView.vue'
+import DOMPurify from 'dompurify'
+
 const router = useRouter()
 
 const memberStore = useMemberStore()
@@ -276,7 +278,7 @@ const handleSubmit = async () => {
   if (isInvalid.value == false && isFull.value == false) {
     const formData = new FormData()
     const memberInfo = {
-      name: name.value,
+      name: DOMPurify.sanitize(name.value),
       isProfileImageDeleted: imageDelete.value,
       emailNotification: emailCheck.value,
       kakaoWorkNotification: kakaoWorkCheck.value

src/components/common/EditInformation.vue

@@ -12,14 +12,15 @@
 
 <script setup lang="ts">
 import type { Filter } from '@/types/common'
+import DOMPurify from 'dompurify'
 
 const { title, width = '120' } = defineProps<Filter>()
 const emit = defineEmits(['update:value'])
 
 const onValueChange = (event: Event) => {
   const target = event.target as HTMLInputElement
   setTimeout(() => {
-    emit('update:value', target.value)
+    emit('update:value', DOMPurify.sanitize(target.value))
   }, 500)
 }
 </script>

src/components/filters/FilterInput.vue

@@ -62,6 +62,7 @@ import CategoryDropDown from './CategoryDropDown.vue'
 import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
+import DOMPurify from 'dompurify'
 
 const category1 = ref<Category | null>(null)
 const category2 = ref<SubCategory | null>(null)
@@ -151,8 +152,8 @@ const handleSubmit = async () => {
 
   const taskInfo = {
     categoryId: category2.value.subCategoryId,
-    title: title.value,
-    description: description.value
+    title: DOMPurify.sanitize(title.value),
+    description: DOMPurify.sanitize(description.value)
   }
 
   const taskInfoEdit = {

src/components/request-task/ReRequestTask.vue

@@ -60,6 +60,7 @@ import CategoryDropDown from './CategoryDropDown.vue'
 import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
+import DOMPurify from 'dompurify'
 
 const category1 = ref<Category | null>(null)
 const category2 = ref<SubCategory | null>(null)
@@ -136,8 +137,8 @@ const handleSubmit = async () => {
   const formData = new FormData()
   const taskInfo = {
     categoryId: category2.value.subCategoryId,
-    title: title.value,
-    description: description.value
+    title: DOMPurify.sanitize(title.value),
+    description: DOMPurify.sanitize(description.value)
   }
   const jsonTaskInfo = JSON.stringify(taskInfo)
   const newBlob = new Blob([jsonTaskInfo], { type: 'application/json' })

src/components/request-task/RequestTask.vue

@@ -65,6 +65,7 @@ import { useRouter } from 'vue-router'
 import ModalView from '../common/ModalView.vue'
 import ListCardTab from '../lists/ListCardTab.vue'
 import TaskDetail from '../task-detail/TaskDetail.vue'
+import DOMPurify from 'dompurify'
 
 const { info } = defineProps<{ info: RequestedListData }>()
 const requestedTabList: ListCardProps[] = [
@@ -107,7 +108,9 @@ const rejectRequest = async () => {
     modalError.value = '반려 사유를 입력해주세요'
     return
   }
-  await axiosInstance.patch(`/api/tasks/${info.taskId}/terminate`, { reason: rejectReason.value })
+  await axiosInstance.patch(`/api/tasks/${info.taskId}/terminate`, {
+    reason: DOMPurify.sanitize(rejectReason.value)
+  })
   toggleModal('success')
 }
 

src/components/requested/RequestedListCard.vue

@@ -45,6 +45,7 @@ import { statusAsColor } from '@/utils/statusAsColor'
 import { useQueryClient } from '@tanstack/vue-query'
 import { ref, watch } from 'vue'
 import ModalView from '../common/ModalView.vue'
+import DOMPurify from 'dompurify'
 
 const { modelValue, isProcessor, taskId } = defineProps<TaskStatusListProps>()
 const modalError = ref('')
@@ -104,7 +105,9 @@ const rejectRequest = async () => {
   }
 
   backModal.value = false
-  await axiosInstance.patch(`/api/tasks/${taskId}/terminate`, { reason: rejectReason.value })
+  await axiosInstance.patch(`/api/tasks/${taskId}/terminate`, {
+    reason: DOMPurify.sanitize(rejectReason.value)
+  })
   toggleModal('success')
   emit('update:status', 'TERMINATED')
   currentStatus.value = 'TERMINATED'