安全需求阶段前端要做什么具体工作？

司空冬冬提问于 2026-03-27 08:32:23 阅读 23

安全

我们团队刚开始推行安全开发生命周期（SDL），现在卡在「安全需求」阶段。作为前端，除了常规的功能需求，到底要提哪些和安全相关的需求啊？比如是不是得要求后端接口必须带 CSRF token？还是说要明确哪些页面需要 CSP 策略？

我试着在 PRD 里加了一条：所有表单提交需防止 CSRF 攻击，但产品经理说太模糊，开发也不知道怎么落地。有没有更具体、可执行的写法？或者前端在这个阶段该关注哪些威胁模型？

安全开发生命周期安全需求

我来解答赞 7 收藏

反馈

1 条解答

皇甫瑞瑞 Lv1

前端在安全需求阶段确实需要明确很多具体的工作内容。先说说 CSRF 防护，你提到的在 PRD 里写“所有表单需防止 CSRF 攻击”确实太模糊了。

具体来说，前端要做的第一件事是确保每个请求都带上 CSRF token。后端生成一个唯一的 token，前端通过 cookie 获取到这个 token 后，在发送敏感操作请求时（比如修改用户信息、转账等），把这个 token 作为请求参数或 header 发送给服务器。比如在 Vue 中可以这样实现：

axios.defaults.headers.common['X-CSRF-Token'] = document.cookie.match(/csrfToken=([^;]+)/)[1];

至于产品经理说的落地问题，你可以把这块写成：对于所有涉及数据变更的操作接口，前端必须在请求中携带从服务端获取的有效 CSRF token，token 应存储在 cookie 中并设置为 HttpOnly=false，以便 JS 可以读取。

再说说 CSP（内容安全策略）。前端要关注的是哪些页面会加载外部资源，比如第三方脚本、图片等。比如我们的支付页面，不允许任何外部脚本执行，那就需要设置 CSP 策略：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"/>

这里的关键在于分析每个页面的功能和风险，比如登录页、支付页这些高风险页面必须严格限制资源来源。至于威胁模型，建议从用户输入、数据传输、存储三个方面考虑。用户输入要做好 XSS 防护，数据传输要确保加密，存储要对敏感信息做加密处理。像密码这种数据，前端不要明文传输，应该用 bcrypt 进行哈希后再提交给后端。这虽然主要是后端的事，但前端也要配合做好输入验证。

最后提个坑，有些开发觉得这些安全措施麻烦，想偷懒跳过。但从经验来看，一旦出了安全事故，修复成本比提前预防高得多。所以即使繁琐也得坚持做。

2026-03-27 09:02