From 1983f7705f3d4f99e753601eb154bfbfe56e0eac Mon Sep 17 00:00:00 2001
From: Ryan <ryantl66@gmail.com>
Date: Sat, 26 Apr 2025 04:08:56 -0400
Subject: [PATCH] enhance CSP for iframe and refactor gallery view event
 handlers

---
 CHANGELOG.md                         |  20 ++--
 Dockerfile                           |   2 +-
 public/js/fileListView.js            | 142 +++++++++++++-----------
 src/controllers/folderController.php | 157 ++++++++++++++-------------
 4 files changed, 178 insertions(+), 143 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21eda79..9ccfc75 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,30 +1,30 @@
 # Changelog
 
-## Changes 4/26/2025
+## Changes 4/26/2025 1.2.6
 
-### 1. Apache / Dockerfile (CSP)
+**Apache / Dockerfile (CSP)**  
 
 - Enabled Apache’s `mod_headers` in the Dockerfile (`a2enmod headers ssl deflate expires proxy proxy_fcgi rewrite`)  
 - Added a strong `Content-Security-Policy` header in the vhost configs to lock down allowed sources for scripts, styles, fonts, images, and connections  
 
-### 2. index.html & CDN Includes
+**index.html & CDN Includes**  
 
 - Applied Subresource Integrity (`integrity` + `crossorigin="anonymous"`) to all static CDN assets (Bootstrap CSS, CodeMirror CSS/JS, Resumable.js, DOMPurify, Fuse.js)  
 - Omitted SRI on Google Fonts & Material Icons links (dynamic per-browser CSS)  
 - Removed all inline `<script>` and `onclick` attributes; now all behaviors live in external JS modules  
 
-### 3. auth.js (Logout Handling)
+**auth.js (Logout Handling)**  
 
 - Moved the logout-on-`?logout=1` snippet from inline HTML into `auth.js`  
 - In `DOMContentLoaded`, attached a `click` listener to `#logoutBtn` that POSTs to `/api/auth/logout.php` and reloads  
 
-### 4. fileActions.js (Modal Button Handlers)
+**fileActions.js (Modal Button Handlers)**  
 
 - Externalized the cancel/download buttons for single-file and ZIP-download modals by adding `click` listeners in `fileActions.js`  
 - Removed the inline `onclick` attributes from `#cancelDownloadFile` and `#confirmSingleDownloadButton` in the HTML  
 - Ensured all file-action modals (delete, download, extract, copy, move, rename) now use JS event handlers instead of inline code  
 
-### 5. domUtils.js
+**domUtils.js**  
 
 - **Removed** all inline `onclick` and `onchange` attributes from:
   - `buildSearchAndPaginationControls` (advanced search toggle, prev/next buttons, items-per-page selector)
@@ -32,7 +32,7 @@
   - `buildFileTableRow` (download, edit, preview, rename buttons)
 - **Retained** all original logic (file-type icon detection, shift-select, debounce, custom confirm modal, etc.)
 
-### 6. fileListView.js
+**fileListView.js**  
 
 - **Stopped** generating inline `onclick` handlers in both table and gallery views.
 - **Added** `data-` attributes on actionable elements:
@@ -43,6 +43,12 @@
   - IDs on controls: `#advancedSearchToggle`, `#searchInput`, `#prevPageBtn`, `#nextPageBtn`, `#selectAll`, `#itemsPerPageSelect`
 - **Introduced** `attachListControlListeners()` to bind all events via `addEventListener` immediately after rendering, preserving every interaction without inline code.
 
+**Additional changes**  
+
+- **Security**: Added `frame-src 'self'` to the Content-Security-Policy header so that the embedded API docs iframe can load from our own origin without relaxing JS restrictions.  
+- **Controller**: Updated `FolderController::shareFolder()` (folderController) to include the gallery-view toggle script block intact, ensuring the “Switch to Gallery View” button works when sharing folders.  
+- **UI (fileListView.js)**: Refactored `renderGalleryView` to remove all inline `onclick=` handlers; switched to using data-attributes and `addEventListener()` for preview, download, edit and rename buttons, fully CSP-compliant.
+
 ---
 
 ## Changes 4/25/2025
