前端安全测试的基本流程

前端安全测试的基本流程

前端安全测试是确保Web应用用户界面层免受攻击的关键环节。从输入验证到依赖库检查，每个步骤都需要系统化执行。

静态代码分析

使用工具扫描源代码中的潜在漏洞，重点关注以下方面：

// 典型XSS漏洞示例
function displayUserInput() {
  const userInput = document.getElementById('user-input').value;
  document.getElementById('output').innerHTML = userInput; // 危险：直接插入未转义内容
}

// 修复方案
function safeDisplayUserInput() {
  const userInput = document.getElementById('user-input').value;
  document.getElementById('output').textContent = userInput; // 使用textContent代替innerHTML
}

主要检查点：

• 未转义的HTML输出
• 硬编码的敏感信息
• 不安全的eval()使用
• 过时的加密算法实现

推荐工具：ESLint配合安全插件、SonarQube、Checkmarx

动态安全测试

在运行状态下检测应用漏洞：

1. 输入框测试：

<!-- 测试用例示例 -->
<input type="text" id="search" onsubmit="handleSearch()">

<script>
// 测试脚本
const testPayloads = [
  "<script>alert(1)</script>",
  "' OR 1=1 --",
  "javascript:alert(document.cookie)"
];

testPayloads.forEach(payload => {
  document.getElementById('search').value = payload;
  handleSearch();
});
</script>

2. 网络请求监控：

• 检查未加密的HTTP请求
• 验证敏感API的CORS配置
• 分析JWT令牌过期策略

依赖项安全检查

检查第三方库的已知漏洞：

# 使用npm audit检查依赖
npm audit --production

# 使用OWASP Dependency-Check
dependency-check ./package.json

重点关注：

• 过时的jQuery版本（<3.5.0存在XSS漏洞）
• 存在原型污染漏洞的lodash版本
• 包含恶意代码的npm包

认证与会话测试

验证身份验证机制的可靠性：

// 测试会话超时
function testSessionTimeout() {
  localStorage.setItem('authToken', 'mock-token');
  setTimeout(() => {
    fetch('/api/user/profile', {
      headers: { Authorization: localStorage.getItem('authToken') }
    }).then(validateSessionStillActive);
  }, 3600000); // 测试1小时后的会话状态
}

// CSRF令牌验证测试
function testCsrfProtection() {
  fetch('/api/transfer', {
    method: 'POST',
    body: JSON.stringify({ amount: 1000, to: 'attacker' }),
    // 故意省略CSRF令牌
  }).then(checkFor403Response);
}

客户端存储检测

检查不安全的存储实践：

// 不安全的存储示例
localStorage.setItem('userCredentials', btoa('admin:password'));

// 安全替代方案
sessionStorage.setItem('sessionId', crypto.randomUUID());

// IndexedDB敏感数据测试
const dbRequest = indexedDB.open('userDB');
dbRequest.onsuccess = (e) => {
  const db = e.target.result;
  if (db.objectStoreNames.contains('creditCards')) {
    reportSecurityIssue('敏感支付信息存储在IndexedDB中');
  }
};

安全头配置验证

检查HTTP响应头配置：

# 缺失的安全头示例
HTTP/1.1 200 OK
Content-Type: text/html

# 理想的安全头配置
HTTP/1.1 200 OK
Content-Type: text/html
X-Content-Type-Options: nosniff
Content-Security-Policy: default-src 'self'
X-Frame-Options: DENY
Strict-Transport-Security: max-age=63072000

使用curl或Postman验证以下关键头：

• CSP是否有效阻止内联脚本
• X-Frame-Options是否防止点击劫持
• HSTS是否强制HTTPS

自动化渗透测试

实施自动化测试方案：

// 使用Puppeteer进行自动化测试
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 测试DOM型XSS
  await page.goto('https://example.com/search?q=<img src=x onerror=alert(1)>');
  await page.waitForTimeout(1000);
  
  // 检测弹出框
  const dialogExists = await page.evaluate(() => {
    return !!window.alert;
  });
  
  if(dialogExists) {
    console.error('XSS漏洞检测成功');
  }
  
  await browser.close();
})();

持续监控与报告

建立持续监控机制：

1. 实时CSP违规报告：

<!-- 在CSP头中配置报告URI -->
Content-Security-Policy: default-src 'self'; report-uri /csp-violation-report

2. 前端错误监控集成：

// 安全相关的错误捕获
window.addEventListener('securitypolicyviolation', (e) => {
  sendToMonitoringSystem({
    type: 'CSP_VIOLATION',
    data: e
  });
});

window.onerror = function(msg, url, line, col, error) {
  if (msg.includes('EvalError') || msg.includes('SyntaxError')) {
    logPotentialAttackAttempt(msg);
  }
};

浏览器特性滥用检测

检查可能被滥用的API：

// 检测危险的WebRTC配置
if (typeof RTCPeerConnection !== 'undefined') {
  const pc = new RTCPeerConnection();
  pc.createDataChannel('leak');
  pc.setLocalDescription().then(desc => {
    if (desc.sdp.includes('a=candidate')) {
      reportIssue('WebRTC可能泄露内部IP地址');
    }
  });
}

// 检查权限API滥用
navigator.permissions.query({name: 'geolocation'})
  .then(status => {
    if (status.state === 'granted') {
      verifyGeolocationUsagePattern();
    }
  });