Fix: Implement DOMPurify to sanitize HTML content before rendering (#1498)

### What problem does this PR solve?

This PR resolves issue #1491 related to HTML Injection and Cross-Site
Scripting (XSS). The issue was caused by the unsafe usage of
`dangerouslySetInnerHTML` without proper sanitization of user input.

### Changes
- Added DOMPurify dependency.
- Updated the following components to use DOMPurify:
-
`web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx`
  - `web/src/pages/chat/markdown-content/index.tsx`
-
`web/src/pages/add-knowledge/components/knowledge-setting/category-panel.tsx`

### Type of change

- [x] Other (please describe): Security Fix
This commit is contained in:
Dani Servian
2024-07-15 04:24:23 +02:00
committed by GitHub
parent 2dea8448a6
commit bafe137502
5 changed files with 35 additions and 3 deletions

View File

@ -6,6 +6,7 @@ import { IChunk } from '@/interfaces/database/knowledge';
import { getExtension } from '@/utils/documentUtils';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Button, Flex, Popover, Space } from 'antd';
import DOMPurify from 'dompurify';
import { useCallback } from 'react';
import Markdown from 'react-markdown';
import reactStringReplace from 'react-string-replace';
@ -94,7 +95,7 @@ const MarkdownContent = ({
<Space direction={'vertical'}>
<div
dangerouslySetInnerHTML={{
__html: chunkItem?.content_with_weight,
__html: DOMPurify.sanitize(chunkItem?.content_with_weight),
}}
className={styles.chunkContentText}
></div>