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

@@ -41,7 +41,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
<div class="ascii-frame-inner">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
<h2 style="margin: 0;">Status Transitions</h2>
<button onclick="showCreateModal()" class="btn">+ New Transition</button>
<button data-action="show-create-modal" class="btn">+ New Transition</button>
</div>
<p style="color: var(--terminal-green-dim); margin-bottom: 1rem;">
@@ -119,8 +119,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</span>
</td>
<td>
<button onclick="editTransition(<?php echo $wf['transition_id']; ?>)" class="btn btn-small">Edit</button>
<button onclick="deleteTransition(<?php echo $wf['transition_id']; ?>)" class="btn btn-small btn-danger">Delete</button>
<button data-action="edit-transition" data-id="<?php echo $wf['transition_id']; ?>" class="btn btn-small">Edit</button>
<button data-action="delete-transition" data-id="<?php echo $wf['transition_id']; ?>" class="btn btn-small btn-danger">Delete</button>
</td>
</tr>
<?php endforeach; ?>
@@ -132,13 +132,13 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
<!-- Create/Edit Modal -->
<div class="settings-modal" id="workflowModal" style="display: none;">
<div class="settings-modal" id="workflowModal" style="display: none;" data-action="close-modal-backdrop">
<div class="settings-content" style="max-width: 450px;">
<div class="settings-header">
<h3 id="modalTitle">Create Transition</h3>
<button class="close-settings" onclick="closeModal()">×</button>
<button class="close-settings" data-action="close-modal">×</button>
</div>
<form id="workflowForm" onsubmit="saveTransition(event)">
<form id="workflowForm">
<input type="hidden" id="transition_id" name="transition_id">
<div class="settings-body">
<div class="setting-row">
@@ -171,7 +171,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
</div>
<div class="settings-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
<button type="button" class="btn btn-secondary" data-action="close-modal">Cancel</button>
</div>
</form>
</div>
@@ -193,16 +193,39 @@ $nonce = SecurityHeadersMiddleware::getNonce();
document.getElementById('workflowModal').style.display = 'none';
}
// Close modal on ESC key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeModal();
// Event delegation for data-action handlers
document.addEventListener('click', function(event) {
const target = event.target.closest('[data-action]');
if (!target) return;
const action = target.dataset.action;
switch (action) {
case 'show-create-modal':
showCreateModal();
break;
case 'close-modal':
closeModal();
break;
case 'close-modal-backdrop':
if (event.target === target) closeModal();
break;
case 'edit-transition':
editTransition(target.dataset.id);
break;
case 'delete-transition':
deleteTransition(target.dataset.id);
break;
}
});
// Close modal when clicking on backdrop (outside content)
document.getElementById('workflowModal').addEventListener('click', (e) => {
if (e.target.classList.contains('settings-modal')) {
// Form submit handler
document.getElementById('workflowForm').addEventListener('submit', function(e) {
saveTransition(e);
});
// Close modal on ESC key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeModal();
}
});