GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 16:38:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix html escape and json string parsing in qb (#8039)

Browse Source 
Co-authored-by: Aditya Singh <adityasingh@Adityas-MacBook-Pro.local>
This commit is contained in:
Aditya Singh 2025-06-02 12:12:02 +05:30 committed by GitHub
parent 51d3ca16f7
commit b6180f6957
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/LogDetail/index.tsx
View File

@ -16,6 +16,7 @@ import JSONView from 'container/LogDetailedView/JsonView';
import Overview from 'container/LogDetailedView/Overview'; import Overview from 'container/LogDetailedView/Overview';
import { import {
aggregateAttributesResourcesToString, aggregateAttributesResourcesToString,
escapeHtml,
removeEscapeCharacters, removeEscapeCharacters,
unescapeString, unescapeString,
} from 'container/LogDetailedView/utils'; } from 'container/LogDetailedView/utils';
@ -118,7 +119,7 @@ function LogDetail({
const htmlBody = useMemo( const htmlBody = useMemo(
() => ({ () => ({
__html: convert.toHtml( __html: convert.toHtml(
dompurify.sanitize(unescapeString(log?.body || ''), { dompurify.sanitize(unescapeString(escapeHtml(log?.body || '')), {
FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS], FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
}), }),
), ),

4
frontend/src/components/Logs/ListLogView/index.tsx
View File

@ -7,7 +7,7 @@ import cx from 'classnames';
import LogDetail from 'components/LogDetail'; import LogDetail from 'components/LogDetail';
import { VIEW_TYPES } from 'components/LogDetail/constants'; import { VIEW_TYPES } from 'components/LogDetail/constants';
import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats'; import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
import { unescapeString } from 'container/LogDetailedView/utils'; import { escapeHtml, unescapeString } from 'container/LogDetailedView/utils';
import { FontSize } from 'container/OptionsMenu/types'; import { FontSize } from 'container/OptionsMenu/types';
import dompurify from 'dompurify'; import dompurify from 'dompurify';
import { useActiveLog } from 'hooks/logs/useActiveLog'; import { useActiveLog } from 'hooks/logs/useActiveLog';
@ -58,7 +58,7 @@ function LogGeneralField({
const html = useMemo( const html = useMemo(
() => ({ () => ({
__html: convert.toHtml( __html: convert.toHtml(
dompurify.sanitize(unescapeString(fieldValue), { dompurify.sanitize(unescapeString(escapeHtml(fieldValue)), {
FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS], FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
}), }),
), ),

4
frontend/src/components/Logs/RawLogView/index.tsx
View File

@ -5,7 +5,7 @@ import { DrawerProps } from 'antd';
import LogDetail from 'components/LogDetail'; import LogDetail from 'components/LogDetail';
import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants'; import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats'; import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
import { unescapeString } from 'container/LogDetailedView/utils'; import { escapeHtml, unescapeString } from 'container/LogDetailedView/utils';
import LogsExplorerContext from 'container/LogsExplorerContext'; import LogsExplorerContext from 'container/LogsExplorerContext';
import dompurify from 'dompurify'; import dompurify from 'dompurify';
import { useActiveLog } from 'hooks/logs/useActiveLog'; import { useActiveLog } from 'hooks/logs/useActiveLog';
@ -177,7 +177,7 @@ function RawLogView({
const html = useMemo( const html = useMemo(
() => ({ () => ({
__html: convert.toHtml( __html: convert.toHtml(
dompurify.sanitize(unescapeString(text), { dompurify.sanitize(unescapeString(escapeHtml(text)), {
FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS], FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
}), }),
), ),

12
frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
View File

@ -21,8 +21,10 @@ import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
import { DataType } from '../TableView'; import { DataType } from '../TableView';
import { import {
escapeHtml,
filterKeyForField, filterKeyForField,
jsonToDataNodes, jsonToDataNodes,
parseFieldValue,
recursiveParseJSON, recursiveParseJSON,
removeEscapeCharacters, removeEscapeCharacters,
unescapeString, unescapeString,
@ -85,7 +87,7 @@ export function TableViewActions(
record.field === 'body' record.field === 'body'
? { ? {
__html: convert.toHtml( __html: convert.toHtml(
dompurify.sanitize(unescapeString(record.value), { dompurify.sanitize(unescapeString(escapeHtml(record.value)), {
FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS], FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
}), }),
), ),
@ -155,7 +157,11 @@ export function TableViewActions(
<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} /> <ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
) )
} }
onClick={onClickHandler(OPERATORS['='], fieldFilterKey, fieldData.value)} onClick={onClickHandler(
OPERATORS['='],
fieldFilterKey,
parseFieldValue(fieldData.value),
)}
/> />
</Tooltip> </Tooltip>
<Tooltip title="Filter out value"> <Tooltip title="Filter out value">
@ -171,7 +177,7 @@ export function TableViewActions(
onClick={onClickHandler( onClick={onClickHandler(
OPERATORS['!='], OPERATORS['!='],
fieldFilterKey, fieldFilterKey,
fieldData.value, parseFieldValue(fieldData.value),
)} )}
/> />
</Tooltip> </Tooltip>

18
frontend/src/container/LogDetailedView/utils.tsx
View File

@ -259,6 +259,24 @@ export const getDataTypes = (value: unknown): DataTypes => {
return determineType(value); return determineType(value);
}; };
// prevent html rendering in the value
export const escapeHtml = (unsafe: string): string =>
unsafe
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
// parse field value to remove escaping characters
export const parseFieldValue = (value: string): string => {
try {
return JSON.parse(value);
} catch (error) {
return value;
}
};
// now we do not want to render colors everywhere like in tooltip and monaco editor hence we remove such codes to make // now we do not want to render colors everywhere like in tooltip and monaco editor hence we remove such codes to make
// the log line readable // the log line readable
export const removeEscapeCharacters = (str: string): string => export const removeEscapeCharacters = (str: string): string =>