-
Notifications
You must be signed in to change notification settings - Fork 450
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: use DOMPurify with an allowlist based configuration to sanitize…
… icons
- Loading branch information
1 parent
661d644
commit c1a548a
Showing
5 changed files
with
478 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,310 @@ | ||
| import {type Config} from 'isomorphic-dompurify' | ||
|
|
||
| /** | ||
| * This file maintains our sanitization configuration for DOMPurify. | ||
| * We use an allowlist for tags and attributes to ensure that only safe | ||
| * elements and attributes are allowed. | ||
| * | ||
| * This is easier to loosen as specs develop & use-cases are discovered. | ||
| */ | ||
|
|
||
| ///////// Tags | ||
|
|
||
| const HTML_TAGS = ['img', 'style'] | ||
|
|
||
| const SVG_TAGS = [ | ||
| 'svg', | ||
| 'a', | ||
| 'altglyph', | ||
| 'altglyphdef', | ||
| 'altglyphitem', | ||
| 'animatecolor', | ||
| 'animatemotion', | ||
| 'animatetransform', | ||
| 'circle', | ||
| 'clippath', | ||
| 'defs', | ||
| 'desc', | ||
| 'ellipse', | ||
| 'filter', | ||
| 'font', | ||
| 'g', | ||
| 'glyph', | ||
| 'glyphref', | ||
| 'hkern', | ||
| 'image', | ||
| 'line', | ||
| 'lineargradient', | ||
| 'marker', | ||
| 'mask', | ||
| 'metadata', | ||
| 'mpath', | ||
| 'path', | ||
| 'pattern', | ||
| 'polygon', | ||
| 'polyline', | ||
| 'radialgradient', | ||
| 'rect', | ||
| 'stop', | ||
| 'style', | ||
| 'switch', | ||
| 'symbol', | ||
| 'text', | ||
| 'textpath', | ||
| 'title', | ||
| 'tref', | ||
| 'tspan', | ||
| 'view', | ||
| 'vkern', | ||
| ] as const | ||
|
|
||
| const SVG_FILTER_TAGS = [ | ||
| 'feBlend', | ||
| 'feColorMatrix', | ||
| 'feComponentTransfer', | ||
| 'feComposite', | ||
| 'feConvolveMatrix', | ||
| 'feDiffuseLighting', | ||
| 'feDisplacementMap', | ||
| 'feDistantLight', | ||
| 'feDropShadow', | ||
| 'feFlood', | ||
| 'feFuncA', | ||
| 'feFuncB', | ||
| 'feFuncG', | ||
| 'feFuncR', | ||
| 'feGaussianBlur', | ||
| 'feImage', | ||
| 'feMerge', | ||
| 'feMergeNode', | ||
| 'feMorphology', | ||
| 'feOffset', | ||
| 'fePointLight', | ||
| 'feSpecularLighting', | ||
| 'feSpotLight', | ||
| 'feTile', | ||
| 'feTurbulence', | ||
| ] as const | ||
|
|
||
| const ALLOWED_TAGS: Config['ALLOWED_TAGS'] = [...SVG_TAGS, ...HTML_TAGS, ...SVG_FILTER_TAGS] | ||
|
|
||
| ///////// Attributes | ||
|
|
||
| const HTML_ATTRIBUTES = [ | ||
| 'alt', | ||
| 'class', | ||
| 'crossorigin', | ||
| 'decoding', | ||
| 'elementtiming', | ||
| 'fetchpriority', | ||
| 'height', | ||
| 'loading', | ||
| 'src', | ||
| 'srcset', | ||
| 'style', | ||
| 'width', | ||
| ] | ||
|
|
||
| const SVG_ATTRIBUTES = [ | ||
| 'accent-height', | ||
| 'accumulate', | ||
| 'additive', | ||
| 'alignment-baseline', | ||
| 'amplitude', | ||
| 'ascent', | ||
| 'attributename', | ||
| 'attributetype', | ||
| 'azimuth', | ||
| 'basefrequency', | ||
| 'baseline-shift', | ||
| 'begin', | ||
| 'bias', | ||
| 'by', | ||
| 'class', | ||
| 'clip', | ||
| 'clippathunits', | ||
| 'clip-path', | ||
| 'clip-rule', | ||
| 'color', | ||
| 'color-interpolation', | ||
| 'color-interpolation-filters', | ||
| 'color-profile', | ||
| 'color-rendering', | ||
| 'cx', | ||
| 'cy', | ||
| 'd', | ||
| 'dx', | ||
| 'dy', | ||
| 'diffuseconstant', | ||
| 'direction', | ||
| 'display', | ||
| 'divisor', | ||
| 'dur', | ||
| 'edgemode', | ||
| 'elevation', | ||
| 'end', | ||
| 'exponent', | ||
| 'fill', | ||
| 'fill-opacity', | ||
| 'fill-rule', | ||
| 'filter', | ||
| 'filterunits', | ||
| 'flood-color', | ||
| 'flood-opacity', | ||
| 'font-family', | ||
| 'font-size', | ||
| 'font-size-adjust', | ||
| 'font-stretch', | ||
| 'font-style', | ||
| 'font-variant', | ||
| 'font-weight', | ||
| 'fx', | ||
| 'fy', | ||
| 'g1', | ||
| 'g2', | ||
| 'glyph-name', | ||
| 'glyphref', | ||
| 'gradientunits', | ||
| 'gradienttransform', | ||
| 'height', | ||
| 'href', | ||
| 'id', | ||
| 'image-rendering', | ||
| 'in', | ||
| 'in2', | ||
| 'intercept', | ||
| 'k', | ||
| 'k1', | ||
| 'k2', | ||
| 'k3', | ||
| 'k4', | ||
| 'kerning', | ||
| 'keypoints', | ||
| 'keysplines', | ||
| 'keytimes', | ||
| 'lang', | ||
| 'lengthadjust', | ||
| 'letter-spacing', | ||
| 'kernelmatrix', | ||
| 'kernelunitlength', | ||
| 'lighting-color', | ||
| 'local', | ||
| 'marker-end', | ||
| 'marker-mid', | ||
| 'marker-start', | ||
| 'markerheight', | ||
| 'markerunits', | ||
| 'markerwidth', | ||
| 'maskcontentunits', | ||
| 'maskunits', | ||
| 'max', | ||
| 'mask', | ||
| 'media', | ||
| 'method', | ||
| 'mode', | ||
| 'min', | ||
| 'name', | ||
| 'numoctaves', | ||
| 'offset', | ||
| 'operator', | ||
| 'opacity', | ||
| 'order', | ||
| 'orient', | ||
| 'orientation', | ||
| 'origin', | ||
| 'overflow', | ||
| 'paint-order', | ||
| 'path', | ||
| 'pathlength', | ||
| 'patterncontentunits', | ||
| 'patterntransform', | ||
| 'patternunits', | ||
| 'points', | ||
| 'preservealpha', | ||
| 'preserveaspectratio', | ||
| 'primitiveunits', | ||
| 'r', | ||
| 'rx', | ||
| 'ry', | ||
| 'radius', | ||
| 'refx', | ||
| 'refy', | ||
| 'repeatcount', | ||
| 'repeatdur', | ||
| 'restart', | ||
| 'result', | ||
| 'rotate', | ||
| 'scale', | ||
| 'seed', | ||
| 'shape-rendering', | ||
| 'slope', | ||
| 'specularconstant', | ||
| 'specularexponent', | ||
| 'spreadmethod', | ||
| 'startoffset', | ||
| 'stddeviation', | ||
| 'stitchtiles', | ||
| 'stop-color', | ||
| 'stop-opacity', | ||
| 'stroke-dasharray', | ||
| 'stroke-dashoffset', | ||
| 'stroke-linecap', | ||
| 'stroke-linejoin', | ||
| 'stroke-miterlimit', | ||
| 'stroke-opacity', | ||
| 'stroke', | ||
| 'stroke-width', | ||
| 'style', | ||
| 'surfacescale', | ||
| 'systemlanguage', | ||
| 'tabindex', | ||
| 'tablevalues', | ||
| 'targetx', | ||
| 'targety', | ||
| 'transform', | ||
| 'transform-origin', | ||
| 'text-anchor', | ||
| 'text-decoration', | ||
| 'text-rendering', | ||
| 'textlength', | ||
| 'type', | ||
| 'u1', | ||
| 'u2', | ||
| 'unicode', | ||
| 'values', | ||
| 'viewbox', | ||
| 'visibility', | ||
| 'version', | ||
| 'vert-adv-y', | ||
| 'vert-origin-x', | ||
| 'vert-origin-y', | ||
| 'width', | ||
| 'word-spacing', | ||
| 'wrap', | ||
| 'writing-mode', | ||
| 'xchannelselector', | ||
| 'ychannelselector', | ||
| 'x', | ||
| 'x1', | ||
| 'x2', | ||
| 'xmlns', | ||
| 'y', | ||
| 'y1', | ||
| 'y2', | ||
| 'z', | ||
| 'zoomandpan', | ||
| ] as const | ||
|
|
||
| const ALLOWED_ATTR: Config['ALLOWED_ATTR'] = [...SVG_ATTRIBUTES, ...HTML_ATTRIBUTES] | ||
|
|
||
| const config = { | ||
| ALLOWED_ATTR, | ||
| ALLOWED_TAGS, | ||
| /** | ||
| * Required to allow for the use of `style` tags, | ||
| * namely rendering the style tags from `styled-components` | ||
| */ | ||
| FORCE_BODY: true, | ||
| } satisfies Config | ||
|
|
||
| export {config} |
Oops, something went wrong.