diff --git a/frontend/src/components/GanttChart.tsx b/frontend/src/components/GanttChart.tsx
index 64cc239..363572d 100644
--- a/frontend/src/components/GanttChart.tsx
+++ b/frontend/src/components/GanttChart.tsx
@@ -4,6 +4,7 @@ import Gantt, { GanttTask, ViewMode } from 'frappe-gantt'
 import api from '../services/api'
 import { dependenciesApi, TaskDependency, DependencyType } from '../services/dependencies'
 import { CircularDependencyError, parseCircularError } from './CircularDependencyError'
+import { escapeHtml } from '../utils/escapeHtml'
 
 interface CycleDetails {
   cycle: string[]
@@ -198,13 +199,14 @@ export function GanttChart({
           const originalTask = taskMap.current.get(task.id)
           if (!originalTask) return ''
 
-          const assignee = originalTask.assignee_name || 'Unassigned'
-          const statusName = originalTask.status_name || 'No Status'
-          const priority = originalTask.priority.charAt(0).toUpperCase() + originalTask.priority.slice(1)
+          const assignee = escapeHtml(originalTask.assignee_name) || 'Unassigned'
+          const statusName = escapeHtml(originalTask.status_name) || 'No Status'
+          const priority = escapeHtml(originalTask.priority.charAt(0).toUpperCase() + originalTask.priority.slice(1))
+          const taskName = escapeHtml(task.name)
 
           return `
             <div class="gantt-popup">
-              <h3 class="gantt-popup-title">${task.name}</h3>
+              <h3 class="gantt-popup-title">${taskName}</h3>
               <div class="gantt-popup-info">
                 <div class="gantt-popup-row">
                   <span class="gantt-popup-label">Assignee:</span>
diff --git a/frontend/src/pages/AuditPage.tsx b/frontend/src/pages/AuditPage.tsx
index c34dfb1..472519c 100644
--- a/frontend/src/pages/AuditPage.tsx
+++ b/frontend/src/pages/AuditPage.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useAuth } from '../contexts/AuthContext'
 import { SkeletonTable } from '../components/Skeleton'
 import { auditService, AuditLog, AuditLogFilters, IntegrityCheckResponse } from '../services/audit'
+import { escapeHtml } from '../utils/escapeHtml'
 
 interface AuditLogDetailProps {
   log: AuditLog
@@ -368,11 +369,11 @@ export default function AuditPage() {
 
     const tableRows = logs.map(log => `
       <tr>
-        <td>${formatDate(log.created_at)}</td>
-        <td>${log.event_type}</td>
-        <td>${log.resource_type} / ${log.resource_id?.substring(0, 8) || '-'}</td>
-        <td>${log.user_name || 'System'}</td>
-        <td><span style="background-color: ${getSensitivityColor(log.sensitivity_level)}; color: ${log.sensitivity_level === 'medium' ? '#000' : '#fff'}; padding: 2px 8px; border-radius: 4px; font-size: 12px;">${log.sensitivity_level}</span></td>
+        <td>${escapeHtml(formatDate(log.created_at))}</td>
+        <td>${escapeHtml(log.event_type)}</td>
+        <td>${escapeHtml(log.resource_type)} / ${escapeHtml(log.resource_id?.substring(0, 8)) || '-'}</td>
+        <td>${escapeHtml(log.user_name) || 'System'}</td>
+        <td><span style="background-color: ${getSensitivityColor(log.sensitivity_level)}; color: ${log.sensitivity_level === 'medium' ? '#000' : '#fff'}; padding: 2px 8px; border-radius: 4px; font-size: 12px;">${escapeHtml(log.sensitivity_level)}</span></td>
       </tr>
     `).join('')
 
diff --git a/frontend/src/utils/escapeHtml.ts b/frontend/src/utils/escapeHtml.ts
new file mode 100644
index 0000000..ae6595b
--- /dev/null
+++ b/frontend/src/utils/escapeHtml.ts
@@ -0,0 +1,24 @@
+/**
+ * Escapes HTML special characters to prevent XSS attacks.
+ * Use this when inserting dynamic content into HTML strings.
+ */
+export function escapeHtml(unsafe: string | null | undefined): string {
+  if (unsafe == null) return ''
+  return String(unsafe)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+
+/**
+ * Escapes HTML for use in HTML attributes.
+ * More restrictive than escapeHtml - also escapes backticks and equals.
+ */
+export function escapeAttr(unsafe: string | null | undefined): string {
+  if (unsafe == null) return ''
+  return escapeHtml(unsafe)
+    .replace(/`/g, '&#96;')
+    .replace(/=/g, '&#61;')
+}