diff --git a/Dockerfile b/Dockerfile
index 33c940a..64ea914 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -78,7 +78,7 @@ RUN cat <<'EOF' > /etc/apache2/sites-available/000-default.conf
       Header always set X-Content-Type-Options "nosniff"
       Header always set X-XSS-Protection "1; mode=block"
       Header always set Referrer-Policy "strict-origin-when-cross-origin"
-      Header always set Content-Security-Policy "default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://stackpath.bootstrapcdn.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://stackpath.bootstrapcdn.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';"
+      Header always set Content-Security-Policy "default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://stackpath.bootstrapcdn.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://stackpath.bootstrapcdn.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: blob:; connect-src 'self'; frame-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';"
     </IfModule>
 
     # Compression
diff --git a/public/js/fileListView.js b/public/js/fileListView.js
index 745c82a..f039cb7 100644
--- a/public/js/fileListView.js
+++ b/public/js/fileListView.js
@@ -518,23 +518,26 @@ export function renderGalleryView(folder, container) {
 
     pageFiles.forEach((file, idx) => {
         const idSafe = encodeURIComponent(file.name) + "-" + (startIdx + idx);
+        const cacheKey = folderPath + encodeURIComponent(file.name);
 
         // thumbnail
         let thumbnail;
         if (/\.(jpe?g|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) {
-            const cacheKey = folderPath + encodeURIComponent(file.name);
             if (window.imageCache && window.imageCache[cacheKey]) {
-                thumbnail = `<img src="${window.imageCache[cacheKey]}"
-                             class="gallery-thumbnail"
-                             alt="${escapeHTML(file.name)}"
-                             style="max-width:100%; max-height:${getMaxImageHeight()}px; display:block; margin:0 auto;">`;
+                thumbnail = `<img
+                    src="${window.imageCache[cacheKey]}"
+                    class="gallery-thumbnail"
+                    data-cache-key="${cacheKey}"
+                    alt="${escapeHTML(file.name)}"
+                    style="max-width:100%; max-height:${getMaxImageHeight()}px; display:block; margin:0 auto;">`;
             } else {
                 const imageUrl = folderPath + encodeURIComponent(file.name) + "?t=" + Date.now();
-                thumbnail = `<img src="${imageUrl}"
-                             onload="cacheImage(this,'${cacheKey}')"
-                             class="gallery-thumbnail"
-                             alt="${escapeHTML(file.name)}"
-                             style="max-width:100%; max-height:${getMaxImageHeight()}px; display:block; margin:0 auto;">`;
+                thumbnail = `<img
+                    src="${imageUrl}"
+                    class="gallery-thumbnail"
+                    data-cache-key="${cacheKey}"
+                    alt="${escapeHTML(file.name)}"
+                    style="max-width:100%; max-height:${getMaxImageHeight()}px; display:block; margin:0 auto;">`;
             }
         } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) {
             thumbnail = `<span class="material-icons gallery-icon">audiotrack</span>`;
@@ -572,8 +575,8 @@ export function renderGalleryView(folder, container) {
                  style="position:absolute; top:5px; left:5px; width:16px; height:16px;"></label>
   
           <div class="gallery-preview" style="cursor:pointer;"
-            data-preview-url="${folderPath+encodeURIComponent(file.name)}?t=${Date.now()}"
-            data-preview-name="${file.name}">
+               data-preview-url="${folderPath+encodeURIComponent(file.name)}?t=${Date.now()}"
+               data-preview-name="${file.name}">
             ${thumbnail}
           </div>
   
@@ -585,24 +588,26 @@ export function renderGalleryView(folder, container) {
             ${tagBadgesHTML}
   
             <div class="button-wrap" style="display:flex; justify-content:center; gap:5px; margin-top:5px;">
-               <button … class="download-btn"
-                      data-download-name="${file.name}"
-                      data-download-folder="${file.folder||"root"}">
+              <button type="button" class="btn btn-sm btn-success download-btn"
+                      data-download-name="${escapeHTML(file.name)}"
+                      data-download-folder="${file.folder||"root"}"
                       title="${t('download')}">
                 <i class="material-icons">file_download</i>
               </button>
               ${file.editable ? `
-              <button … class="edit-btn"
-                data-edit-name="${file.name}"
-                data-edit-folder="${file.folder||"root"}">
+              <button type="button" class="btn btn-sm edit-btn"
+                      data-edit-name="${escapeHTML(file.name)}"
+                      data-edit-folder="${file.folder||"root"}"
+                      title="${t('edit')}">
                 <i class="material-icons">edit</i>
               </button>` : ""}
-             <button … class="rename-btn"
-                data-rename-name="${file.name}"
-                data-rename-folder="${file.folder||"root"}">
+              <button type="button" class="btn btn-sm btn-warning rename-btn"
+                      data-rename-name="${escapeHTML(file.name)}"
+                      data-rename-folder="${file.folder||"root"}"
+                      title="${t('rename')}">
                 <i class="material-icons">drive_file_rename_outline</i>
               </button>
-              <button class="btn btn-sm btn-secondary share-btn"
+              <button type="button" class="btn btn-sm btn-secondary share-btn"
                       data-file="${escapeHTML(file.name)}"
                       title="${t('share')}">
                 <i class="material-icons">share</i>
@@ -621,47 +626,60 @@ export function renderGalleryView(folder, container) {
 
     // render
     fileListContent.innerHTML = galleryHTML;
-    
-    // Preview clicks
-    document.querySelectorAll(".gallery-preview").forEach(el => {
-    el.addEventListener("click", () => {
-      const url  = el.dataset.previewUrl;
-      const name = el.dataset.previewName;
-      previewFile(url, name);
-    });
-  });
-  
-  // Download clicks
-  document.querySelectorAll(".download-btn").forEach(btn => {
-    btn.addEventListener("click", e => {
-      e.stopPropagation();
-      openDownloadModal(btn.dataset.downloadName, btn.dataset.downloadFolder);
-    });
-  });
-  
-  // Edit clicks
-  document.querySelectorAll(".edit-btn").forEach(btn => {
-    btn.addEventListener("click", e => {
-      e.stopPropagation();
-      editFile(btn.dataset.editName, btn.dataset.editFolder);
-    });
-  });
-  
-  // Rename clicks
-  document.querySelectorAll(".rename-btn").forEach(btn => {
-    btn.addEventListener("click", e => {
-      e.stopPropagation();
-      renameFile(btn.dataset.renameName, btn.dataset.renameFolder);
-    });
-  });
 
-    // ensure toggle button
-    createViewToggleButton();
+    // --- Now wire up all behaviors without inline handlers ---
 
-    // attach listeners
+    // cache images on load
+    fileListContent.querySelectorAll('.gallery-thumbnail').forEach(img => {
+        const key = img.dataset.cacheKey;
+        img.addEventListener('load', () => cacheImage(img, key));
+    });
+
+    // preview clicks
+    fileListContent.querySelectorAll(".gallery-preview").forEach(el => {
+        el.addEventListener("click", () => {
+            previewFile(el.dataset.previewUrl, el.dataset.previewName);
+        });
+    });
+
+    // download clicks
+    fileListContent.querySelectorAll(".download-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            openDownloadModal(btn.dataset.downloadName, btn.dataset.downloadFolder);
+        });
+    });
+
+    // edit clicks
+    fileListContent.querySelectorAll(".edit-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            editFile(btn.dataset.editName, btn.dataset.editFolder);
+        });
+    });
+
+    // rename clicks
+    fileListContent.querySelectorAll(".rename-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            renameFile(btn.dataset.renameName, btn.dataset.renameFolder);
+        });
+    });
+
+    // share clicks
+    fileListContent.querySelectorAll(".share-btn").forEach(btn => {
+        btn.addEventListener("click", e => {
+            e.stopPropagation();
+            const fileName = btn.dataset.file;
+            const fileObj = fileData.find(f => f.name === fileName);
+            if (fileObj) {
+                import('./filePreview.js').then(m => m.openShareModal(fileObj, folder));
+            }
+        });
+    });
 
     // checkboxes
