From 005fb292b4d2fcee898ae438f7181772e9f64cb2 Mon Sep 17 00:00:00 2001
From: LC mac <leochan@hkjin.com>
Date: Thu, 12 Feb 2026 23:16:26 +0800
Subject: [PATCH] fix: Strengthen CSP and improve network button UX

- Fix CSP: Change connect-src from 'self' to 'none' (strict enforced blocking)
- Improve UX: Rename button from 'Blocked/Active' to 'Internet OFF/ON' (layman terms)
- Add clear tooltips explaining security implications:
  - Internet OFF: "Network disabled - Maximum security (no data can leave device)"
  - Internet ON: "Network enabled - Normal operation (browser CSP blocks connections)"
- Update comment to describe functionality: "Click to disable/enable internet access for maximum security"

This implements Option B from security audit: strict CSP enforcement with user-friendly interface explanations.
---
 _headers                  | 2 +-
 src/components/Header.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/_headers b/_headers
index 2235b2d..e5f7822 100644
--- a/_headers
+++ b/_headers
@@ -6,4 +6,4 @@
   X-XSS-Protection: 1; mode=block
 
   # Content Security Policy
-  Content-Security-Policy: default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'; form-action 'none'; frame-ancestors 'none'; base-uri 'self'; upgrade-insecure-requests; block-all-mixed-content; worker-src 'self' blob:; script-src-elem 'self' 'unsafe-inline';
\ No newline at end of file
+  Content-Security-Policy: default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'none'; form-action 'none'; frame-ancestors 'none'; base-uri 'self'; upgrade-insecure-requests; block-all-mixed-content; worker-src 'self' blob:; script-src-elem 'self' 'unsafe-inline';
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e74f2f6..ed0e283 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -93,18 +93,20 @@ const Header: React.FC<HeaderProps> = ({
 
           {/* Right: Action Buttons */}
           <div className="flex items-center gap-2">
-            {/* Network Block toggle */}
+            {/* Network availability toggle - Click to disable/enable internet access for maximum security */}
             <button
               onClick={onToggleNetwork}
               className={`flex items-center gap-1 px-2.5 py-1.5 text-xs rounded-lg font-medium transition-all whitespace-nowrap ${isNetworkBlocked
                   ? 'bg-[#16213e] border border-[#ff006e] text-[#ff006e] hover:bg-[#ff006e20]'
                   : 'bg-[#16213e] border border-[#39ff14] text-[#39ff14] hover:bg-[#39ff1420]'
                 }`}
-              title={isNetworkBlocked ? 'Network BLOCKED' : 'Network ACTIVE'}
+              title={isNetworkBlocked 
+                ? 'Internet disabled - Maximum security (no data can leave your device)' 
+                : 'Internet enabled - Normal operation (browser CSP blocks most connections)'}
             >
               <span className="text-sm">{isNetworkBlocked ? '🚫' : '🌐'}</span>
               <span className="hidden sm:inline text-[10px]">
-                {isNetworkBlocked ? 'Blocked' : 'Active'}
+                {isNetworkBlocked ? 'Internet OFF' : 'Internet ON'}
               </span>
             </button>
           </div>