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

文章配图，仅供参考

　　那天是灰度发布前四小时。合规侧发来最后一版《个人信息传输清单》修订意见，PDF里标红三十七处，其中二十一处指向前端加密逻辑——不是算法，是字段名拼写。比如“idCardNo”要改成“idCardNumber”，因为《个保法实施指南》附录D第七条注释里写过“Number为推荐后缀”。我盯着屏幕盯了十八秒，突然笑出来。小杨在隔壁工位啃冷掉的葱油饼，咔嚓咔嚓，碎渣掉在键盘F键上，他没擦，伸手按了三次F5。

　　我原以为只要把CryptoJS换成Web Crypto API，再把所有base64.encode()全换成subtle.encrypt()，就能过等保三级的“传输加密”项。结果扫完安全扫描器，它报的不是密钥长度不够，是“/login 接口响应体中包含明文手机号，字段名userPhone”。我说这不早就在header里加X-Request-ID了？安全同事老李叼着根没点的烟，把烟盒沿桌角推过来推过去，推了七次，才说：“ID不防MITM，防的是审计翻你接口日志时一眼认出这是用户手机号。”

　　可信呢？更荒。前端证书钉扎（Certificate Pinning）跑iOS真机没问题，安卓测到小米12，直接卡死在fetch()之后的await；查日志发现是MIUI系统层把公钥哈希给截了，换了个哈希方式塞回去，但没改证书链。我们三个在测试机堆里传着手机，老张拿红米Note 11当主测机，小杨用Pixel模拟器做对照组，我守着MacBook跑webpack --watch——热更新崩了两次，第二次崩的时候，咖啡洒在触控板右下角，粘住了一小片指纹。

　　没人提“三位一体”这词儿，是法务姑娘林薇在全员会上念通报稿时带出来的。她念完就低头看手机，拇指划了两下微信，发了个文件，然后把笔记本合上，“咔”一声轻响。我当时第一反应是：这声合盖比等保整改单还让人头皮发紧。后来才知道她刚拒掉了一个合作方——对方前端用localStorage存token，还开了debug工具栏，说“方便排查”。林薇没骂人，就问了一句：“你家产线环境打开React DevTools，能看到多少用户的银行卡BIN号？”那人愣了五秒，起身走了。我没追出去，因为机房空调嗡嗡响得太大声，听不见走廊脚步声。

　　最绝的是“可信”的验证环节。我们搞了个“前端可信启动链”：首页加载时，先校验jsdelivr CDN上的bundle.js完整性（用SRI），再比对本地缓存哈希，最后用Service Worker拦截所有fetch请求，动态注入签名头。写了三百七十二行代码。上线第三天，运维老周打来电话，说CDN节点故障，jsdelivr返回503，整个首页白屏四十秒。我冲去他工位看监控大屏，他正往保温杯里续枸杞水，倒了三遍才倒满，水溅在鼠标垫上，湿了一小片。他说：“你们信‘链’，我信心跳包——上次心跳停了十九秒，你们连告警都没触发。”

　　后来我拆过一次那个SRI校验逻辑。发现根本没校验子资源，只校验了主bundle。也就是说，哪怕cdn挂了，但只要main.js还在，它就假装一切安好。这个bug存在了十七天。不是没人发现，是每次复现都得等CDN抽风——而CDN抽风又总发生在非工作时间，比如周五晚上十点零七分，或者凌晨四点二十。小杨说这叫“混沌窗口”，我纠正他：这是“人力覆盖盲区”。

　　上季度末我们重做了架构图。新版删掉了“可信启动链”，换成了“双签机制”：所有关键请求带两个签名头，一个由后端颁发JWT生成，一个由前端内存密钥生成。内存密钥每三十分钟刷新，不存storage、不进devtools scope。林薇看了点头，老李点了支烟——这次点了，烟雾升起来时，窗外雨停了。老张端起杯子吹了口气，喝了一口，说：“现在问题不是信不信前端，是信不信我们敢让前端信自己。”

　　我信。不是信技术，是信这帮人改了十七版schema、修了四次CSP header、为一行cookie属性吵过两小时、最后统一把SameSite设成Strict——只因小杨说他奶奶用老人机点外卖，弹窗总被拦截，而Strict能保住那唯一一次支付跳转。这种事，没法量化，也不该量化。

　　至于“三位一体”，我打包票：它不靠文档堆出来，靠半夜三点抢修白屏时，老张顺手帮你把CoffeeScript配置从.babelrc移到tsconfig.json里，而你自己都不知道缺这一行。但它站不住脚的地方我也敢说——等保二级以下，这套东西纯属给自己加戏。上个月我们接了个政企POC，对方要求全程禁用fetch，只准用XMLHttpRequest。我和小杨当场在茶水间对着咖啡机沉默了四分钟，没人说话，只有研磨机低频震动，震得纸杯里的奶泡一圈圈散开。

　　我现在在改一个新脚手架，把crypto.subtle封装成useEncryptedRequest()，顺便藏掉所有error.stack里带node_modules的路径。林薇说别藏，留着好溯源。我没回她。刚才又下雨了，雨刮器在窗上划出弧形水道，跟上周三下午一样。这会儿我打算把Webpack插件里那个“检查console.log是否含敏感字段”的逻辑关掉——反正上线前，我们都会手动grep一遍。老张说他奶奶教过：锅底厚，饭才香。信不信？信。可锅是铁的，灶火是气的，气阀是谁拧的？这个我说不准。

（编辑：站长网）

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