安全需求阶段前端要做什么？

伊可提问于 2026-02-28 22:05:21 阅读 9

安全

我们团队刚开始引入安全开发生命周期（SDL），现在卡在“安全需求”这一步。作为前端，我不太清楚自己该提哪些具体的安全需求，比如是不是所有用户输入都要过滤？还是说只要后端处理就行？

我试过在表单提交前用 JS 做简单校验，但不确定这算不算安全需求的一部分。比如下面这段代码：

function validateEmail(email) {
  const re = /^[^s@]+@[^s@]+.[^s@]+$/;
  return re.test(email);
}
document.getElementById('submit').addEventListener('click', () => {
  const email = document.getElementById('email').value;
  if (!validateEmail(email)) {
    alert('邮箱格式不对！');
    return false;
  }
});

这种前端校验到底属于功能需求还是安全需求？会不会给人一种“前端能防住攻击”的错觉？

我来解答赞 5 收藏

反馈

1 条解答

UE丶曌煜 Lv1

你这个困惑很正常，刚开始搞SDL的时候很多人都会把"前端校验"和"安全防护"混为一谈。

先说结论：你写的这段邮箱格式校验代码，属于功能需求，不是安全需求。前端校验的本质是提升用户体验，避免用户填错了还要等后端返回报错信息，它跟安全没半毛钱关系。

为什么？因为前端校验可以绕过。攻击者直接用Postman或者curl发请求，甚至浏览器F12改一下DOM，你的JS校验就废了。所以永远不要指望前端能"防住攻击"，这种想法很危险。

那前端在安全需求阶段到底该提什么？我列几个关键的：

输入输出编码需求。虽然不能依赖前端做安全校验，但前端要配合做XSS防护，比如使用框架自带的转义机制，明确哪些地方要用textContent而不是innerHTML。

敏感数据处理需求。这个很重要，前端要明确提出：密码、token、身份证号这些敏感数据，能不能存在localStorage？答案是不能。sessionStorage相对好一点，但也要评估。还要明确前端日志里不能打印敏感信息，console.log(userPassword)这种代码上线就是事故。

CSP策略需求。前端要提出来需要配置Content-Security-Policy，限制脚本来源，防止XSS加载恶意脚本。这个要跟后端配合，在响应头里加。

第三方依赖安全需求。npm包成千上万，哪个有漏洞？前端要提出需要定期扫描依赖，用npm audit或者Snyk这类工具。还要明确引入第三方库的审核流程，不能随便npm install就完事。

HTTPS强制需求。前端要提出来全站HTTPS，包括静态资源，避免中间人攻击和流量劫持。

认证授权相关需求。比如token怎么存、怎么传、过期怎么处理。前端要明确提出不能用URL传token，因为会被Referer泄露；也不能存cookie如果不设HttpOnly。

你刚才问的"是不是所有用户输入都要过滤"，这个主要责任在后端。前端能做的是配合做编码转义，但过滤和校验的逻辑必须后端再做一遍，这是铁律。

总结一下，安全需求阶段前端要做的，是明确"前端应该承担哪些安全责任"以及"前端不能做什么"。把边界划清楚，后面开发才不会踩坑。

2026-03-01 00:02