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

前端安全防护教程

article 2025/2/25 16:28:02

前端安全防护教程

1. 跨站脚本攻击（XSS）防护

1.1 什么是XSS攻击？

跨站脚本攻击（Cross-Site Scripting，简称XSS）是一种常见的Web安全漏洞，攻击者通过在网页中注入恶意脚本，使其在其他用户浏览页面时执行。

1.2 XSS攻击防护策略

a. 输入验证与转义

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

// 在渲染用户输入内容时使用
function renderUserContent(content) {
  const safeContent = escapeHtml(content);
  document.getElementById('content').innerHTML = safeContent;
}

b. 使用Content Security Policy (CSP)

在HTML头部添加CSP meta标签：

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self';">

c. 禁用innerHTML，使用textContent

// 不安全的方式
element.innerHTML = userInput; // 存在XSS风险

// 安全的方式
element.textContent = userInput; // 自动转义

2. CSRF（跨站请求伪造）防护

2.1 什么是CSRF攻击？

CSRF攻击是指攻击者诱导用户在已登录的网站上执行非预期的操作。

2.2 CSRF防护策略

a. 使用Token验证

// 前端发送请求时携带Token
function sendRequest(url, data) {
  const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
  
  return fetch(url, {
    method: 'POST',
    headers: {
      'X-CSRF-Token': csrfToken,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });
}

b. 检查请求来源

function validateRequestOrigin(request) {
  const allowedOrigins = ['https://yourdomain.com'];
  const origin = request.headers.get('Origin');
  
  return allowedOrigins.includes(origin);
}

3. 敏感信息保护

3.1 防止信息泄露

避免在前端存储敏感信息
使用加密存储
限制localStorage和sessionStorage的使用

// 安全的本地存储方案
class SecureStorage {
  static encrypt(data) {
    // 使用加密算法加密数据
    return window.btoa(JSON.stringify(data));
  }
  
  static decrypt(encryptedData) {
    // 解密数据
    return JSON.parse(window.atob(encryptedData));
  }
  
  static set(key, value) {
    localStorage.setItem(key, this.encrypt(value));
  }
  
  static get(key) {
    const encryptedValue = localStorage.getItem(key);
    return encryptedValue ? this.decrypt(encryptedValue) : null;
  }
}

4. 安全的第三方依赖管理

4.1 依赖风险控制

定期更新依赖包
使用npm audit检查依赖安全性
避免使用未知来源的包

# 检查依赖安全漏洞
npm audit
npm audit fix

5. 接口安全

5.1 接口调用安全

使用HTTPS
实施严格的请求验证
添加请求拦截器

// Axios请求拦截器示例
axios.interceptors.request.use(
  config => {
    // 添加鉴权信息
    config.headers['Authorization'] = `Bearer ${getToken()}`;
    return config;
  },
  error => Promise.reject(error)
);