[v9.2.x] SVG: Add dompurify preprocessor step (#704)

* SVG: Add dompurify preprocessor step (#698) * add sanitized SVG component (cherry picked from commit dbbe819368f507b9493b7a3cf6e080a5dd752b3e) * remove added file Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
grafana · Jan 24, 2023 · c022534 · c022534
1 parent 2294e23
commit c022534
Show file tree

Hide file tree

Showing 12 changed files with 70 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -119,6 +119,7 @@
     "@types/d3-force": "^2.1.0",
     "@types/d3-scale-chromatic": "1.3.1",
     "@types/debounce-promise": "3.1.4",
+    "@types/dompurify": "^2",
     "@types/enzyme": "3.10.12",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/eslint": "8.4.5",
@@ -315,6 +316,7 @@
     "dangerously-set-html-content": "1.0.9",
     "date-fns": "2.29.1",
     "debounce-promise": "3.1.2",
+    "dompurify": "^2.4.1",
     "emotion": "11.0.0",
     "eventemitter3": "4.0.7",
     "fast-deep-equal": "^3.1.3",

diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx
@@ -57,9 +57,13 @@ export const Icon = React.forwardRef<HTMLDivElement, IconProps>(
       console.warn('Icon component passed an invalid icon name', name);
     }
 
+    if (!name || name.includes('..')) {
+      return <div ref={ref}>invalid icon name</div>;
+    }
+
     const svgSize = getSvgSize(size);
     const svgHgt = svgSize;
-    const svgWid = name?.startsWith('gf-bar-align') ? 16 : name?.startsWith('gf-interp') ? 30 : svgSize;
+    const svgWid = name.startsWith('gf-bar-align') ? 16 : name.startsWith('gf-interp') ? 30 : svgSize;
     const subDir = getIconSubDir(name, type);
     const svgPath = `${iconRoot}${subDir}/${name}.svg`;
 

diff --git a/public/app/core/components/SVG/SanitizedSVG.tsx b/public/app/core/components/SVG/SanitizedSVG.tsx
@@ -0,0 +1,18 @@
+import * as DOMPurify from 'dompurify';
+import React from 'react';
+import SVG, { Props } from 'react-inlinesvg';
+
+export const SanitizedSVG = (props: Props) => {
+  return <SVG {...props} cacheRequests={true} preProcessor={getCleanSVG} />;
+};
+
+let cache = new Map<string, string>();
+
+function getCleanSVG(code: string): string {
+  let clean = cache.get(code);
+  if (!clean) {
+    clean = DOMPurify.sanitize(code, { USE_PROFILES: { svg: true, svgFilters: true } });
+    cache.set(code, clean);
+  }
+  return clean;
+}
diff --git a/public/app/features/canvas/elements/icon.tsx b/public/app/features/canvas/elements/icon.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import { isString } from 'lodash';
 import React, { CSSProperties } from 'react';
-import SVG from 'react-inlinesvg';
 
+import { SanitizedSVG } from 'app/core/components/SVG/SanitizedSVG';
 import {
   ColorDimensionConfig,
   ResourceDimensionConfig,
@@ -59,7 +59,7 @@ export function IconDisplay(props: CanvasElementProps) {
   };
 
   return (
-    <SVG
+    <SanitizedSVG
       onClick={onClick}
       src={data.path}
       style={svgStyle}

diff --git a/public/app/features/dimensions/editors/FileUploader.tsx b/public/app/features/dimensions/editors/FileUploader.tsx
@@ -1,11 +1,12 @@
 import { css } from '@emotion/css';
 import React, { Dispatch, SetStateAction, useState } from 'react';
-import SVG from 'react-inlinesvg';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { FileDropzone, useStyles2, Button, DropzoneFile, Field } from '@grafana/ui';
+import { SanitizedSVG } from 'app/core/components/SVG/SanitizedSVG';
 
 import { MediaType } from '../types';
+
 interface Props {
   setFormData: Dispatch<SetStateAction<FormData>>;
   mediaType: MediaType;
@@ -36,8 +37,8 @@ export const FileUploader = ({ mediaType, setFormData, setUpload, error }: Props
   const Preview = () => (
     <Field label="Preview">
       <div className={styles.iconPreview}>
-        {mediaType === MediaType.Icon && <SVG src={file} className={styles.img} />}
-        {mediaType === MediaType.Image && <img src={file} className={styles.img} />}
+        {mediaType === MediaType.Icon && <SanitizedSVG src={file} className={styles.img} />}
+        {mediaType === MediaType.Image && <img src={file} alt="Preview of the uploaded file" className={styles.img} />}
       </div>
     </Field>
   );

diff --git a/public/app/features/dimensions/editors/ResourceCards.tsx b/public/app/features/dimensions/editors/ResourceCards.tsx
@@ -1,11 +1,11 @@
 import { css, cx } from '@emotion/css';
 import React, { memo, CSSProperties } from 'react';
-import SVG from 'react-inlinesvg';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { areEqual, FixedSizeGrid as Grid } from 'react-window';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useTheme2, stylesFactory } from '@grafana/ui';
+import { SanitizedSVG } from 'app/core/components/SVG/SanitizedSVG';
 
 import { ResourceItem } from './FolderPickerTab';
 
@@ -38,7 +38,7 @@ function Cell(props: CellProps) {
           onClick={() => onChange(card.value)}
         >
           {card.imgUrl.endsWith('.svg') ? (
-            <SVG src={card.imgUrl} className={styles.img} />
+            <SanitizedSVG src={card.imgUrl} className={styles.img} />
           ) : (
             <img src={card.imgUrl} className={styles.img} />
           )}

diff --git a/public/app/features/dimensions/editors/ResourcePicker.tsx b/public/app/features/dimensions/editors/ResourcePicker.tsx
@@ -1,6 +1,5 @@
 import { css } from '@emotion/css';
 import React, { createRef } from 'react';
-import SVG from 'react-inlinesvg';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import {
@@ -15,6 +14,7 @@ import {
   useTheme2,
 } from '@grafana/ui';
 import { closePopover } from '@grafana/ui/src/utils/closePopover';
+import { SanitizedSVG } from 'app/core/components/SVG/SanitizedSVG';
 
 import { getPublicOrAbsoluteUrl } from '../resource';
 import { MediaType, ResourceFolderName, ResourcePickerSize } from '../types';
@@ -56,7 +56,7 @@ export const ResourcePicker = (props: Props) => {
 
   const renderSmallResourcePicker = () => {
     if (value && sanitizedSrc) {
-      return <SVG src={sanitizedSrc} className={styles.icon} style={{ ...colorStyle }} />;
+      return <SanitizedSVG src={sanitizedSrc} className={styles.icon} style={{ ...colorStyle }} />;
     } else {
       return (
         <LinkButton variant="primary" fill="text" size="sm">
@@ -73,7 +73,7 @@ export const ResourcePicker = (props: Props) => {
           value={name}
           placeholder={placeholder}
           readOnly={true}
-          prefix={sanitizedSrc && <SVG src={sanitizedSrc} className={styles.icon} style={{ ...colorStyle }} />}
+          prefix={sanitizedSrc && <SanitizedSVG src={sanitizedSrc} className={styles.icon} style={{ ...colorStyle }} />}
           suffix={<Button icon="times" variant="secondary" fill="text" size="sm" onClick={onClear} />}
         />
       </InlineField>

diff --git a/public/app/features/dimensions/editors/URLPickerTab.tsx b/public/app/features/dimensions/editors/URLPickerTab.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React, { Dispatch, SetStateAction } from 'react';
-import SVG from 'react-inlinesvg';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Field, Input, Label, useStyles2 } from '@grafana/ui';
+import { SanitizedSVG } from 'app/core/components/SVG/SanitizedSVG';
 
 import { getPublicOrAbsoluteUrl } from '../resource';
 import { MediaType } from '../types';
@@ -33,7 +33,7 @@ export const URLPickerTab = (props: Props) => {
       <div className={styles.iconContainer}>
         <Field label="Preview">
           <div className={styles.iconPreview}>
-            {mediaType === MediaType.Icon && <SVG src={imgSrc} className={styles.img} />}
+            {mediaType === MediaType.Icon && <SanitizedSVG src={imgSrc} className={styles.img} />}
             {mediaType === MediaType.Image && newValue && <img src={imgSrc} className={styles.img} />}
           </div>
         </Field>

diff --git a/public/app/features/storage/FileView.tsx b/public/app/features/storage/FileView.tsx
@@ -1,12 +1,12 @@
 import { css } from '@emotion/css';
 import { isString } from 'lodash';
 import React, { useMemo } from 'react';
-import SVG from 'react-inlinesvg';
 import { useAsync } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { DataFrame, GrafanaTheme2 } from '@grafana/data';
 import { CodeEditor, useStyles2 } from '@grafana/ui';
+import { SanitizedSVG } from 'app/core/components/SVG/SanitizedSVG';
 
 import { getGrafanaStorage } from './storage';
 import { StorageView } from './types';
@@ -55,7 +55,7 @@ export function FileView({ listing, path, onPathChange, view }: Props) {
     case 'svg':
       return (
         <div>
-          <SVG src={src} className={styles.icon} />
+          <SanitizedSVG src={src} className={styles.icon} />
         </div>
       );
     case 'image':

diff --git a/public/app/plugins/panel/geomap/components/MarkersLegend.tsx b/public/app/plugins/panel/geomap/components/MarkersLegend.tsx
@@ -1,14 +1,14 @@
 import { css, cx } from '@emotion/css';
 import BaseLayer from 'ol/layer/Base';
 import React, { useMemo } from 'react';
-import SVG from 'react-inlinesvg';
 import { useObservable } from 'react-use';
 import { of } from 'rxjs';
 
 import { DataFrame, formattedValueToString, getFieldColorModeForField, GrafanaTheme2 } from '@grafana/data';
 import { getMinMaxAndDelta } from '@grafana/data/src/field/scale';
 import { useStyles2, VizLegendItem } from '@grafana/ui';
 import { ColorScale } from 'app/core/components/ColorScale/ColorScale';
+import { SanitizedSVG } from 'app/core/components/SVG/SanitizedSVG';
 import { config } from 'app/core/config';
 import { DimensionSupplier } from 'app/features/dimensions';
 import { getThresholdItems } from 'app/plugins/panel/state-timeline/utils';
@@ -58,7 +58,7 @@ export function MarkersLegend(props: MarkersLegendProps) {
       <div className={style.infoWrap}>
         <div className={style.layerName}>{layerName}</div>
         <div className={cx(style.layerBody, style.fixedColorContainer)}>
-          <SVG
+          <SanitizedSVG
             src={`public/${symbol}`}
             className={style.legendSymbol}
             title={'Symbol'}

diff --git a/public/app/plugins/panel/geomap/style/markers.ts b/public/app/plugins/panel/geomap/style/markers.ts
@@ -1,3 +1,4 @@
+import * as DOMPurify from 'dompurify';
 import { Fill, RegularShape, Stroke, Circle, Style, Icon, Text } from 'ol/style';
 import tinycolor from 'tinycolor2';
 
@@ -247,6 +248,8 @@ async function prepareSVG(url: string, size?: number): Promise<string> {
       return res.text();
     })
     .then((text) => {
+      text = DOMPurify.sanitize(text, { USE_PROFILES: { svg: true, svgFilters: true } });
+
       const parser = new DOMParser();
       const doc = parser.parseFromString(text, 'image/svg+xml');
       const svg = doc.getElementsByTagName('svg')[0];

diff --git a/yarn.lock b/yarn.lock
@@ -11635,6 +11635,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/dompurify@npm:^2":
+  version: 2.4.0
+  resolution: "@types/dompurify@npm:2.4.0"
+  dependencies:
+    "@types/trusted-types": "*"
+  checksum: b48cd81e997794ebc390c7c5bef1a67ec14a6f2f0521973e07e06af186c7583abe114d94d24868c0632b9573f5bd77131a4b76f3fffdf089ba99a4e53dd46c39
+  languageName: node
+  linkType: hard
+
 "@types/enzyme-adapter-react-16@npm:1.0.6":
   version: 1.0.6
   resolution: "@types/enzyme-adapter-react-16@npm:1.0.6"
@@ -12859,6 +12868,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/trusted-types@npm:*":
+  version: 2.0.2
+  resolution: "@types/trusted-types@npm:2.0.2"
+  checksum: 3371eef5f1c50e1c3c07a127c1207b262ba65b83dd167a1c460fc1b135a3fb0c97b9f508efebd383f239cc5dd5b7169093686a692a501fde9c3f7208657d9b0d
+  languageName: node
+  linkType: hard
+
 "@types/uglify-js@npm:*":
   version: 3.13.1
   resolution: "@types/uglify-js@npm:3.13.1"
@@ -18730,6 +18746,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dompurify@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "dompurify@npm:2.4.1"
+  checksum: 1169177465b3cbb25a44322937fba549f6c4e1a91b83245d144471be26619c835cccf0f8e20aa78c25ac11a06efd17cc1b9db9cacadceb78a4c08a1029eafee5
+  languageName: node
+  linkType: hard
+
 "domutils@npm:^2.5.2, domutils@npm:^2.6.0, domutils@npm:^2.7.0":
   version: 2.8.0
   resolution: "domutils@npm:2.8.0"
@@ -21841,6 +21864,7 @@ __metadata:
     "@types/d3-force": ^2.1.0
     "@types/d3-scale-chromatic": 1.3.1
     "@types/debounce-promise": 3.1.4
+    "@types/dompurify": ^2
     "@types/enzyme": 3.10.12
     "@types/enzyme-adapter-react-16": 1.0.6
     "@types/eslint": 8.4.5
@@ -21929,6 +21953,7 @@ __metadata:
     dangerously-set-html-content: 1.0.9
     date-fns: 2.29.1
     debounce-promise: 3.1.2
+    dompurify: ^2.4.1
     emotion: 11.0.0
     enzyme: 3.11.0
     enzyme-to-json: 3.6.2