北京
两天时间，我一个连咖啡都不喝的人，居然做出一款专为咖啡爱好者打造的社区应用。这听起来有点魔幻，但借助v0这类工具，过程确实很快——快到我一度以为它已经接近完美。直到我用免费的安全扫描平台跑了一遍，27个严重漏洞直接把我打回现实。
事情源于我在Perfai Security的暑期实习。这家公司专门为vibe coded应用做安全检测，我的任务就是亲手体验这种“凭感觉写代码”的节奏，看看能做出什么，又会出什么问题。于是，我坐在电脑前，打开v0，开始搭建一个叫Roastr的项目。
Roastr的设想其实很简单：做一个游戏化的咖啡探索平台，有点像宝可梦GO和本地咖啡店的混合体。用户打开应用会看到一张互动地图，目前只覆盖旧金山湾区，上面标注了附近的咖啡馆。每进一家店，你就能“收集”它的特色饮品，像集邮一样攒积分。积分会展示在个人仪表盘上，有徽章、总收集量、饮品稀有度指数等等，整个设计就像为一群咖啡极客打造的轻量游戏。
为了把这份体验做出来，我搭了一套比较现代的技术栈：前端用Next.js 16的App Router、Server Components和Server Actions，配合TypeScript保证类型安全；样式靠Tailwind CSS v4和shadcn/ui组件库撑起来,图标是Lucide，还专门设计了一套带稀有度颜色令牌的咖啡主题设计系统。后端和数据库选了Supabase的PostgreSQL，为了做基于角色的权限控制，又上了Row Level Security策略，同时配置了PostgreSQL的RPC函数和触发器来自动完成积分授予、饮品收集、徽章判定和评分重新计算这些逻辑。
认证这一块实现了Supabase Auth，支持邮箱密码登录外加邮箱验证，顺便接入了Google OAuth。用户分为五类角色：游客、普通用户、咖啡店主、审核员、管理员，各自的权限都通过RLS做了隔离。存储部分直接用Supabase Storage，用来上传收集饮品的照片。至于地图，基于React Leaflet集成了OpenStreetMap瓦片，让用户可以流畅地漫游旧金山的街区。
功能跑起来的时候，一切看上去都很好——地图顺畅、UI漂亮，该跳出来的动画一个不少，该积的分也一分不落。至少，在外部观察的直觉里，这已经是一个可以拿去给朋友炫耀的半成品了。
转折发生在安全检测这一步。我把代码提交到Perfai Security的平台上做了一次全量扫描，结果弹出了27个严重程度的问题。那一个个红点排下来，像是给我这“完美之作”贴了一墙的罚单。更让我后背发凉的是，这些风险几乎都是我凭自己根本挑不出来的——不是少写个验证那种表面问题，而是藏在权限链、请求流程和数据库策略里的深层缺陷。没有那个扫描平台，我一定会自信满满地把应用推上线，然后等着某个角落里爆出灾难级的故障。
这件事让我重新审视了vibe coded应用的魅力与盲区。用v0这类工具快速搭一个产品，的确能让人跳过许多繁琐的搭建环节直达可用状态，漂亮的界面、流畅的交互和一个现代感十足的技术栈能迅速营造出“产品已经准备好”的错觉。可一旦脱离安全视角，这些应用本质上还是缺乏系统性的防御：认证流程里可能漏掉关键的验证步骤；数据库的访问权限可能留了一个粗放的口子；某些服务端接口也许压根没做输入校验。所有这些问题，都不必然在正常使用中暴露，但只要攻击者找到一个薄弱点，后续的连锁反应会非常可怕。
当然，这次开发也碰上了一些更现实的问题，最大的麻烦来自v0本身的额度限制。因为免费额度有限，我不得不在功能设计上做取舍，砍掉了一些本来想加入的锦上添花的内容，把精力集中在最核心的基础流程上。否则，Roastr或许还能多一些社交背书、评论互动或者更复杂的咖啡馆
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
