创业前端架构：合规、可信、安全三位一体

　　2025年7月12号下午三点，我正对着控制台里那行 Refused to load the script 'https://cdn.xxx.com/v3/trust-sdk.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https:". 发呆，会议室白板上“合规、可信、安全三位一体”八个字底下还洇着两道没擦净的蓝笔水痕——产品经理前脚刚走，后脚法务钉钉发来截图：某省网信办整改通知里第三条，加粗标红：“未取得《互联网信息服务算法备案》即上线个性化推荐模块”。

　　我们那天上线的是 H5 活动页，纯静态托管在 S3 + CloudFront，但埋了三段 SDK：一串合规检测（扫 DOM 树找敏感词+OCR 识别 banner 图文字）、一段信任链验证（校验后端签发的 JWT 里带的 TEE 证明字段）、一段实时风控（WebSocket 连接维持时上报设备指纹）。结果呢？首屏转圈、按钮点了没反应、控制台一片红——不是报错，是直接被 CSP 删掉三行 script，连 console.log 都没机会打出来。我当场用 curl -I 看 header，Content-Security-Policy 居然是后端 Nginx 自动注入的，规则写死在 /etc/nginx/conf.d/global.conf 第 42 行，而前端 build 脚本里根本没配 meta.httpEquiv 或 nonce。键盘上那个 “L” 键上周就掉了，现在敲 if (trust) {} 全靠盲打，按完还得多补个空格防 eslint 报 warning。

　　跟后端吵是在当天晚上八点十七分。他推过来一个 commit 记录：f9e8a1c — fix: use sha256 hash instead of md5 for trust token signature（注释里甚至带了个 emoji ✅）。我 diff 了一眼：签名算法换对了，但把原生 fetch 的 headers.get('X-Trust-Nonce') 改成了 get('x-trust-nonce')——小写，而我们 SDK 初始化时写死的 key 是大写。测试机型号是 iPhone 14 Pro（iOS 18.5），真机调试里 network tab 显示响应状态 200，但 Response Payload 是空的，Response Headers 里连 X-Trust-Nonce 都没有。背后走过的人碰了我椅子，我人没动，鼠标移出去点了两次，chrome devtools 直接卡住重载。外卖到楼下了没人去拿，泡面盒子堆在工位左边第二个抽屉里，盖子没掀开。

　　设计给的图更绝。Activity Page V2.3 Sketch 文件，banner 区域标注写着“适配深色模式”，但没标 dark mode 下哪几个 CSS 变量该换、哪张图要切新资源、button 的 focus-visible 样式要不要叠加 outline 偏移。我写了 media (prefers-color-scheme: dark) { --bg: #121212; }，结果测试发现暗色下按钮文本对比度只有 2.8:1——WCAG AA 过不了，法务那边同步说“若用户因可访问性问题投诉，平台方需担责”。显示器是竖着的，调 viewport 宽高比的时候光标老飘到旁边 IDE 里，顺手把 package.json 里的 engines.node 版本改错了，CI 流水线卡在 yarn install 报错：error Unsupported engine for xxx@1.2.0: wanted: {"node":">=18.17.0"} (current: {"node":"16.20.2","npm":"8.19.2"})。没人提这事，反正第二天又回滚了。

　　最离谱的是“可信”。SDK 文档第 7 页写着：“可信链验证失败时请静默降级，不可阻断业务流程”。结果上线后发现——它真静默了。用户点击“实名认证”按钮，SDK 在后台跑完 TEE 证明验证，返回 {status: 'failed', reason: 'tpm_not_available'}，但我们页面逻辑里 catch 之后啥都没干，loading 状态一直挂着，DOM 里 .btn-submit 的 disabled 属性没撤，也没 toast 提示。最后是客户自己打电话来问“为什么点不动”，才翻到那段被注释掉的 fallback 代码块：// TODO: handle tpm failure gracefully —— 注释日期是 2024 年 11 月，作者是我自己。工位边上的绿植黄了一半，没人浇。谁还记得上次 npm audit --audit-level high 是什么时候？记不清了。大概几秒吧，但那次 CI 打包时间多花了两分钟。

文章配图，仅供参考

　　接下来三天，我把 CSP nonce 加进 Webpack HtmlWebpackPlugin 插件配置；把 fetch 封装成统一 client，强制 normalize header key 大小写；重写了 design system 里的 color palette tokens，加了可访问性检测 CLI 脚本，跑在 precommit hook 里；SDK 那段静默降级，改成了兜底展示一段纯 HTML 的错误说明 + 人工客服入口——不是弹窗，是直接插进 DOM，确保哪怕 JS crash 了也还在。别的先不管。这三件事做完，如果下周二 QA 还在报“点击无响应”，我就把键盘上剩下的 “L” 键也扣下来，塞进茶水间微波炉里。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!