一、最核心、必会的 Web 安全问题（⭐⭐⭐⭐⭐）

1️⃣ XSS（跨站脚本攻击）——前端第一大坑

是什么

攻击者往页面里注入 JS 代码，偷：

• Cookie
• Token
• 用户操作

常见场景

• innerHTML
• 富文本编辑器
• 评论 / 输入框回显

错误示例

div.innerHTML = userInput

防护

• 前端：不要信任任何用户输入
• 转义 HTML（escape）
• React / Vue 默认防一部分
• Cookie 设置 HttpOnly

2️⃣ CSRF（跨站请求伪造）

是什么

用户登录态被利用，偷偷发请求

常见场景

• 表单提交
• 自动请求接口

防护

• CSRF Token
• Cookie 设置 SameSite=Strict/Lax
• 验证 Referer / Origin

3️⃣ SQL 注入（前端间接导致）

是什么

用户输入被拼进 SQL

前端坑点

?id=1 or 1=1

防护

• 前端：参数校验
• 后端：预编译 SQL（核心）

4️⃣ 敏感信息泄露（非常常见）

错误做法

• 前端写死：

• 密钥
• Token
• 私有 API

防护

• 所有密钥只在后端
• 前端只拿临时凭证

二、真实项目里经常被忽略的安全问题（⭐⭐⭐⭐）

5️⃣ Token 存储不当

错误

localStorage.setItem('token', token)

风险

• XSS = token 直接被偷

推荐

• Cookie + HttpOnly + SameSite
• 或短期 token + 刷新机制

6️⃣ CORS 配置错误

错误

Access-Control-Allow-Origin: *Access-Control-Allow-Credentials: true

👉 严重漏洞

正确

• 精确域名
• 不随便带 credentials

7️⃣ 点击劫持（Clickjacking）

场景

你的网站被 iframe 嵌套，诱导点击

防护

X-Frame-Options: DENY

或

Content-Security-Policy: frame-ancestors 'none'

8️⃣ 文件上传漏洞

风险

• 上传 .js / .php
• 上传后可访问

防护

• 校验 MIME + 后缀
• 重命名
• 不允许直接执行

三、前端工程级安全（⭐⭐⭐）

9️⃣ 第三方依赖投毒

风险

• npm 包被植入恶意代码

防护

• 锁版本（lockfile）
• 定期 npm audit
• 避免小众包

🔟 HTTPS / Mixed Content

风险

• HTTPS 页面加载 HTTP 资源

防护

• 全站 HTTPS
• CSP 限制

1️⃣1️⃣ 重放攻击

场景

• 接口被重复调用（下单、支付）

防护

• nonce
• 时间戳
• 后端校验

四、现代 Web 必须知道的安全策略（⭐⭐⭐）

1️⃣2️⃣ CSP（内容安全策略）

限制：

• 脚本来源
• 内联脚本
• 外部资源

Content-Security-Policy:  default-src 'self';  script-src 'self'

1️⃣3️⃣ 浏览器安全头

必备：

X-Content-Type-Options: nosniffX-XSS-Protection: 1Strict-Transport-Security

五、结合你背景的「面试级总结」

面试官最爱问

你怎么防 XSS / CSRF？

标准回答结构

1️⃣ 说攻击原理
2️⃣ 说前端如何防
3️⃣ 说后端如何配合

六、给你一份「记忆口诀」

输入不信任，输出要转义
Cookie 要 HttpOnly
接口要鉴权
CORS 不要 *
HTTPS 必须上

阅读原文：原文链接