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:
@@ -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')) {
|
||||
|
||||
Reference in New Issue
Block a user