Security: Cross-Site Scripting (XSS) Vulnerability in FileViewer Component

Author: Bob Strahan

CHANGELOG.md

@@ -41,8 +41,9 @@ SPDX-License-Identifier: MIT-0
 - **Action Required**: Review your current CloudFormation parameter settings before updating and update your configuration accordingly to preserve existing behavior
 
 ### Fixed
-**Fixed B615 "Unsafe Hugging Face Hub download without revision pinning" security finding in Pattern-3 fine-tuning module** - Added revision pinning with to prevent supply chain attacks and ensure reproducible deployments
-**Fixed CloudWatch Log Group Missing Retention regression**
+- **Fixed B615 "Unsafe Hugging Face Hub download without revision pinning" security finding in Pattern-3 fine-tuning module** - Added revision pinning with to prevent supply chain attacks and ensure reproducible deployments
+- **Fixed CloudWatch Log Group Missing Retention regression**
+- **Security: Cross-Site Scripting (XSS) Vulnerability in FileViewer Component** - Fixed high-risk XSS vulnerability in `src/ui/src/components/document-viewer/FileViewer.jsx` where `innerHTML` was used with user-controlled data
 
 ## [0.3.11]
 

src/ui/.eslintrc.security.js

@@ -0,0 +1,29 @@
+// Security-focused ESLint configuration
+// Add this configuration to help detect potential XSS vulnerabilities
+
+module.exports = {
+  "extends": [
+    "react-app",
+    "react-app/jest"
+  ],
+  "plugins": [
+    "no-unsanitized"
+  ],
+  "rules": {
+    // Prevent innerHTML usage with dynamic content
+    "no-unsanitized/property": "error",
+    
+    // Prevent unsafe DOM methods
+    "no-unsanitized/method": "error",
+    
+    // React specific security rules
+    "react/no-danger": "warn",
+    "react/no-danger-with-children": "error",
+    
+    // General security rules
+    "no-eval": "error",
+    "no-implied-eval": "error",
+    "no-new-func": "error",
+    "no-script-url": "error"
+  }
+};

src/ui/src/components/document-viewer/FileViewer.jsx

@@ -70,6 +70,8 @@ const FileViewer = ({ objectKey }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [viewMethod, setViewMethod] = useState('presigned'); // 'presigned' or 'content'
+  const [imageError, setImageError] = useState(false);
+  const [imageErrorUrl, setImageErrorUrl] = useState('');
 
   // Fetch file contents via GraphQL API and process special file types
   const fetchFileContents = async (s3Url) => {
@@ -169,6 +171,14 @@ const FileViewer = ({ objectKey }) => {
     }
   };
 
+  // Reset image error state when presigned URL changes
+  React.useEffect(() => {
+    if (presignedUrl) {
+      setImageError(false);
+      setImageErrorUrl('');
+    }
+  }, [presignedUrl]);
+
   React.useEffect(() => {
     generateUrl();
   }, [objectKey]);
@@ -241,37 +251,51 @@ const FileViewer = ({ objectKey }) => {
     }
     // For image files, display them inline using img tag
     if (fileType === 'image') {
+      const handleImageError = () => {
+        setImageError(true);
+        setImageErrorUrl(presignedUrl);
+      };
+
       return (
         <Box className="document-container" padding={{ top: 's' }}>
           <Box textAlign="center">
-            <img
-              src={presignedUrl}
-              alt="Document preview"
-              style={{
-                maxWidth: '100%',
-                maxHeight: '800px',
-                height: 'auto',
-                objectFit: 'contain',
-              }}
-              onError={(e) => {
-                // On error, replace the image with a download link
-                const container = e.target.parentElement;
-                container.innerHTML = `
-                  <div style="padding: 48px;">
-                    <h3>🖼️ Image Document</h3>
-                    <p>Unable to display this image.</p>
-                    <p>
-                      <a href="${presignedUrl}" target="_blank" rel="noopener noreferrer" 
-                         style="display: inline-block; padding: 12px 24px; background-color: #0073bb; 
-                                color: white; text-decoration: none; border-radius: 4px; 
-                                font-weight: bold; margin: 10px;">
-                        📥 Download Image
-                      </a>
-                    </p>
-                  </div>
-                `;
-              }}
-            />
+            {!imageError ? (
+              <img
+                src={presignedUrl}
+                alt="Document preview"
+                style={{
+                  maxWidth: '100%',
+                  maxHeight: '800px',
+                  height: 'auto',
+                  objectFit: 'contain',
+                }}
+                onError={handleImageError}
+              />
+            ) : (
+              <Box padding="xl">
+                <h3>🖼️ Image Document</h3>
+                <p>Unable to display this image.</p>
+                <p>
+                  <a
+                    href={imageErrorUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{
+                      display: 'inline-block',
+                      padding: '12px 24px',
+                      backgroundColor: '#0073bb',
+                      color: 'white',
+                      textDecoration: 'none',
+                      borderRadius: '4px',
+                      fontWeight: 'bold',
+                      margin: '10px',
+                    }}
+                  >
+                    📥 Download Image
+                  </a>
+                </p>
+              </Box>
+            )}
           </Box>
         </Box>
       );