The basic process of front-end security testing

Basic Process of Frontend Security Testing

Frontend security testing is a critical step in ensuring the user interface layer of web applications is protected from attacks. From input validation to dependency checks, each step needs to be executed systematically.

Static Code Analysis

Use tools to scan source code for potential vulnerabilities, focusing on the following aspects:

// Typical XSS vulnerability example
function displayUserInput() {
  const userInput = document.getElementById('user-input').value;
  document.getElementById('output').innerHTML = userInput; // Risky: Directly inserting unescaped content
}

// Fix solution
function safeDisplayUserInput() {
  const userInput = document.getElementById('user-input').value;
  document.getElementById('output').textContent = userInput; // Use textContent instead of innerHTML
}

Key inspection points:

• Unescaped HTML output
• Hardcoded sensitive information
• Insecure use of eval()
• Outdated encryption algorithm implementations

Recommended tools: ESLint with security plugins, SonarQube, Checkmarx

Dynamic Security Testing

Detect application vulnerabilities while running:

1. Input field testing:

<!-- Test case example -->
<input type="text" id="search" onsubmit="handleSearch()">

<script>
// Test 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. Network request monitoring:

• Check for unencrypted HTTP requests
• Verify CORS configuration for sensitive APIs
• Analyze JWT token expiration policies

Dependency Security Checks

Check for known vulnerabilities in third-party libraries:

# Use npm audit to check dependencies
npm audit --production

# Use OWASP Dependency-Check
dependency-check ./package.json

Focus on:

• Outdated jQuery versions (<3.5.0 with XSS vulnerabilities)
• Lodash versions with prototype pollution vulnerabilities
• NPM packages containing malicious code

Authentication and Session Testing

Verify the reliability of authentication mechanisms:

// Test session timeout
function testSessionTimeout() {
  localStorage.setItem('authToken', 'mock-token');
  setTimeout(() => {
    fetch('/api/user/profile', {
      headers: { Authorization: localStorage.getItem('authToken') }
    }).then(validateSessionStillActive);
  }, 3600000); // Test session state after 1 hour
}

// CSRF token validation test
function testCsrfProtection() {
  fetch('/api/transfer', {
    method: 'POST',
    body: JSON.stringify({ amount: 1000, to: 'attacker' }),
    // Intentionally omit CSRF token
  }).then(checkFor403Response);
}

Client-Side Storage Inspection

Check for insecure storage practices:

// Insecure storage example
localStorage.setItem('userCredentials', btoa('admin:password'));

// Secure alternative
sessionStorage.setItem('sessionId', crypto.randomUUID());

// IndexedDB sensitive data test
const dbRequest = indexedDB.open('userDB');
dbRequest.onsuccess = (e) => {
  const db = e.target.result;
  if (db.objectStoreNames.contains('creditCards')) {
    reportSecurityIssue('Sensitive payment information stored in IndexedDB');
  }
};

Security Header Configuration Validation

Check HTTP response header configurations:

# Example of missing security headers
HTTP/1.1 200 OK
Content-Type: text/html

# Ideal security header configuration
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

Use curl or Postman to verify the following critical headers:

• Whether CSP effectively blocks inline scripts
• Whether X-Frame-Options prevents clickjacking
• Whether HSTS enforces HTTPS

Automated Penetration Testing

Implement automated testing solutions:

// Use Puppeteer for automated testing
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // Test DOM-based XSS
  await page.goto('https://example.com/search?q=<img src=x onerror=alert(1)>');
  await page.waitForTimeout(1000);
  
  // Detect pop-ups
  const dialogExists = await page.evaluate(() => {
    return !!window.alert;
  });
  
  if(dialogExists) {
    console.error('XSS vulnerability detected');
  }
  
  await browser.close();
})();

Continuous Monitoring and Reporting

Establish continuous monitoring mechanisms:

1. Real-time CSP violation reporting:

<!-- Configure report URI in CSP header -->
Content-Security-Policy: default-src 'self'; report-uri /csp-violation-report

2. Frontend error monitoring integration:

// Capture security-related errors
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);
  }
};

Browser Feature Abuse Detection

Check for potentially abused APIs:

// Detect dangerous WebRTC configurations
if (typeof RTCPeerConnection !== 'undefined') {
  const pc = new RTCPeerConnection();
  pc.createDataChannel('leak');
  pc.setLocalDescription().then(desc => {
    if (desc.sdp.includes('a=candidate')) {
      reportIssue('WebRTC may leak internal IP addresses');
    }
  });
}

// Check for permission API abuse
navigator.permissions.query({name: 'geolocation'})
  .then(status => {
    if (status.state === 'granted') {
      verifyGeolocationUsagePattern();
    }
  });