XSS 방어 dompurify 라이브러리사용하기

yarn add dompurify
yarn add -D @types/dompurify
설치 후에

import Dompurify from "dompurify";

해서 사용해주면된다~!

실습 코드

import { useQuery, gql } from "@apollo/client";
import { useRouter } from "next/router";
import { DateSchema } from "yup";
import {
  IQuery,
  IQueryFetchBoardArgs,
} from "../../../src/commons/types/generated/types";

import Dompurify from "dompurify";
const FETCH_BOARD = gql`
  query fetchBoard($boardId: ID!) {
    fetchBoard(boardId: $boardId) {
      writer
      title
      contents
    }
  }
`;

export default function WebEditorDetailPage() {
  const router = useRouter();
  //   const { data } = useQuery<Pick<IQuery, "fetchBoard">, IQueryFetchBoardArgs>(
  //     FETCH_BOARD,
  //     {
  //       variables: { boardId: String(router.query.id) },
  //     }
  //   );
  const { data } = useQuery(FETCH_BOARD, {
    variables: {
      boardId: String(router.query.id),
    },
  });
  console.log(router.query.id);
  console.log(data);
  return (
    <>
      <div>작성자 : {data?.fetchBoard.writer}</div>
      <div>제목 : {data?.fetchBoard.title}</div>
      {process.browser && (
        <div
          dangerouslySetInnerHTML={{
            __html: Dompurify.sanitize(String(data?.fetchBoard.contents)),
          }}
        />
      )}
    </>
  );
}