joachim/FileRise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance CSP for iframe and refactor gallery view event handlers

Browse Source
This commit is contained in:
Ryan
2025-04-26 04:08:56 -04:00
committed by GitHub
parent 6b2bf0ba70
commit 1983f7705f
4 changed files with 178 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
CHANGELOG.md
View File

@@ -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

2
Dockerfile
View File

@@ -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

142
public/js/fileListView.js
View File

@@ -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.

157
src/controllers/folderController.php
View File

@@ -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>