CRAFT 1586 | inline svg - use DOMPurify instead of maintaining custom dom sanitization code #433
Conversation
This file contains hidden or 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
… that malicious/malformed attrs are removed from the svg but the svg is still displayed
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
jaikamat
approved these changes
Sep 12, 2025
misama-ct
merged commit f45da4e
into
CRAFT-1586-nimbus-component-inline-svg
4 checks passed
misama-ct
pushed a commit
that referenced
this pull request
Sep 16, 2025
… dom sanitization code (#433) feat(inline svg): use dompurify instead of custom parsing solution so that malicious/malformed attrs are removed from the svg but the svg is still displayed
misama-ct
added a commit
that referenced
this pull request
Sep 17, 2025
* feat(inline-svg): introduce InlineSvg component for rendering sanitized SVGs - Added InlineSvg component to render arbitrary SVG markup with built-in XSS protection. - Implemented sanitization logic to remove potentially dangerous elements and attributes. - Included accessibility features with title and description support. - Created associated stories and documentation for usage examples and testing. This addition enhances the component library by providing a secure and flexible way to handle SVGs. * refactor(inline-svg): simplify InlineSvg component and enhance sanitization - Removed deprecated props (title, description, preserveViewBox) from InlineSvg component. - Updated sanitization logic to utilize constants for forbidden tags and attributes. - Improved accessibility handling by rendering SVGs with role="presentation" and preserving title/description directly in SVG markup. - Refactored related stories and documentation to reflect changes in props and accessibility features. - Introduced new hooks for better SVG handling and sanitization. * feat(inline-svg): add useInlineSvg hook for SVG processing and sanitization - Introduced a new hook, useInlineSvg, to handle the processing and sanitization of raw SVG data. - The hook utilizes useMemo for performance optimization and checks for DOM availability. - Implements sanitization logic to ensure safe SVG rendering, extracting and preserving specific attributes. - Returns processed SVG attributes, content, and a validation status for improved SVG handling in components. * refactor(inline-svg): update forbidden attributes in sanitization constants - Removed explicit listing of event handler attributes from DEFAULT_FORBIDDEN_ATTRIBUTES. - Added a note clarifying that event handlers are blocked by pattern matching in sanitize-svg.ts. - Streamlined the sanitization constants for improved clarity and maintainability. * refactor(inline-svg): update ALLOWED_PROTOCOLS and clarify forbidden attributes - Added "//" to ALLOWED_PROTOCOLS for improved URL handling. - Clarified the note regarding event handler attributes in DEFAULT_FORBIDDEN_ATTRIBUTES for better understanding of sanitization logic. * refactor(inline-svg): update component structure and enhance sanitization - Moved InlineSvg component from Media to Components menu for better organization. - Updated color props from "primary.500" to "primary.9" and similar adjustments for other colors to align with new design standards. - Improved sanitization logic by removing deprecated constants and ensuring all attributes are preserved correctly. - Enhanced stories to reflect changes in color usage and added tests for SVG sanitization against malicious content. - Removed unused examples and streamlined the documentation for clarity. * refactor(inline-svg): simplify InlineSvg component and add ref support - Removed forwardRef from InlineSvg component for a cleaner structure. - Added ref prop to InlineSvgProps interface to allow direct access to the SVG element. - Streamlined the component logic while maintaining sanitization checks for SVG rendering. * refactor(inline-svg): enhance component functionality and documentation - Updated InlineSvg component to always render as an SVG, removing support for 'as' and 'asChild' props. - Improved documentation to clarify the use of predefined and custom sizes for SVGs. - Enhanced example usage in stories to demonstrate various size options and sanitization of SVG content. - Updated InlineSvgProps interface to exclude 'as' and 'asChild' from prop types for better type safety. * refactor(inline-svg): remove className prop from InlineSvgProps interface * CRAFT 1586 | inline svg - use DOMPurify instead of maintaining custom dom sanitization code (#433) feat(inline svg): use dompurify instead of custom parsing solution so that malicious/malformed attrs are removed from the svg but the svg is still displayed * chore(changeset): add changeset for InlineSvg component addition --------- Co-authored-by: Byron Wall <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Use dompurify instead of custom parsing solution so that:
DOMPurify is not causing the svg's in uikit to be styled incorrectly. The issue is with uikit styling set on all icons by the getIconStyle util, whichs adds a fill to all child tags of an svg unless the tag specifically has (
fill='none') set on the tag.Therefore I think it makes sense to use DOMPurify over a custom sanitization method.