原文地址：https://javascript.plainenglish.io/%EF%B8%8F-frontend-security-in-2025-6-critical-mistakes-that-can-destroy-your-web-app-3c2a57eb2546

原文作者： Priyen Mehta | Senior Full-Stack Developer

前端开发者往往对性能、UI 细节和动画效果异常执着。但安全呢？它通常是那个默默无闻的英雄——直到问题真正发生。

到了 2025 年，随着 AI 驱动工具和开源集成的爆炸式增长，前端安全早已不再只是后端的问题。大多数攻击，都是从前端开始的。

💡 真相是：即使一个像素级完美的应用，如果不安全，也毫无价值。

为什么前端安全如此重要很多开发者都有这样的认知：

“安全是后端的事。”

正是这种心态，导致了大量代价高昂、却完全可以避免的安全事故。

攻击者并不关心你的代码写在哪一层——他们只会攻击最容易下手的地方。而前端，往往就是他们进入系统的第一道门。

想想这些情况：

• 敏感 token 暴露在浏览器存储中

• CORS 策略配置错误

• 未转义的 HTML 导致 XSS

• 来自统计或广告的第三方脚本存在安全隐患

一次小小的失误，就可能导致数据泄露、会话劫持，甚至摧毁用户对你的信任——以及你的职业生涯。

1. 浏览器不是你的保险箱

永远不要在浏览器中存储机密信息。这包括：

❌ API keys ❌ 没有过期时间的 JWT ❌ 管理员标记

如果你的应用需要获取敏感数据，请默认假设：浏览器里的所有内容都是可见的——即使你做了 minify 或混淆。

✅ 更好的做法：使用 HttpOnly cookies 存储 token，让后端处理所有敏感操作，不要在前端暴露任何管理员逻辑。

示例：

// ❌ Bad: storing token in localStoragelocalStorage.setItem("token", "abc123");
// ✅ Good: send cookies securelyaxios.defaults.withCredentials = true;

2. 防御 XSS（Cross-Site Scripting）

XSS 依然是 Web 应用中排名第一的安全威胁。当不可信数据被注入 DOM 时，就会发生 XSS。

示例：

// ❌ Dangerouselement.innerHTML = userComment;

如果用户输入：

<script>alert('Hacked!')</script>

……代码会被立刻执行。

✅ 解决方案：始终对输入进行 sanitize，或使用默认会自动转义输出的框架（如 React、Vue 等）。

示例（React 自动转义）：

<p>{userComment}</p>

安全、干净、可靠。

3. 前后端都必须做校验

前端校验（比如表单校验）可以提升 UX，但永远不能替代后端校验。

恶意用户依然可以使用 Postman、cURL 等工具发送自定义请求。

✅ 必须校验的内容包括：

• 数据类型

• 字段长度

• 身份认证

• 角色权限

示例：

• 前端：校验密码长度

• 后端：校验 hash、token 有效性和角色访问权限

4. 警惕第三方脚本

CDN 和 npm 包确实很方便——直到它们被攻破为止。

还记得 Event-Stream 事件吗？一个流行的 npm 包被植入了恶意代码。这种事情，随时可能再次发生。

✅ 建议使用：

• CDN 脚本的 Subresource Integrity（SRI）

• 依赖安全扫描（npm audit）

• 发布前对 lockfile 做安全审计

<script  src="https://cdn.example.com/lib.js"  integrity="sha384-abc123"  crossorigin="anonymous"></script>

5. 使用 Content Security Policy（CSP）

CSP 用来告诉浏览器：哪些资源来源是可信的。它是防御 XSS 和数据注入的最后一道防线。

Content-Security-Policy: default-src 'self'; img-src *; script-src 'self' https://trustedcdn.com

这可以确保你的应用只会从安全来源加载和执行脚本与资源。

6. 不要在错误信息中泄露实现细节

 你是否见过类似这样的错误？

TypeError: Cannot read property 'token' of undefined at line 142

对黑客来说，这就是一张通往你代码库的地图。生产环境中应使用自定义错误提示，并隐藏 stack trace。

✅ 提示：在构建时配置 NODE_ENV=production。

Press enter or click to view image in full size

🧠 Bonus：Security by Design不要事后“补安全”——要从设计阶段就把安全考虑进去。

在发布一个功能前，问自己：

• 这是否泄露了任何用户信息？

• 能否通过 DevTools 被篡改？

• 所有 API 响应是否都已 sanitize？

安全意识，往往比任何一次 bug 修复都更省时间。前端安全不是偏执，而是专业素养。它是区分一个合格开发者和一个值得信任的工程师的关键。

阅读原文：原文链接