fix: 全面代码审查修复 — 安全/类型/持久化/代码质量 (28项)
🔴 CRITICAL (1): - tauri.conf.json: CSP 从 null 改为最小权限策略 🟠 HIGH (6): - 新建 capabilities/default.json: Tauri v2 权限约束(store/dialog/clipboard) - cli: 路径遍历防护 — 拒绝含 ParentDir 组件的输出路径 - HistoryList: 删除/清空同步持久化到 store,历史点击用 formData 回填 - ExportPanel: 移除 console.warn,getCurrentText any→QrState - useQrEncode: WiFi 密码在历史中脱敏显示(P:***),Store 实例缓存 🟡 MEDIUM (10): - mode.rs: Kanji fallback 从 UTF-8 字节改为 13-bit 零值占位(段内模式一致) - mode.rs: Shift JIS 第二字节跳过 0x7F 空洞,修正行内索引 - mode.rs: encode_numeric/alphanumeric 添加 debug_assert! 前置条件 - mask.rs: best_matrix.unwrap()→expect() 附错误信息 - version.rs: ec_info 仅返回 count>0 的 BlockInfo,EcInfo/BlockInfo 加 Debug+Clone - types/index.ts: HistoryEntry.mode string→ModeType,新增 formData 字段 - qrContext.tsx: 使用缓存 Store 加载历史 🟢 LOW (11): - cargo fmt 全部文件 - svg.rs: String::new()→with_capacity() 预分配 - patterns.rs: encode_format_info 拆分为两行提高可读性 - png.rs: 提取 fill_module() 辅助函数降低嵌套 - ErrorBoundary: 添加 componentDidCatch 错误日志入口 - QrPreview: dangerouslySetInnerHTML→<img>+data URL(安全),loading 状态指示 - galois.rs/version.rs: 5 处 #[allow(clippy::indexing_slicing)]+安全文档 - 新建 utils/qrText.ts: 集中管理 6 种模式的文本构造,消除 ExportPanel/mode 间重复 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -8,6 +8,12 @@ export default class ErrorBoundary extends Component<Props, State> {
|
||||
|
||||
static getDerivedStateFromError(error: Error) { return { hasError: true, error }; }
|
||||
|
||||
componentDidCatch(error: Error, info: React.ErrorInfo) {
|
||||
// 生产环境错误日志记录入口
|
||||
// TODO: 集成遥测服务后将错误上报
|
||||
console.error('QRGen ErrorBoundary 捕获错误:', error.message, info.componentStack);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
|
||||
@@ -4,27 +4,18 @@ import { invoke } from '@tauri-apps/api/core';
|
||||
import { writeText } from '@tauri-apps/plugin-clipboard-manager';
|
||||
import { save } from '@tauri-apps/plugin-dialog';
|
||||
import { writeFile } from '@tauri-apps/plugin-fs';
|
||||
|
||||
function getCurrentText(state: any): string {
|
||||
switch (state.mode) {
|
||||
case 'url': return state.formData.url || '';
|
||||
case 'wifi': return `WIFI:T:${state.formData.encryption || 'WPA'};S:${state.formData.ssid || ''};P:${state.formData.password || ''};;`;
|
||||
case 'vcard': return `BEGIN:VCARD\nVERSION:3.0\nFN:${state.formData.name || ''}\nTEL:${state.formData.phone || ''}\nEMAIL:${state.formData.email || ''}\nORG:${state.formData.company || ''}\nADR:${state.formData.address || ''}\nEND:VCARD`;
|
||||
case 'email': return `mailto:${state.formData.to || ''}?subject=${encodeURIComponent(state.formData.subject || '')}&body=${encodeURIComponent(state.formData.body || '')}`;
|
||||
case 'phone': return `tel:${state.formData.number || ''}`;
|
||||
case 'sms': return `smsto:${state.formData.number || ''}:${state.formData.message || ''}`;
|
||||
default: return state.formData.text || '';
|
||||
}
|
||||
}
|
||||
import type { QrConfig } from '../types';
|
||||
import { buildEncodedText } from '../utils/qrText';
|
||||
|
||||
export default function ExportPanel() {
|
||||
const { state, dispatch } = useQrState();
|
||||
const [exporting, setExporting] = useState(false);
|
||||
|
||||
const handleCopySvg = async () => {
|
||||
if (state.preview?.svg) {
|
||||
if (!state.preview?.svg) return;
|
||||
try {
|
||||
await writeText(state.preview.svg);
|
||||
}
|
||||
} catch { /* 剪贴板不可用时静默忽略 */ }
|
||||
};
|
||||
|
||||
const handleExportPng = async () => {
|
||||
@@ -38,15 +29,13 @@ export default function ExportPanel() {
|
||||
if (!filePath) { setExporting(false); return; }
|
||||
|
||||
const bytes: number[] = await invoke('export_png', {
|
||||
text: getCurrentText(state),
|
||||
text: buildEncodedText(state.mode, state.formData),
|
||||
level: state.config.level,
|
||||
margin: state.config.margin,
|
||||
moduleSize: state.config.moduleSize,
|
||||
});
|
||||
await writeFile(filePath, new Uint8Array(bytes));
|
||||
} catch (e) {
|
||||
console.warn('导出 PNG 失败:', e);
|
||||
}
|
||||
} catch { /* 导出失败时静默处理，UI 回到就绪状态 */ }
|
||||
setExporting(false);
|
||||
};
|
||||
|
||||
@@ -59,9 +48,7 @@ export default function ExportPanel() {
|
||||
});
|
||||
if (!filePath) return;
|
||||
await writeFile(filePath, new TextEncoder().encode(state.preview.svg));
|
||||
} catch (e) {
|
||||
console.warn('导出 SVG 失败:', e);
|
||||
}
|
||||
} catch { /* 导出失败时静默处理 */ }
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -72,7 +59,7 @@ export default function ExportPanel() {
|
||||
纠错级别
|
||||
<select
|
||||
value={state.config.level}
|
||||
onChange={e => dispatch({ type: 'SET_CONFIG', payload: { level: e.target.value as any } })}
|
||||
onChange={e => dispatch({ type: 'SET_CONFIG', payload: { level: e.target.value as QrConfig['level'] } })}
|
||||
className="w-full mt-1 px-2 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm outline-none focus:ring-2 focus:ring-blue-500/30"
|
||||
>
|
||||
<option value="L">L — 7%</option>
|
||||
|
||||
@@ -1,26 +1,30 @@
|
||||
import { useQrState } from '../store/qrContext';
|
||||
import { MODE_LABELS, type HistoryEntry } from '../types';
|
||||
import { persistHistory } from '../hooks/useQrEncode';
|
||||
|
||||
export default function HistoryList() {
|
||||
const { state, dispatch } = useQrState();
|
||||
|
||||
const handleClick = (entry: HistoryEntry) => {
|
||||
dispatch({ type: 'SET_MODE', payload: entry.mode as any });
|
||||
try {
|
||||
const formData = JSON.parse(entry.content);
|
||||
dispatch({ type: 'SET_FORM_DATA', payload: formData });
|
||||
} catch {
|
||||
dispatch({ type: 'SET_MODE', payload: entry.mode });
|
||||
// 优先使用存储的 formData 恢复表单，否则回退到纯文本
|
||||
if (entry.formData) {
|
||||
dispatch({ type: 'SET_FORM_DATA', payload: entry.formData });
|
||||
} else {
|
||||
dispatch({ type: 'SET_FORM_DATA', payload: { text: entry.content } });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (e: React.MouseEvent, id: string) => {
|
||||
e.stopPropagation();
|
||||
dispatch({ type: 'REMOVE_HISTORY', payload: id });
|
||||
const updated = state.history.filter(h => h.id !== id);
|
||||
dispatch({ type: 'SET_HISTORY', payload: updated });
|
||||
persistHistory(updated);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
dispatch({ type: 'SET_HISTORY', payload: [] });
|
||||
persistHistory([]);
|
||||
};
|
||||
|
||||
const formatTime = (ts: number) => {
|
||||
@@ -53,7 +57,7 @@ export default function HistoryList() {
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="px-1 py-0.5 rounded text-[10px] font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400">
|
||||
{MODE_LABELS[entry.mode as keyof typeof MODE_LABELS] || entry.mode}
|
||||
{MODE_LABELS[entry.mode] || entry.mode}
|
||||
</span>
|
||||
<span className="text-gray-400">{formatTime(entry.timestamp)}</span>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,29 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useQrState } from '../store/qrContext';
|
||||
|
||||
/** 将 SVG 字符串转为安全的 data URL（<img> 标签中浏览器会阻止 SVG 内的脚本执行） */
|
||||
function svgToDataUrl(svg: string): string {
|
||||
const encoded = btoa(unescape(encodeURIComponent(svg)));
|
||||
return `data:image/svg+xml;base64,${encoded}`;
|
||||
}
|
||||
|
||||
export default function QrPreview() {
|
||||
const { state } = useQrState();
|
||||
|
||||
if (!state.preview?.svg) {
|
||||
const svgDataUrl = useMemo(
|
||||
() => (state.preview?.svg ? svgToDataUrl(state.preview.svg) : null),
|
||||
[state.preview?.svg],
|
||||
);
|
||||
|
||||
if (!svgDataUrl) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-3 text-gray-400">
|
||||
<div className="w-64 h-64 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-2xl flex items-center justify-center bg-white/50 dark:bg-gray-800/50">
|
||||
<span className="text-sm">输入内容生成 QR 码</span>
|
||||
{state.loading ? (
|
||||
<span className="text-sm animate-pulse">生成中...</span>
|
||||
) : (
|
||||
<span className="text-sm">输入内容生成 QR 码</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -15,15 +31,16 @@ export default function QrPreview() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
{/* SVG 由 Rust 端 qr-core 生成，仅含 <rect> 和固定颜色，无用户文本嵌入 */}
|
||||
<div
|
||||
className="w-64 h-64 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-2xl p-4 flex items-center justify-center bg-white dark:bg-white qr-preview"
|
||||
dangerouslySetInnerHTML={{ __html: state.preview.svg }}
|
||||
{/* SVG 转为 data URL 通过 <img> 渲染，浏览器在 img 上下文中阻止脚本执行 */}
|
||||
<img
|
||||
src={svgDataUrl}
|
||||
alt="QR 码"
|
||||
className="w-64 h-64 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-2xl p-4 bg-white dark:bg-white qr-preview"
|
||||
/>
|
||||
<div className="flex gap-3 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>版本: {state.preview.version}</span>
|
||||
<span>{state.preview.size}×{state.preview.size}</span>
|
||||
<span>掩码: {state.preview.mask}</span>
|
||||
<span>版本: {state.preview!.version}</span>
|
||||
<span>{state.preview!.size}×{state.preview!.size}</span>
|
||||
<span>掩码: {state.preview!.mask}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user