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.
This commit is contained in:
LC mac
2026-02-12 23:16:26 +08:00
parent 7cec260ad1
commit 005fb292b4
2 changed files with 6 additions and 4 deletions

View File

@@ -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';
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';

View File

@@ -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>