前端安全 完整精讲

前端安全 完整精讲

一、同源策略（一切安全的基础）

浏览器规定：
协议、域名、端口 三者必须完全一致，否则就是跨域。

跨域时：

• Cookie、LocalStorage 无法读取
• AJAX 请求被浏览器拦截
• DOM 无法访问

目的：防止恶意网站窃取用户数据、伪造请求。

---

二、XSS 跨站脚本攻击

1. 定义

攻击者向网页注入恶意 JavaScript 代码，使其在用户浏览器执行。

2. 危害

• 窃取 Cookie、Session
• 劫持用户账号
• 监听用户输入
• 篡改页面、跳转钓鱼网站
• 发动 CSRF

3. 三种类型

1. 存储型 XSS（最危险）

   恶意代码存入数据库，所有人访问都会执行。

   例：评论区输入 <script>steal()</script>

2. 反射型 XSS

   恶意代码在 URL 中，诱导点击触发。

   例：http://xxx?search=<script>alert(1)</script>

3. DOM 型 XSS

   前端 JS 直接把用户输入插入 DOM，不经过后端。

   例：innerHTML = location.hash.substr(1)

4. 防御方案（必背）

1. 对用户输入进行转义
   < → <，> → >，" → " 等
2. Cookie 设置 HttpOnly
   JS 无法读取，从根源防止偷 Cookie
3. 使用 CSP（内容安全策略）
   限制脚本来源，禁止内联脚本
4. 避免使用 innerHTML、outerHTML、document.write
   尽量用 textContent
5. 前端框架自带防 XSS
   Vue/React 默认转义插值表达式，不会执行 HTML

---

三、CSRF 跨站请求伪造

1. 定义

攻击者利用用户已登录状态，在恶意网站自动发起请求，冒充用户操作。

2. 攻击流程

1. 用户登录 A 网站 → Cookie 保存
2. 用户打开恶意网站 B
3. B 自动发送请求到 A（如转账、删帖）
4. 浏览器自动带上 A 的 Cookie → 请求成功

3. 特点

• 不需要注入 JS
• 利用浏览器自动带 Cookie 的机制
• 只能"发请求"，不能"读数据"

4. 防御方案

1. 使用 CSRF Token（最有效）
   后端生成随机 token 放入页面，请求必须携带
2. Cookie 设置 SameSite
   • Strict：完全禁止跨站带 Cookie
   • Lax：大部分情况禁止，仅安全 GET 允许
3. 验证 Referer / Origin
   判断请求来源是否合法
4. 敏感操作加验证码、二次验证
   改密码、支付、绑定手机

---

四、点击劫持 Clickjacking

1. 原理

攻击者用透明 iframe把你的网站覆盖在恶意页面上，诱导用户点击，执行危险操作。

2. 防御

1. X-Frame-Options
   • DENY：禁止所有 iframe
   • SAMEORIGIN：只允许同域嵌套
2. CSP 限制 frame-ancestors
3. 前端防嵌套脚本：

if (top !== self) { top.location = self.location }

---

五、中间人攻击 MITM

1. 原理

攻击者在公共网络窃听、篡改你和服务器之间的数据。

2. 防御

• 全站 HTTPS
• 证书锁定（Certificate Pinning）
• 禁用 HTTP 明文传输

---

六、Cookie 安全（非常重要）

1. HttpOnly

JS 无法读取，防止 XSS 偷 Cookie

2. Secure

仅 HTTPS 传输

3. SameSite

• Strict / Lax 防 CSRF

4. 过期时间合理设置

避免长期有效

---

七、CSP 内容安全策略

作用

从源头限制资源加载，是防 XSS 终极手段。

可限制：

• 脚本来源 script-src
• 样式 style-src
• 图片 img-src
• 媒体、字体、连接、框架等

示例：

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://trusted.cdn;
  style-src 'self';
  img-src 'self' data:;

---

八、其他常见安全问题

1. 文件上传漏洞

• 校验后缀、类型、文件头
• 随机文件名
• 存放到非执行目录

2. 敏感信息泄露

• 不要把 token、密码存在 localStorage
• 不要在 URL 传敏感信息
• 控制台不要打印敏感数据

3. 第三方依赖风险

• 定期 npm audit
• 不使用不知名、长期不维护的包

---

九、前端安全 终极总结

1. XSS：注入脚本执行 → 转义、HttpOnly、CSP、框架保护
2. CSRF：跨站伪造请求 → Token、SameSite、Referer 校验
3. 点击劫持：透明 iframe 诱导点击 → X-Frame-Options
4. 中间人攻击 → HTTPS
5. Cookie 安全 → HttpOnly + Secure + SameSite
6. 全局防护 → CSP
7. 代码安全 → 避免内联脚本、不信任用户输入