Fix React XSS vulnerability in dependencies #314

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

SheetMetalConnect merged 2 commits into main from claude/fix-react-xss-vulnerability-NX588

Jan 10, 2026

src/components/PDFViewer.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -14,7 +14,7 @@ import {
  
      ChevronLeft,

      ChevronRight

    } from 'lucide-react';

    import { cn } from '@/lib/utils';

    import { cn, sanitizeUrl, safeOpenUrl } from '@/lib/utils';

    // Configure PDF.js worker from CDN

    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

    @@ -65,17 +65,22 @@ export function PDFViewer({ url, title, compact = false }: PDFViewerProps) {
  
      };

      const handleDownload = () => {

        const safeUrl = sanitizeUrl(url);

        if (!safeUrl) return;

        const link = document.createElement('a');

        link.href = url;

        link.href = safeUrl;

        link.download = title || 'drawing.pdf';

        link.click();

      };

      const handleOpenExternal = () => {

        window.open(url, '_blank');

        safeOpenUrl(url);

      };

      if (!url) {

      // Validate URL to prevent XSS

      const safeFileUrl = sanitizeUrl(url);

      if (!url || !safeFileUrl) {

        return (

          <div className="flex flex-col h-full w-full bg-background items-center justify-center text-muted-foreground">

            <FileText className="h-12 w-12 mb-2 opacity-20" />

    @@ -218,7 +223,7 @@ export function PDFViewer({ url, title, compact = false }: PDFViewerProps) {
  
            {!error && (

              <div className="min-h-full flex justify-center p-4">

                <Document

                  file={url}

                  file={safeFileUrl}

                  onLoadSuccess={onDocumentLoadSuccess}

                  onLoadError={onDocumentLoadError}

                  loading={null}

src/components/admin/IntegrationDetailModal.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -23,6 +23,7 @@ import {
  
      Package,

    } from "lucide-react";

    import { Alert, AlertDescription } from "@/components/ui/alert";

    import { sanitizeUrl, safeOpenUrl } from "@/lib/utils";

    interface Integration {

      id: string;

    @@ -90,9 +91,9 @@ export default function IntegrationDetailModal({
  
                    </DialogTitle>

                    <DialogDescription className="text-base">

                      by {integration.provider_name}

                      {integration.provider_url && (

                      {sanitizeUrl(integration.provider_url) && (

                        <a

                          href={integration.provider_url}

                          href={sanitizeUrl(integration.provider_url)}

                          target="_blank"

                          rel="noopener noreferrer"

                          className="ml-2 inline-flex items-center text-primary hover:underline"

    @@ -190,13 +191,11 @@ export default function IntegrationDetailModal({
  
                    <p className="text-muted-foreground">

                      {integration.pricing_description}

                    </p>

                    {integration.pricing_url && (

                    {sanitizeUrl(integration.pricing_url) && (

                      <Button

                        variant="link"

                        className="px-0"

                        onClick={() =>

                          window.open(integration.pricing_url, "_blank")

                        }

                        onClick={() => safeOpenUrl(integration.pricing_url)}

                      >

                        View pricing details

                        <ExternalLink className="w-4 h-4 ml-1" />

    @@ -268,12 +267,10 @@ export default function IntegrationDetailModal({
  
                  </ol>

                </div>

                {integration.documentation_url && (

                {sanitizeUrl(integration.documentation_url) && (

                  <Button

                    variant="outline"

                    onClick={() =>

                      window.open(integration.documentation_url, "_blank")

                    }

                    onClick={() => safeOpenUrl(integration.documentation_url)}

                  >

                    <BookOpen className="w-4 h-4 mr-2" />

                    View Setup Documentation

    @@ -283,13 +280,11 @@ export default function IntegrationDetailModal({
  
              <TabsContent value="resources" className="space-y-4">

                <div className="grid gap-4">

                  {integration.documentation_url && (

                  {sanitizeUrl(integration.documentation_url) && (

                    <Button

                      variant="outline"

                      className="justify-start"

                      onClick={() =>

                        window.open(integration.documentation_url, "_blank")

                      }

                      onClick={() => safeOpenUrl(integration.documentation_url)}

                    >

                      <BookOpen className="w-5 h-5 mr-3" />

                      <div className="text-left">

    @@ -301,13 +296,11 @@ export default function IntegrationDetailModal({
  
                    </Button>

                  )}

                  {integration.github_repo_url && (

                  {sanitizeUrl(integration.github_repo_url) && (

                    <Button

                      variant="outline"

                      className="justify-start"

                      onClick={() =>

                        window.open(integration.github_repo_url, "_blank")

                      }

                      onClick={() => safeOpenUrl(integration.github_repo_url)}

                    >

                      <Github className="w-5 h-5 mr-3" />

                      <div className="text-left">

    @@ -319,13 +312,11 @@ export default function IntegrationDetailModal({
  
                    </Button>

                  )}

                  {integration.demo_video_url && (

                  {sanitizeUrl(integration.demo_video_url) && (

                    <Button

                      variant="outline"

                      className="justify-start"

                      onClick={() =>

                        window.open(integration.demo_video_url, "_blank")

                      }

                      onClick={() => safeOpenUrl(integration.demo_video_url)}

                    >

                      <ExternalLink className="w-5 h-5 mr-3" />

                      <div className="text-left">

    @@ -342,7 +333,7 @@ export default function IntegrationDetailModal({
  
                      variant="outline"

                      className="justify-start"

                      onClick={() =>

                        window.open(`mailto:${integration.provider_email}`, "_blank")

                        safeOpenUrl(`mailto:${integration.provider_email}`)

                      }

                    >

                      <ExternalLink className="w-5 h-5 mr-3" />

src/lib/utils.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -4,3 +4,60 @@ import { twMerge } from "tailwind-merge"; @@
     export function cn(...inputs: ClassValue[]) {
       return twMerge(clsx(inputs));
     }
+    /**
+     * Allowed URL protocols for safe navigation.
+     * Prevents XSS attacks via javascript: and other dangerous protocols.
+     */
+    const SAFE_URL_PROTOCOLS = ['http:', 'https:', 'mailto:', 'tel:', 'blob:'];
+    /**
+     * Validates and sanitizes a URL to prevent XSS attacks.
+     * Returns undefined for URLs with dangerous protocols (e.g., javascript:).
+     *
+     * @param url - The URL to sanitize
+     * @returns The original URL if safe, undefined otherwise
+     */
+    export function sanitizeUrl(url: string | null | undefined): string | undefined {
+      if (!url) {
+        return undefined;
+      }
+      try {
+        // Handle protocol-relative URLs
+        const urlToCheck = url.startsWith('//') ? `https:${url}` : url;
+        const parsed = new URL(urlToCheck);
+        if (SAFE_URL_PROTOCOLS.includes(parsed.protocol)) {
+          return url;
+        }
+        // Unsafe protocol detected
+        console.warn(`Blocked unsafe URL protocol: ${parsed.protocol}`);
+        return undefined;
+      } catch {
+        // If URL parsing fails, check for dangerous patterns
+        const trimmed = url.trim().toLowerCase();
+        if (trimmed.startsWith('javascript:') ||
+            trimmed.startsWith('data:') ||
+            trimmed.startsWith('vbscript:')) {
+          console.warn('Blocked potentially dangerous URL');
+          return undefined;
+        }
+        // Allow relative URLs and other non-parseable but safe URLs
+        return url;
+      }
+    }
+    /**
+     * Safely opens a URL in a new tab after sanitization.
+     * Does nothing if the URL is unsafe.
+     *
+     * @param url - The URL to open
+     */
+    export function safeOpenUrl(url: string | null | undefined): void {
+      const safeUrl = sanitizeUrl(url);
+      if (safeUrl) {
+        window.open(safeUrl, '_blank', 'noopener,noreferrer');
+      }
+    }

src/pages/admin/IntegrationsMarketplace.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -29,6 +29,7 @@ import {
  
    } from "lucide-react";

    import IntegrationDetailModal from "@/components/admin/IntegrationDetailModal";

    import { toast } from "sonner";

    import { sanitizeUrl, safeOpenUrl } from "@/lib/utils";

    interface Integration {

      id: string;

    @@ -236,14 +237,14 @@ export default function IntegrationsMarketplace() {
  
                <span>{integration.install_count.toLocaleString()} installs</span>

              </div>

            </div>

            {integration.github_repo_url && (

            {sanitizeUrl(integration.github_repo_url) && (

              <div className="mt-4 flex gap-2">

                <Button

                  variant="outline"

                  size="sm"

                  onClick={(e) => {

                    e.stopPropagation();

                    window.open(integration.github_repo_url, "_blank");

                    safeOpenUrl(integration.github_repo_url);

                  }}

                >

                  <Github className="w-4 h-4 mr-2" />

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix React XSS vulnerability in dependencies #314

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!