feat: XSS 방지 dompurify 라이브러리 설치 및 적용

re-Duck · Jan 15, 2024 · e6fba0d · e6fba0d
1 parent eed561b
commit e6fba0d
Show file tree

Hide file tree

Showing 4 changed files with 268 additions and 7 deletions.
diff --git a/client/package.json b/client/package.json
@@ -31,6 +31,7 @@
     "axios": "^1.3.5",
     "eslint-config-next": "13.2.4",
     "formik": "^2.2.9",
+    "isomorphic-dompurify": "^2.2.0",
     "lowlight": "^3.1.0",
     "next": "^14.0.4",
     "next-redux-wrapper": "^8.1.0",

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -24,7 +24,7 @@ export default function RootLayout({
         <StoreProvider>
           <QueryProvider>
             <AuthComponent>
-              <Modal />
+              {/* <Modal /> */}
               <Alert />
               {children}
             </AuthComponent>

diff --git a/client/src/components/Post/PostSummary/index.tsx b/client/src/components/Post/PostSummary/index.tsx
@@ -7,6 +7,9 @@ import Avatar from '../../Avatar';
 import { BASE_URL } from '@/service/base/api';
 import { parseDate } from '@/util';
 
+//XSS 방지
+import DOMPurify from 'isomorphic-dompurify';
+
 export function PostSummary({
   postInfoData,
 }: {
@@ -40,9 +43,11 @@ export function PostSummary({
       >
         <h1 className="mb-3 text-2xl font-bold">{postInfoData.postTitle}</h1>
 
-        <p
+        <div
           className="mb-3 text-gray-500 text-md line-clamp-3"
-          dangerouslySetInnerHTML={{ __html: postInfoData.postContent }}
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(postInfoData.postContent),
+          }}
         />
         <div className="flex justify-between">
           <div className="flex flex-col gap-1">