Harden CSP by removing unsafe-inline for scripts

Refactored all inline event handlers (onclick, onchange, onsubmit) to use
addEventListener with data-action attributes and event delegation pattern.

Changes:
- views/*.php: Replaced inline handlers with data-action attributes
- views/admin/*.php: Same refactoring for all admin views
- assets/js/dashboard.js: Added event delegation for bulk/quick action modals
- assets/js/ticket.js: Added event delegation for dynamic elements
- assets/js/markdown.js: Refactored toolbar button handlers
- assets/js/keyboard-shortcuts.js: Refactored modal close button
- SecurityHeadersMiddleware.php: Enabled strict CSP with nonces

The CSP now uses script-src 'self' 'nonce-{nonce}' instead of 'unsafe-inline',
significantly improving XSS protection.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-30 13:15:55 -05:00
parent 37be81b3e2
commit c3f7593f3c
13 changed files with 564 additions and 158 deletions

View File

@@ -84,7 +84,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<span class="user-name">👤 <?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username']); ?></span>
<?php if ($GLOBALS['currentUser']['is_admin']): ?>
<div class="admin-dropdown">
<button class="admin-badge" onclick="toggleAdminMenu(event)">Admin ▼</button>
<button class="admin-badge" data-action="toggle-admin-menu">Admin ▼</button>
<div class="admin-dropdown-content" id="adminDropdown">
<a href="/admin/templates">📋 Templates</a>
<a href="/admin/workflow">🔄 Workflow</a>
@@ -96,14 +96,14 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
</div>
<?php endif; ?>
<button class="settings-icon" title="Settings (Alt+S)" onclick="openSettingsModal()">⚙</button>
<button class="settings-icon" title="Settings (Alt+S)" data-action="open-settings">⚙</button>
<?php endif; ?>
</div>
</div>
<!-- Collapsible ASCII Banner -->
<div class="ascii-banner-wrapper collapsed">
<button class="banner-toggle" onclick="toggleBanner()">
<button class="banner-toggle" data-action="toggle-banner">
<span class="toggle-icon">▼</span> ASCII Banner
</button>
<div id="ascii-banner-container" class="banner-content"></div>
@@ -127,7 +127,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<div class="dashboard-layout" id="dashboardLayout">
<!-- Left Sidebar with Filters -->
<aside class="dashboard-sidebar" id="dashboardSidebar">
<button class="sidebar-collapse-btn" onclick="toggleSidebar()" title="Collapse Sidebar">◀ Hide</button>
<button class="sidebar-collapse-btn" data-action="toggle-sidebar" title="Collapse Sidebar">◀ Hide</button>
<div class="sidebar-content">
<div class="ascii-frame-inner">
<div class="ascii-subsection-header">Filters</div>
@@ -190,7 +190,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
</aside>
<!-- Expand button shown when sidebar is collapsed -->
<button class="sidebar-expand-btn" id="sidebarExpandBtn" onclick="toggleSidebar()" title="Show Filters">▶ Filters</button>
<button class="sidebar-expand-btn" id="sidebarExpandBtn" data-action="toggle-sidebar" title="Show Filters">▶ Filters</button>
<!-- Main Content Area -->
<main class="dashboard-main">
@@ -274,7 +274,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
class="search-box"
value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
<button type="submit" class="btn search-btn">Search</button>
<button type="button" class="btn btn-secondary" onclick="openAdvancedSearch()" title="Advanced Search">⚙ Advanced</button>
<button type="button" class="btn btn-secondary" data-action="open-advanced-search" title="Advanced Search">⚙ Advanced</button>
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
<a href="?" class="clear-search-btn">✗</a>
<?php endif; ?>
@@ -284,15 +284,15 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<!-- Center: Actions + Count -->
<div class="toolbar-center">
<div class="view-toggle">
<button id="tableViewBtn" class="view-btn active" onclick="setViewMode('table')" title="Table View">≡</button>
<button id="cardViewBtn" class="view-btn" onclick="setViewMode('card')" title="Kanban View">▦</button>
<button id="tableViewBtn" class="view-btn active" data-action="set-view-mode" data-mode="table" title="Table View">≡</button>
<button id="cardViewBtn" class="view-btn" data-action="set-view-mode" data-mode="card" title="Kanban View">▦</button>
</div>
<button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">+ New Ticket</button>
<button data-action="navigate" data-url="<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create" class="btn create-ticket">+ New Ticket</button>
<div class="export-dropdown" id="exportDropdown" style="display: none;">
<button class="btn" onclick="toggleExportMenu(event)">↓ Export Selected (<span id="exportCount">0</span>)</button>
<button class="btn" data-action="toggle-export-menu">↓ Export Selected (<span id="exportCount">0</span>)</button>
<div class="export-dropdown-content" id="exportDropdownContent">
<a href="#" onclick="exportSelectedTickets('csv'); return false;">CSV</a>
<a href="#" onclick="exportSelectedTickets('json'); return false;">JSON</a>
<a href="#" data-action="export-tickets" data-format="csv">CSV</a>
<a href="#" data-action="export-tickets" data-format="json">JSON</a>
</div>
</div>
<span class="ticket-count">Total: <?php echo $totalTickets; ?></span>
@@ -308,7 +308,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
if ($page > 1) {
$currentParams['page'] = $page - 1;
$prevUrl = '?' . http_build_query($currentParams);
echo "<button onclick='window.location.href=\"$prevUrl\"'>«</button>";
echo "<button data-action='navigate' data-url='$prevUrl'>«</button>";
}
// Page number buttons
@@ -316,14 +316,14 @@ $nonce = SecurityHeadersMiddleware::getNonce();
$activeClass = ($i === $page) ? 'active' : '';
$currentParams['page'] = $i;
$pageUrl = '?' . http_build_query($currentParams);
echo "<button class='$activeClass' onclick='window.location.href=\"$pageUrl\"'>$i</button>";
echo "<button class='$activeClass' data-action='navigate' data-url='$pageUrl'>$i</button>";
}
// Next page button
if ($page < $totalPages) {
$currentParams['page'] = $page + 1;
$nextUrl = '?' . http_build_query($currentParams);
echo "<button onclick='window.location.href=\"$nextUrl\"'>»</button>";
echo "<button data-action='navigate' data-url='$nextUrl'>»</button>";
}
?>
</div>
@@ -349,10 +349,10 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
<div class="bulk-actions-inline" style="display: none;">
<span id="selected-count">0</span> tickets selected
<button onclick="showBulkStatusModal()" class="btn btn-bulk">Change Status</button>
<button onclick="showBulkAssignModal()" class="btn btn-bulk">Assign</button>
<button onclick="showBulkPriorityModal()" class="btn btn-bulk">Priority</button>
<button onclick="clearSelection()" class="btn btn-secondary">Clear</button>
<button data-action="bulk-status" class="btn btn-bulk">Change Status</button>
<button data-action="bulk-assign" class="btn btn-bulk">Assign</button>
<button data-action="bulk-priority" class="btn btn-bulk">Priority</button>
<button data-action="clear-selection" class="btn btn-secondary">Clear</button>
</div>
<?php endif; ?>
@@ -362,7 +362,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<thead>
<tr>
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
<th style="width: 40px;"><input type="checkbox" id="selectAllCheckbox" onclick="toggleSelectAll()"></th>
<th style="width: 40px;"><input type="checkbox" id="selectAllCheckbox" data-action="toggle-select-all"></th>
<?php endif; ?>
<?php
$currentSort = isset($_GET['sort']) ? $_GET['sort'] : 'ticket_id';
@@ -390,7 +390,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
$sortClass = ($currentSort === $col) ? "sort-$currentDir" : '';
$sortParams = array_merge($_GET, ['sort' => $col, 'dir' => $newDir]);
$sortUrl = '?' . http_build_query($sortParams);
echo "<th class='$sortClass' onclick='window.location.href=\"$sortUrl\"'>$label</th>";
echo "<th class='$sortClass' data-action='navigate' data-url='$sortUrl'>$label</th>";
}
}
?>
@@ -406,7 +406,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
// Add checkbox column for admins
if ($GLOBALS['currentUser']['is_admin'] ?? false) {
echo "<td onclick='toggleRowCheckbox(event, this)' class='checkbox-cell'><input type='checkbox' class='ticket-checkbox' value='{$row['ticket_id']}' onchange='updateSelectionCount()'></td>";
echo "<td data-action='toggle-row-checkbox' class='checkbox-cell'><input type='checkbox' class='ticket-checkbox' value='{$row['ticket_id']}' data-action='update-selection'></td>";
}
echo "<td><a href='/ticket/{$row['ticket_id']}' class='ticket-link'>{$row['ticket_id']}</a></td>";
@@ -422,9 +422,9 @@ $nonce = SecurityHeadersMiddleware::getNonce();
// Quick actions column
echo "<td class='quick-actions-cell'>";
echo "<div class='quick-actions'>";
echo "<button onclick=\"event.stopPropagation(); window.location.href='/ticket/{$row['ticket_id']}'\" class='quick-action-btn' title='View'>👁</button>";
echo "<button onclick=\"event.stopPropagation(); quickStatusChange('{$row['ticket_id']}', '{$row['status']}')\" class='quick-action-btn' title='Change Status'>🔄</button>";
echo "<button onclick=\"event.stopPropagation(); quickAssign('{$row['ticket_id']}')\" class='quick-action-btn' title='Assign'>👤</button>";
echo "<button data-action='view-ticket' data-ticket-id='{$row['ticket_id']}' class='quick-action-btn' title='View'>👁</button>";
echo "<button data-action='quick-status' data-ticket-id='{$row['ticket_id']}' data-status='{$row['status']}' class='quick-action-btn' title='Change Status'>🔄</button>";
echo "<button data-action='quick-assign' data-ticket-id='{$row['ticket_id']}' class='quick-action-btn' title='Assign'>👤</button>";
echo "</div>";
echo "</td>";
echo "</tr>";
@@ -487,14 +487,14 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
<!-- Settings Modal -->
<div class="settings-modal" id="settingsModal" style="display: none;" onclick="closeOnBackdropClick(event)">
<div class="settings-modal" id="settingsModal" style="display: none;" data-action="close-settings-backdrop">
<div class="settings-content">
<span class="bottom-left-corner">╚</span>
<span class="bottom-right-corner">╝</span>
<div class="settings-header">
<h3>⚙ System Preferences</h3>
<button class="close-settings" onclick="closeSettingsModal()">✗</button>
<button class="close-settings" data-action="close-settings">✗</button>
</div>
<div class="settings-body">
@@ -639,34 +639,34 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
<div class="settings-footer">
<button class="btn btn-primary" onclick="saveSettings()">Save Preferences</button>
<button class="btn btn-secondary" onclick="closeSettingsModal()">Cancel</button>
<button class="btn btn-primary" data-action="save-settings">Save Preferences</button>
<button class="btn btn-secondary" data-action="close-settings">Cancel</button>
</div>
</div>
</div>
<!-- Advanced Search Modal -->
<div class="settings-modal" id="advancedSearchModal" style="display: none;" onclick="closeOnAdvancedSearchBackdropClick(event)">
<div class="settings-modal" id="advancedSearchModal" style="display: none;" data-action="close-advanced-search-backdrop">
<div class="settings-content">
<div class="settings-header">
<h3>🔍 Advanced Search</h3>
<button class="close-settings" onclick="closeAdvancedSearch()">✗</button>
<button class="close-settings" data-action="close-advanced-search">✗</button>
</div>
<form id="advancedSearchForm" onsubmit="performAdvancedSearch(event)">
<form id="advancedSearchForm">
<div class="settings-body">
<!-- Saved Filters -->
<div class="settings-section">
<h4>╔══ Saved Filters ══╗</h4>
<div class="setting-row">
<label for="saved-filters-select">Load Filter:</label>
<select id="saved-filters-select" class="setting-select" style="max-width: 70%;" onchange="loadSavedFilter()">
<select id="saved-filters-select" class="setting-select" style="max-width: 70%;" data-action="load-saved-filter">
<option value="">-- Select a saved filter --</option>
</select>
</div>
<div class="setting-row" style="justify-content: flex-end; gap: 0.5rem;">
<button type="button" class="btn btn-secondary" onclick="saveCurrentFilter()" style="padding: 0.5rem 1rem;">💾 Save Current</button>
<button type="button" class="btn btn-secondary" onclick="deleteSavedFilter()" style="padding: 0.5rem 1rem;">🗑 Delete Selected</button>
<button type="button" class="btn btn-secondary" data-action="save-filter" style="padding: 0.5rem 1rem;">💾 Save Current</button>
<button type="button" class="btn btn-secondary" data-action="delete-filter" style="padding: 0.5rem 1rem;">🗑 Delete Selected</button>
</div>
</div>
@@ -757,8 +757,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<div class="settings-footer">
<button type="submit" class="btn btn-primary">Search</button>
<button type="button" class="btn btn-secondary" onclick="resetAdvancedSearch()">Reset</button>
<button type="button" class="btn btn-secondary" onclick="closeAdvancedSearch()">Cancel</button>
<button type="button" class="btn btn-secondary" data-action="reset-advanced-search">Reset</button>
<button type="button" class="btn btn-secondary" data-action="close-advanced-search">Cancel</button>
</div>
</form>
</div>
@@ -768,26 +768,159 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/keyboard-shortcuts.js"></script>
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/advanced-search.js"></script>
<script nonce="<?php echo $nonce; ?>">
// Admin dropdown toggle
function toggleAdminMenu(event) {
event.stopPropagation();
const dropdown = document.getElementById('adminDropdown');
dropdown.classList.toggle('show');
}
// Close admin dropdown when clicking outside
// Event delegation for all data-action handlers
document.addEventListener('click', function(event) {
const dropdown = document.getElementById('adminDropdown');
if (dropdown && !event.target.closest('.admin-dropdown')) {
dropdown.classList.remove('show');
const target = event.target.closest('[data-action]');
if (!target) {
// Close admin dropdown when clicking outside
const dropdown = document.getElementById('adminDropdown');
if (dropdown && !event.target.closest('.admin-dropdown')) {
dropdown.classList.remove('show');
}
return;
}
const action = target.dataset.action;
switch (action) {
case 'toggle-admin-menu':
event.stopPropagation();
document.getElementById('adminDropdown').classList.toggle('show');
break;
case 'open-settings':
openSettingsModal();
break;
case 'close-settings':
closeSettingsModal();
break;
case 'close-settings-backdrop':
if (event.target === target) closeSettingsModal();
break;
case 'save-settings':
saveSettings();
break;
case 'toggle-banner':
toggleBanner();
break;
case 'toggle-sidebar':
toggleSidebar();
break;
case 'open-advanced-search':
openAdvancedSearch();
break;
case 'close-advanced-search':
closeAdvancedSearch();
break;
case 'close-advanced-search-backdrop':
if (event.target === target) closeAdvancedSearch();
break;
case 'reset-advanced-search':
resetAdvancedSearch();
break;
case 'set-view-mode':
setViewMode(target.dataset.mode);
break;
case 'navigate':
window.location.href = target.dataset.url;
break;
case 'toggle-export-menu':
event.stopPropagation();
toggleExportMenu(event);
break;
case 'export-tickets':
event.preventDefault();
exportSelectedTickets(target.dataset.format);
break;
case 'bulk-status':
showBulkStatusModal();
break;
case 'bulk-assign':
showBulkAssignModal();
break;
case 'bulk-priority':
showBulkPriorityModal();
break;
case 'clear-selection':
clearSelection();
break;
case 'toggle-select-all':
toggleSelectAll();
break;
case 'toggle-row-checkbox':
toggleRowCheckbox(event, target);
break;
case 'view-ticket':
event.stopPropagation();
window.location.href = '/ticket/' + target.dataset.ticketId;
break;
case 'quick-status':
event.stopPropagation();
quickStatusChange(target.dataset.ticketId, target.dataset.status);
break;
case 'quick-assign':
event.stopPropagation();
quickAssign(target.dataset.ticketId);
break;
case 'save-filter':
saveCurrentFilter();
break;
case 'delete-filter':
deleteSavedFilter();
break;
}
});
// Handle change events separately
document.addEventListener('change', function(event) {
const target = event.target.closest('[data-action]');
if (!target) return;
const action = target.dataset.action;
switch (action) {
case 'update-selection':
updateSelectionCount();
break;
case 'load-saved-filter':
loadSavedFilter();
break;
}
});
// Handle form submit for advanced search
document.getElementById('advancedSearchForm').addEventListener('submit', function(event) {
performAdvancedSearch(event);
});
// Helper function to get date in server timezone
function getServerDate() {
// Get current UTC time
const now = new Date();
// Apply server timezone offset (APP_TIMEZONE_OFFSET is in minutes)
const serverTime = new Date(now.getTime() + (window.APP_TIMEZONE_OFFSET * 60000) + (now.getTimezoneOffset() * 60000));
return serverTime.getFullYear() + '-' +
String(serverTime.getMonth() + 1).padStart(2, '0') + '-' +
@@ -800,7 +933,6 @@ $nonce = SecurityHeadersMiddleware::getNonce();
card.addEventListener('click', function() {
const classList = this.classList;
let url = '/?';
// Use server timezone date (default: EST)
const today = getServerDate();
if (classList.contains('stat-open')) {