chore(documents): Allow SVG in HTML sanitation #17523
Conversation
WalkthroughThe pull request introduces enhancements to HTML content sanitization in the documents library. The changes expand support for SVG elements by defining a comprehensive list of allowed SVG tags and attributes. The modifications are implemented across two files: Changes
Sequence DiagramsequenceDiagram
participant Input as HTML/SVG Content
participant Sanitizer as Content Sanitizer
participant Config as HTML Configuration
Input->>Config: Request allowed tags/attributes
Config-->>Sanitizer: Provide SVG tags and attributes
Sanitizer->>Sanitizer: Validate and sanitize content
Sanitizer->>Input: Return sanitized HTML/SVG
Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
libs/clients/documents-v2/src/utils/htmlConfig.ts (2)
24-43: Add TypeScript types and consider additional SVG attributesConsider the following improvements:
- Add TypeScript type definitions for better type safety:
type SvgAttribute = typeof svgAttributes[number];
- Consider adding standard SVG attributes:
xmlnsfor XML namespaceversionfor SVG version
45-58: Enhance type safety and consider attribute restrictionsThe current implementation allows all attributes for most tags, which might be too permissive. Consider:
- Adding TypeScript interfaces for better type safety:
interface SvgAttributeMap { [key: string]: readonly string[]; }
- Restricting attributes per tag based on SVG specification
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
libs/clients/documents-v2/src/lib/dto/document.dto.ts(2 hunks)libs/clients/documents-v2/src/utils/htmlConfig.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
libs/clients/documents-v2/src/lib/dto/document.dto.ts (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/clients/documents-v2/src/utils/htmlConfig.ts (1)
Pattern libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: prepare
🔇 Additional comments (1)
libs/clients/documents-v2/src/utils/htmlConfig.ts (1)
3-22: Review security implications of SVG tags and add documentation tagsWhile the SVG tags list is comprehensive, there are some security considerations:
- The
foreignObjecttag can potentially embed arbitrary HTML content- The
usetag withxlink:hrefcan reference external contentConsider:
- Adding documentation tags like
titleanddescfor accessibility- Documenting security implications of allowing these tags
Run this script to check for potential SVG-based XSS vectors in the codebase:
✅ Verification successful
SVG configuration is secure, documentation can be improved
The security concerns about SVG tags are properly addressed:
- HTML content in
foreignObjectis sanitized by sanitize-htmlusetag is safely restricted to onlyxlink:hrefattribute- No direct SVG injection points found in the codebase
Consider adding documentation about security measures and adding accessibility tags (
title,desc) in a separate PR.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for potentially unsafe SVG usage rg -i "foreignObject|xlink:href" --type tsLength of output: 252
Script:
#!/bin/bash # Get the complete htmlConfig.ts content cat libs/clients/documents-v2/src/utils/htmlConfig.ts # Search for any sanitization usage rg -A 5 -B 5 "sanitize|DOMPurify" --type tsLength of output: 66926
Script:
#!/bin/bash # Search for potential SVG injection points or raw SVG usage rg -i "innerHTML|dangerouslySetInnerHTML|createElementNS.*svg" --type tsLength of output: 2253
Datadog ReportBranch report: ✅ 0 Failed, 4 Passed, 0 Skipped, 2.92s Total Time |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #17523 +/- ##
=======================================
Coverage 35.61% 35.61%
=======================================
Files 7015 7015
Lines 150337 150333 -4
Branches 42980 42979 -1
=======================================
+ Hits 53540 53543 +3
+ Misses 96797 96790 -7
Flags with carried forward coverage won't be shown. Click here to find out more. see 3 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
thordurhhh
added
the
deprecated:automerge
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
What
Allow SVG in HTML sanitation
Why
Organizations that send to the inbox, should be allowed to send HTML including SVG.
Checklist:
Summary by CodeRabbit
New Features
Improvements