Skip to content

New widgets#577

Closed
rajat1saxena wants to merge 3 commits intomainfrom
page-builder-new-widgets
Closed

New widgets#577
rajat1saxena wants to merge 3 commits intomainfrom
page-builder-new-widgets

Conversation

@rajat1saxena
Copy link
Copy Markdown
Member

@rajat1saxena rajat1saxena commented Apr 26, 2025

  • As seen in

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 26, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
courselit-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 29, 2025 0:42am

github-advanced-security[bot]
github-advanced-security AI found potential problems Apr 26, 2025
View reviewed changes
Comment thread packages/common-widgets/src/grid/admin-widget/svg-editor.tsx
Comment on lines +106 to +107
processedSvg(svgCode, svgStyle) ||
'<div class="text-red-500">Invalid SVG</div>',

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML Medium

DOM text
Loading
is reinterpreted as HTML without escaping meta-characters.
DOM text
Loading
is reinterpreted as HTML without escaping meta-characters.

Copilot Autofix

AI 12 months ago

To fix the issue, we need to ensure that the svgCode passed to dangerouslySetInnerHTML is sanitized to prevent XSS. This can be achieved by using a library like DOMPurify to sanitize the SVG content before rendering it. DOMPurify is a well-known library for sanitizing HTML and SVG content, ensuring that only safe elements and attributes are allowed.

Steps to fix:

  1. Install the dompurify library if it is not already installed.
  2. Import DOMPurify into the file.
  3. Use DOMPurify.sanitize to sanitize the output of processedSvg before passing it to dangerouslySetInnerHTML.
Suggested changeset 2
packages/common-widgets/src/grid/admin-widget/svg-editor.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/common-widgets/src/grid/admin-widget/svg-editor.tsx b/packages/common-widgets/src/grid/admin-widget/svg-editor.tsx
--- a/packages/common-widgets/src/grid/admin-widget/svg-editor.tsx
+++ b/packages/common-widgets/src/grid/admin-widget/svg-editor.tsx
@@ -1,2 +1,3 @@
 import React, { useState, useRef, useEffect } from "react";
+import DOMPurify from "dompurify";
 import { SvgStyle } from "../settings";
@@ -104,5 +105,6 @@
                             dangerouslySetInnerHTML={{
-                                __html:
+                                __html: DOMPurify.sanitize(
                                     processedSvg(svgCode, svgStyle) ||
-                                    '<div class="text-red-500">Invalid SVG</div>',
+                                    '<div class="text-red-500">Invalid SVG</div>'
+                                ),
                             }}
EOF
@@ -1,2 +1,3 @@
import React, { useState, useRef, useEffect } from "react";
import DOMPurify from "dompurify";
import { SvgStyle } from "../settings";
@@ -104,5 +105,6 @@
dangerouslySetInnerHTML={{
__html:
__html: DOMPurify.sanitize(
processedSvg(svgCode, svgStyle) ||
'<div class="text-red-500">Invalid SVG</div>',
'<div class="text-red-500">Invalid SVG</div>'
),
}}
packages/common-widgets/package.json
Outside changed files

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/common-widgets/package.json b/packages/common-widgets/package.json
--- a/packages/common-widgets/package.json
+++ b/packages/common-widgets/package.json
@@ -63,3 +63,4 @@
         "clsx": "^2.1.1",
-        "react-redux": "^8.1.2"
+        "react-redux": "^8.1.2",
+        "dompurify": "^3.2.5"
     },
EOF
@@ -63,3 +63,4 @@
"clsx": "^2.1.1",
"react-redux": "^8.1.2"
"react-redux": "^8.1.2",
"dompurify": "^3.2.5"
},
This fix introduces these dependencies
Package Version Security advisories
dompurify (npm) 3.2.5 None
Copilot is powered by AI and may make mistakes. Always verify output.
Comment thread packages/common-widgets/src/grid/admin-widget/svg-style-editor.tsx
Comment on lines +44 to +47
__html: processedSvg(
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star-icon lucide-star"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/></svg>',
internalSvgStyle,
),

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML Medium

DOM text
Loading
is reinterpreted as HTML without escaping meta-characters.

Copilot Autofix

AI 12 months ago

To fix the issue, we need to ensure that any data passed to dangerouslySetInnerHTML is sanitized to prevent XSS attacks. This can be achieved by using a library like DOMPurify to sanitize the SVG content before injecting it into the DOM. DOMPurify is a well-known library for sanitizing HTML and SVG content, and it is widely used to mitigate XSS vulnerabilities.

Steps to fix:

  1. Install the dompurify library as a dependency.
  2. Import DOMPurify in the helpers.ts file where the processedSvg function is defined.
  3. Use DOMPurify.sanitize to sanitize the SVG content before returning it from the processedSvg function.
  4. Ensure that the sanitized SVG content is used in the dangerouslySetInnerHTML property.
Suggested changeset 2
packages/common-widgets/src/grid/helpers.ts
Outside changed files

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/common-widgets/src/grid/helpers.ts b/packages/common-widgets/src/grid/helpers.ts
--- a/packages/common-widgets/src/grid/helpers.ts
+++ b/packages/common-widgets/src/grid/helpers.ts
@@ -18,2 +18,4 @@
 
+import DOMPurify from "dompurify";
+
 export const processedSvg = (
@@ -27,3 +29,3 @@
     // For other SVGs, replace the fill attribute if it exists
-    return svgCode
+    const updatedSvgCode = svgCode
         .replace(/currentColor/g, svgStyle.svgColor)
@@ -34,2 +36,5 @@
         .replace(/<svg/, '<svg width="100%" height="100%"');
+
+    // Sanitize the SVG content to prevent XSS
+    return DOMPurify.sanitize(updatedSvgCode, { USE_PROFILES: { svg: true } });
 };
