前端安全

1. 环境准备与依赖选型 在构建一个现代 Markdown 实时预览器前，明确技术栈边界是安全与可维护性的第一道防线。本教程默认采用纯前端、浏览器运行环境（兼容 Vite/React/Vue/甚至原生 HTML 页面），不依赖服务端渲染——这意味着所有解析、渲染、防护逻辑必须在客户端健壮执行。 ✅ 基础要求： Node.js ≥ 18.0（确保 ESM 原生支持与现代 API 兼容性） 构建工具无强绑定：markdown-it 是纯 JS 库，import 即用，Vite/Webpack/Rollup 均无缝支持 🔍 主流 Markdown 解析库横向对比： 库 XSS 默认防护 插件生态 性能（10KB 文档） 维护状态 备注 marked ❌（需手动禁用 html: true） 中等 ⚡ 快（但 v4+ 移除同步 API） 活跃 配置项少，扩展性弱于 markdown-it remark ✅（纯 AST，无 HTML 输出） ⚙️ 极强（统一 AST 生态） 🐢 中等（AST 转换链长） 活跃 学习成本高，需搭配 rehype-stringify 等，适合复杂处理流 markdown-it ✅（默认 html: false，xhtmlOut 安全） 🌟 丰富（>200 官方/社区插件） ⚡⚡ 快（C 语言级优化 parser） 活跃 推荐首选：开箱即用的安全基线 + 插件即插即用 ⚠️ 明确避坑： ...

🔥 事件速览：不是“代码泄露”，是“信任链的崩塌” 2024年6月17日，安全研究员@n0x3d 在 GitHub 公共仓库中发现一个被爬取的 claude-code-extension-v1.2.3 构建产物包——其 dist/static/js/main.a8f9c2b7.js.map 文件未经任何访问控制，直接托管于公开 CDN。这不是一次普通的配置失误。该 source map 不仅完整映射了混淆前的 TypeScript 源码结构，更关键的是，它反向暴露了三类本应彻底隔离的敏感资产： 后端 API 密钥硬编码在 src/utils/apiClient.ts 的 DEBUG_API_KEY 常量中（值为 sk-claude-prod-xxxxxx-7f8e），经 source map 还原后可直接提取； 未文档化的 /internal/debug/inspect 管理端点（含 JWT bearer 校验绕过逻辑）； 一段被标记为 // @ts-ignore — for local dev only 的认证降级逻辑，实际在生产构建中未被 tree-shaken。 📌 关键时间线： 2024-06-05：commit a8f9c2b7d...（v1.2.3 发布） 2024-06-12：GitHub Pages 自动部署脚本将 *.map 文件同步至公开 gh-pages 分支 2024-06-17：首个自动化爬虫（User-Agent: MapCrawler/1.0）完成批量下载并上传至公开数据集 这根本不是“源码泄露”——没有 .ts 文件流出，没有 git commit 被推错分支。它是一次纯粹的元数据越权暴露。而最讽刺的是，团队在 webpack.config.prod.js 中明确写了 devtool: 'source-map'，理由是：“方便客户支持团队定位用户侧报错”。他们忘了：当 source map 存在于生产环境时，你交付给用户的不只是功能，还有一把能撬开所有逻辑锁的万能钥匙。 ...