-
+// BEFORE (risky):
+onChange={e => {
+ const value = parseInt(e.target.value) || null
+ setFormData({ ...formData, security_header_profile_id: value })
+}}
-
+// AFTER (safe):
+onChange={e => {
+ const rawValue = e.target.value
+ let value: number | null = null
- {formData.security_header_profile_id && (
-
- {(() => {
- const selected = securityProfiles?.find(p => p.id === formData.security_header_profile_id)
- if (!selected) return null
+ if (rawValue !== "0" && rawValue !== "") {
+ const parsed = parseInt(rawValue, 10)
+ value = isNaN(parsed) ? null : parsed
+ }
- return (
- <>
-
-
- {selected.description}
-
- >
- )
- })()}
-
- )}
-
-
- Apply HTTP security headers to protect against common web vulnerabilities.{' '}
-
- Manage Profiles →
-
-
-
+ setFormData({ ...formData, security_header_profile_id: value })
+}}
```
**Why:**
-- Users need a clear, discoverable way to assign security headers
-- Grouped by Presets vs Custom for easy scanning
-- Shows security score inline for quick decision-making
-- Link to Security Headers page for advanced users
+- Explicitly handles "0" case (None/null)
+- Explicitly handles empty string
+- Checks for NaN before assigning
+- No reliance on falsy coercion
----
+### Fix 2: Backend - Add Logging and Error Handling (CRITICAL)
-## Part C: Update SecurityHeaders Page UI
+**File:** `backend/internal/api/handlers/proxy_host_handler.go`
+**Lines:** 231-248
-### Changes to SecurityHeaders.tsx
-
-**File:** `frontend/src/pages/SecurityHeaders.tsx`
-
-#### 1. Remove "Apply" Button from Preset Cards
-
-**Before (lines 143-149):**
-```tsx
-
- Pre-configured security profiles you can assign to proxy hosts. Clone to customize.
-
-```
-
-#### 5. Update Preset Modal to Show Read-Only Badge
-
-**File:** `frontend/src/components/SecurityHeaderProfileForm.tsx`
-
-**Add visual indicator when viewing presets:**
-```tsx
-{initialData?.is_preset && (
-