EOF
@@ -18,2 +18,4 @@

import DOMPurify from "dompurify";

export const processedSvg = (
@@ -27,3 +29,3 @@
// For other SVGs, replace the fill attribute if it exists
return svgCode
const updatedSvgCode = svgCode
.replace(/currentColor/g, svgStyle.svgColor)
@@ -34,2 +36,5 @@
.replace(/<svg/, '<svg width="100%" height="100%"');

// Sanitize the SVG content to prevent XSS
return DOMPurify.sanitize(updatedSvgCode, { USE_PROFILES: { svg: true } });
};
packages/common-widgets/package.json
Outside changed files

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/common-widgets/package.json b/packages/common-widgets/package.json
--- a/packages/common-widgets/package.json
+++ b/packages/common-widgets/package.json
@@ -63,3 +63,4 @@
         "clsx": "^2.1.1",
-        "react-redux": "^8.1.2"
+        "react-redux": "^8.1.2",
+        "dompurify": "^3.2.5"
     },
EOF
@@ -63,3 +63,4 @@
"clsx": "^2.1.1",
"react-redux": "^8.1.2"
"react-redux": "^8.1.2",
"dompurify": "^3.2.5"
},
This fix introduces these dependencies
Package Version Security advisories
dompurify (npm) 3.2.5 None
Copilot is powered by AI and may make mistakes. Always verify output.
github-advanced-security[bot]
github-advanced-security AI found potential problems Apr 29, 2025
View reviewed changes
Comment thread packages/common-widgets/src/marquee/admin-widget/item-editor.tsx
</p>
<div
className="w-[100px] h-[60px] flex items-center justify-center"
dangerouslySetInnerHTML={{ __html: svgText }}

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML Medium

DOM text
Loading
is reinterpreted as HTML without escaping meta-characters.

Copilot Autofix

AI 12 months ago

To fix the issue, we need to sanitize the svgText input before using it in dangerouslySetInnerHTML. A well-known library like dompurify can be used to sanitize the input, ensuring that only safe HTML is allowed. This approach preserves the functionality of rendering SVG content while mitigating the XSS risk.

Steps to implement the fix:

  1. Install the dompurify library if it is not already installed.
  2. Import dompurify into the file.
  3. Use DOMPurify.sanitize to sanitize the svgText value before passing it to dangerouslySetInnerHTML.
Suggested changeset 2
packages/common-widgets/src/marquee/admin-widget/item-editor.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/common-widgets/src/marquee/admin-widget/item-editor.tsx b/packages/common-widgets/src/marquee/admin-widget/item-editor.tsx
--- a/packages/common-widgets/src/marquee/admin-widget/item-editor.tsx
+++ b/packages/common-widgets/src/marquee/admin-widget/item-editor.tsx
@@ -1,2 +1,3 @@
 import React from "react";
+import DOMPurify from "dompurify";
 import {
@@ -79,3 +80,3 @@
                                 className="w-[100px] h-[60px] flex items-center justify-center"
-                                dangerouslySetInnerHTML={{ __html: svgText }}
+                                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svgText) }}
                             />
EOF
@@ -1,2 +1,3 @@
import React from "react";
import DOMPurify from "dompurify";
import {
@@ -79,3 +80,3 @@
className="w-[100px] h-[60px] flex items-center justify-center"
dangerouslySetInnerHTML={{ __html: svgText }}
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svgText) }}
/>
packages/common-widgets/package.json
Outside changed files

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/common-widgets/package.json b/packages/common-widgets/package.json
--- a/packages/common-widgets/package.json
+++ b/packages/common-widgets/package.json
@@ -63,3 +63,4 @@
         "clsx": "^2.1.1",
-        "react-redux": "^8.1.2"
+        "react-redux": "^8.1.2",
+        "dompurify": "^3.2.5"
     },
EOF
@@ -63,3 +63,4 @@
"clsx": "^2.1.1",
"react-redux": "^8.1.2"
"react-redux": "^8.1.2",
"dompurify": "^3.2.5"
},
This fix introduces these dependencies
Package Version Security advisories
dompurify (npm) 3.2.5 None
Copilot is powered by AI and may make mistakes. Always verify output.
Comment thread packages/common-widgets/src/marquee/widget/marquee.tsx
const contentRef = useRef<HTMLDivElement>(null);

// Convert children to array
const childrenArray = React.Children.toArray(children);

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused variable childrenArray.

Copilot Autofix

AI 12 months ago

To fix the issue, the unused variable childrenArray should be removed from the code. This involves deleting its declaration on line 29. Since the variable is not used anywhere else in the code, no additional changes are required. This will improve code clarity and eliminate the unnecessary computation of React.Children.toArray(children).

Suggested changeset 1
packages/common-widgets/src/marquee/widget/marquee.tsx

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/common-widgets/src/marquee/widget/marquee.tsx b/packages/common-widgets/src/marquee/widget/marquee.tsx
--- a/packages/common-widgets/src/marquee/widget/marquee.tsx
+++ b/packages/common-widgets/src/marquee/widget/marquee.tsx
@@ -27,4 +27,2 @@
 
-    // Convert children to array
-    const childrenArray = React.Children.toArray(children);
 
EOF
@@ -27,4 +27,2 @@

// Convert children to array
const childrenArray = React.Children.toArray(children);

Copilot is powered by AI and may make mistakes. Always verify output.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@rajat1saxena @github-advanced-security