-    document.querySelectorAll(".file-checkbox").forEach(cb => {
+    fileListContent.querySelectorAll(".file-checkbox").forEach(cb => {
         cb.addEventListener("change", () => updateFileActionButtons());
     });
 
@@ -679,14 +697,13 @@ export function renderGalleryView(folder, container) {
         });
     }
 
-    // pagination
+    // pagination functions
     window.changePage = newPage => {
         window.currentPage = newPage;
         if (window.viewMode === "gallery") renderGalleryView(folder);
         else renderFileTable(folder);
     };
 
-    // items per page
     window.changeItemsPerPage = cnt => {
         window.itemsPerPage = +cnt;
         localStorage.setItem("itemsPerPage", cnt);
@@ -695,8 +712,9 @@ export function renderGalleryView(folder, container) {
         else renderFileTable(folder);
     };
 
-    // update toolbar buttons
+    // update toolbar and toggle button
     updateFileActionButtons();
+    createViewToggleButton();
 }
 
 // Responsive slider constraints based on screen size.
diff --git a/src/controllers/folderController.php b/src/controllers/folderController.php
index 97401e1..05d90c5 100644
--- a/src/controllers/folderController.php
+++ b/src/controllers/folderController.php
@@ -402,19 +402,19 @@ class FolderController
      * @return void Outputs HTML content.
      */
 
