前端安全、性能与交付

学习目标：把安全边界、性能度量和发布验证纳入页面开发，而不是上线前临时补救。

1. 浏览器安全边界

XSS 的核心风险是把不可信内容当 HTML 或脚本执行。优先使用框架默认的文本插值；确需富文本时使用受维护的净化库并限制允许标签。不要把用户输入直接交给 innerHTML、Vue v-html 或 React dangerouslySetInnerHTML。

Cookie 会话的写操作要考虑 CSRF；SameSite、CSRF token 等由后端策略配合。CORS 不是认证机制，前端隐藏按钮不是授权。不要把私钥或服务端密钥打进前端构建产物，浏览器可读取下载到的代码和网络请求。

2. 用用户体验指标指导优化

先量测，再优化。关注加载、交互和布局稳定性：减少关键路径资源、压缩和分包、为图片指定尺寸、避免长主线程任务。浏览器缓存、CDN、SSR/预渲染与懒加载各有适用场景，选择前先看页面是否真正需要。

你已有 浏览器渲染流程、性能优化 与 前端监控 SDK 笔记；这里重点是把量测、改动、回归写成闭环。

记录基线 → 找到瓶颈 → 做单项改动 → 同条件复测 → 观察线上反馈

3. 发布前检查

• 锁定依赖，运行类型检查、静态检查、单元/组件测试和关键端到端测试。
• 检查生产环境变量、API 地址、CSP/跨域配置以及 sourcemap 的发布范围。
• 验证深层路由刷新、404 页面、网络失败、加载与空状态。
• 用可回滚的产物发布；发布后观察前端错误率和关键流程成功率。

自测

1. 为什么前端环境变量不能存服务端密钥？最终构建产物会被浏览器下载。
2. 性能优化先看什么？真实用户或可复现环境中的基线指标与瓶颈。

4. 把安全规则落实到组件边界

框架的普通文本插值会转义 HTML；一旦改用原始 HTML 渲染，用户输入就可能进入脚本上下文。确需展示富文本时，在可信边界使用维护中的净化方案，并设置允许的标签和属性；不要自己靠正则“删掉 script”实现净化。前端不能保存服务端密钥；浏览器获取到的环境变量、打包代码和网络请求都可被查看。

Cookie 会话下，写操作要按部署情况考虑 CSRF。CORS 不等于登录授权，服务端每个资源仍须校验身份和归属。涉及令牌时，不在 URL 或前端日志输出；遇到 401 要明确清理会话并引导重新登录。

5. 性能优化的可复验流程

1. 选一条用户路径，例如冷启动打开笔记列表，记录设备、网络、数据量和基线指标。
2. 在浏览器 Performance/Network 工具中找主线程长任务、资源瀑布或布局跳动的主因。
3. 一次只改一个主要因素，例如按路由拆包、图片声明尺寸或列表虚拟化。
4. 在同样条件下复测，并观察是否损害可访问性或错误处理。

不要为了优化盲目给所有组件加 memo，也不要只凭开发机的热缓存结论。列表虚拟化适合大量行，但可能影响键盘导航和读屏语义，需要一起验证。

6. 发布验收

产物在干净环境通过类型检查、测试和生产构建后，部署到与生产接近的环境验证深层路由刷新、API 地址、Cookie、跨域、错误页和静态资源路径。发布后看前端错误率、关键操作成功率与性能指标；若异常，按记录的版本和配置回滚。练习：故意把 API 地址配置错，确认页面显示可恢复的错误而不是空列表。