mirror of
https://github.com/kccleoc/seedpgp-web.git
synced 2026-03-07 09:57:50 +08:00
7c4fc1460c
- Eliminate all white/light boxes and backgrounds - Fix drag-drop zone with neon cyberpunk colors (#00f0ff, #ff006e, #16213e) - Fix restored mnemonic display with matrix green (#39ff14) - Fix security options panel with dark gradient - Fix all remaining slate-700/slate-800 labels to cyberpunk neon - Fix info banners and text colors - Update badge components with cyberpunk color scheme - Apply consistent dark theme across all components
67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
|
|
export const SecurityWarnings: React.FC = () => {
|
|
return (
|
|
<div className="space-y-3">
|
|
<Warning
|
|
icon="🧵"
|
|
title="JavaScript Strings are Immutable"
|
|
description="Strings cannot be overwritten in memory. Copies persist until garbage collection runs (timing unpredictable)."
|
|
/>
|
|
|
|
<Warning
|
|
icon="🗑️"
|
|
title="No Guaranteed Memory Wiping"
|
|
description="JavaScript has no secure memory clearing. Sensitive data may linger in RAM until GC or browser restart."
|
|
/>
|
|
|
|
<Warning
|
|
icon="📋"
|
|
title="Clipboard Exposure"
|
|
description="Copied data is accessible to other tabs/apps. Browser extensions can read clipboard contents."
|
|
/>
|
|
|
|
<Warning
|
|
icon="💾"
|
|
title="Browser Storage Persistence"
|
|
description="localStorage survives browser restart. sessionStorage survives page refresh. Both readable by any script on this domain."
|
|
/>
|
|
|
|
<Warning
|
|
icon="🔍"
|
|
title="DevTools Access"
|
|
description="All app state, memory, and storage visible in browser DevTools. Never use on untrusted devices."
|
|
/>
|
|
|
|
<Warning
|
|
icon="🌐"
|
|
title="Network Risks (When Online)"
|
|
description="If hosted online: DNS, HTTPS, CDN, and browser can see usage patterns. Use offline/local for maximum security."
|
|
/>
|
|
|
|
<div className="pt-3 border-t border-[#00f0ff]/30 text-xs text-[#6ef3f7]">
|
|
<strong className="text-[#00f0ff]">Recommendation:</strong>{' '}
|
|
Use this tool on a dedicated offline device. Clear browser data after each use. Never use on shared/public computers.
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Warning = ({
|
|
icon,
|
|
title,
|
|
description,
|
|
}: {
|
|
icon: string;
|
|
title: string;
|
|
description: string;
|
|
}) => (
|
|
<div className="flex gap-2 text-sm">
|
|
<span className="text-lg flex-shrink-0">{icon}</span>
|
|
<div>
|
|
<div className="font-semibold text-[#00f0ff] mb-1" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>{title}</div>
|
|
<div className="text-[#6ef3f7] leading-relaxed">{description}</div>
|
|
</div>
|
|
</div>
|
|
);
|