-     function formatBytes($bytes)
-     {
-         if ($bytes < 1024) {
-             return $bytes . " B";
-         } elseif ($bytes < 1024 * 1024) {
-             return round($bytes / 1024, 2) . " KB";
-         } elseif ($bytes < 1024 * 1024 * 1024) {
-             return round($bytes / (1024 * 1024), 2) . " MB";
-         } else {
-             return round($bytes / (1024 * 1024 * 1024), 2) . " GB";
-         }
-     }
-     
+    function formatBytes($bytes)
+    {
+        if ($bytes < 1024) {
+            return $bytes . " B";
+        } elseif ($bytes < 1024 * 1024) {
+            return round($bytes / 1024, 2) . " KB";
+        } elseif ($bytes < 1024 * 1024 * 1024) {
+            return round($bytes / (1024 * 1024), 2) . " MB";
+        } else {
+            return round($bytes / (1024 * 1024 * 1024), 2) . " GB";
+        }
+    }
+
     public function shareFolder(): void
     {
         // Retrieve GET parameters.
@@ -759,72 +759,83 @@ class FolderController
             </div>
 
             <script>
-                // (Optional) JavaScript for toggling view modes (list/gallery).
-                var viewMode = 'list';
-                window.imageCache = window.imageCache || {};
-                var filesData = <?php echo json_encode($files); ?>;
+                document.addEventListener('DOMContentLoaded', function() {
+                    // JavaScript for toggling view modes (list/gallery) and wiring up gallery clicks
+                    var viewMode = 'list';
+                    var token = '<?php echo addslashes($token); ?>';
+                    var filesData = <?php echo json_encode($files); ?>;
 
-                // Use the shared‑folder relative path (from your model), not realFolderPath
-                // $data['folder'] should be something like "eafwef/testfolder2/test/new folder two"
-                var rawRelPath = "<?php echo addslashes($data['folder']); ?>";
-                // Split into segments, encode each segment, then re-join
-                var folderSegments = rawRelPath
-                    .split('/')
-                    .map(encodeURIComponent)
-                    .join('/');
+                    // Build the download URL base
+                    var downloadBase = window.location.origin +
+                        '/api/folder/downloadSharedFile.php?token=' +
+                        encodeURIComponent(token) +
+                        '&file=';
 
-                function renderGalleryView() {
-                    var galleryContainer = document.getElementById("galleryViewContainer");
-                    var html = '<div class="shared-gallery-container">';
-                    filesData.forEach(function(file) {
-                        // Encode the filename too
-                        var fileName = encodeURIComponent(file);
-                        var fileUrl = window.location.origin +
-                            '/uploads/' +
-                            folderSegments +
-                            '/' +
-                            fileName +
-                            '?t=' +
-                            Date.now();
+                    function toggleViewMode() {
+                        var listEl = document.getElementById('listViewContainer');
+                        var galleryEl = document.getElementById('galleryViewContainer');
+                        var btn = document.getElementById('toggleBtn');
 
-                        var ext = file.split('.').pop().toLowerCase();
-                        var thumbnail;
-                        if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico'].indexOf(ext) >= 0) {
-                            thumbnail = '<img src="' + fileUrl + '" alt="' + file + '">';
+                        if (viewMode === 'list') {
+                            viewMode = 'gallery';
+                            listEl.style.display = 'none';
+                            renderGalleryView();
+                            galleryEl.style.display = 'block';
+                            btn.textContent = 'Switch to List View';
                         } else {
-                            thumbnail = '<span class="material-icons">insert_drive_file</span>';
+                            viewMode = 'list';
+                            galleryEl.style.display = 'none';
+                            listEl.style.display = 'block';
+                            btn.textContent = 'Switch to Gallery View';
                         }
-
-                        html +=
-                            '<div class="shared-gallery-card">' +
-                            '<div class="gallery-preview" ' +
-                            'onclick="window.location.href=\'' + fileUrl + '\'" ' +
-                            'style="cursor:pointer;">' +
-                            thumbnail +
-                            '</div>' +
-                            '<div class="gallery-info">' +
-                            '<span class="gallery-file-name">' + file + '</span>' +
-                            '</div>' +
-                            '</div>';
-                    });
-                    html += '</div>';
-                    galleryContainer.innerHTML = html;
-                }
-
-                function toggleViewMode() {
-                    if (viewMode === 'list') {
-                        viewMode = 'gallery';
-                        document.getElementById("listViewContainer").style.display = "none";
-                        renderGalleryView();
-                        document.getElementById("galleryViewContainer").style.display = "block";
-                        document.getElementById("toggleBtn").textContent = "Switch to List View";
-                    } else {
-                        viewMode = 'list';
-                        document.getElementById("galleryViewContainer").style.display = "none";
-                        document.getElementById("listViewContainer").style.display = "block";
-                        document.getElementById("toggleBtn").textContent = "Switch to Gallery View";
                     }
-                }
+
+                    // Wire up the toggle button
+                    document.getElementById('toggleBtn')
+                        .addEventListener('click', toggleViewMode);
+
+                    function renderGalleryView() {
+                        var galleryContainer = document.getElementById('galleryViewContainer');
+                        var html = '<div class="shared-gallery-container">';
+
+                        filesData.forEach(function(file) {
+                            var encodedName = encodeURIComponent(file);
+                            var fileUrl = downloadBase + encodedName;
+                            var ext = file.split('.').pop().toLowerCase();
+                            var thumb;
+
+                            if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico'].indexOf(ext) >= 0) {
+                                thumb = '<img src="' + fileUrl + '" alt="' + file + '">';
+                            } else {
+                                thumb = '<span class="material-icons">insert_drive_file</span>';
+                            }
+
+                            html +=
+                                '<div class="shared-gallery-card">' +
+                                '<div class="gallery-preview" data-url="' + fileUrl + '" style="cursor:pointer;">' +
+                                thumb +
+                                '</div>' +
+                                '<div class="gallery-info">' +
+                                '<span class="gallery-file-name">' + file + '</span>' +
+                                '</div>' +
+                                '</div>';
+                        });
+
+                        html += '</div>';
+                        galleryContainer.innerHTML = html;
+
+                        // Wire up each thumbnail click
+                        galleryContainer.querySelectorAll('.gallery-preview')
+                            .forEach(function(el) {
+                                el.addEventListener('click', function() {
+                                    window.location.href = el.dataset.url;
+                                });
+                            });
+                    }
+
+                    // Expose for manual invocation if needed
+                    window.renderGalleryView = renderGalleryView;
+                });
             </script>
         </body>