Bulk import for columns metadata across the assets #24012
Conversation
github-actions
bot
added
backend
safe to test
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| const { row } = props; | ||
| const value = row.editedDescription ?? row.description ?? ''; | ||
| const hasEdit = row.editedDescription !== undefined; | ||
| const displayValue = value.replace(/<[^>]*>/g, '').slice(0, 100); |
Check failure
Code scanning / CodeQL
Incomplete multi-character sanitization High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 3 days ago
The best way to fix this incomplete multi-character sanitization is to use a well-tested sanitizing library designed for front-end use, such as sanitize-html or dompurify. For React projects, the popular and well-maintained dompurify library is recommended and lightweight.
Specifically, in openmetadata-ui/src/main/resources/ui/src/pages/ColumnBulkOperations/ColumnGrid/ColumnGrid.component.tsx, at line 732 within the renderEditableDescriptionCell callback, replace the manual .replace(/<[^>]*>/g, '') approach with a call to DOMPurify.sanitize to reliably strip all HTML tags, including tricky multi-character combinations.
Steps:
- Add an import for DOMPurify (
import DOMPurify from 'dompurify';). - In the
.replace(...)usage, replace withDOMPurify.sanitize(value, { ALLOWED_TAGS: [] })to remove all HTML tags, leaving only plain text. - Slice to 100 characters as before.
- To avoid ambiguity, add a dependency for
dompurify.
| @@ -17,6 +17,7 @@ | ||
| import DataGrid, { Column, RenderCellProps, RenderHeaderCellProps } from 'react-data-grid'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { Link } from 'react-router-dom'; | ||
| import DOMPurify from 'dompurify'; | ||
| import AsyncSelectList from '../../../components/common/AsyncSelectList/AsyncSelectList'; | ||
| import TreeAsyncSelectList from '../../../components/common/AsyncSelectList/TreeAsyncSelectList'; | ||
| import RichTextEditor from '../../../components/common/RichTextEditor/RichTextEditor'; | ||
| @@ -729,7 +730,7 @@ | ||
| const { row } = props; | ||
| const value = row.editedDescription ?? row.description ?? ''; | ||
| const hasEdit = row.editedDescription !== undefined; | ||
| const displayValue = value.replace(/<[^>]*>/g, '').slice(0, 100); | ||
| const displayValue = DOMPurify.sanitize(value, { ALLOWED_TAGS: [] }).slice(0, 100); | ||
|
|
||
| return ( | ||
| <div |
|
TypeScript types have been updated based on the JSON schema changes in the PR |
|
Describe your changes:
Fixes
I worked on ... because ...
Type of change:
Checklist:
Fixes <issue-number>: <short explanation>