Security Testing Strategy

Version: 1.0.0
Last Updated: 2024
Status: Active

Overview

The StockEase Frontend employs a comprehensive, multi-layered security testing strategy that combines static analysis, unit testing, integration testing, and scenario-based testing to identify and prevent security vulnerabilities throughout the development lifecycle. This document outlines our testing approach, covering tools, methodologies, and test organization.

Table of Contents

1. Testing Architecture
2. Unit Security Testing
3. Integration Testing
4. Scenario-Based Testing
5. Abuse Case Testing
6. Test Coverage & Metrics
7. Testing Frameworks & Tools
8. Security Test Domains
9. Continuous Integration

Testing Architecture

Test Pyramid

    ▲
   / \
  /   \   Scenario-Based & Abuse Case Tests
 /     \  (Integration tests, real-world scenarios)
/-------\
|       | Unit Security Tests
|       | (XSS, CSRF, CSP, Auth, Secrets)
|       |
|       |
|_______|
SAST (Static Analysis)
ESLint, TypeScript Compiler

Test Organization

The frontend test suite is organized into 15 primary test categories:

src/__tests__/
├── security/              # Security-focused tests (6 domains)
│   ├── components/        # Component-level security vulnerabilities
│   ├── csp/               # Content Security Policy validation
│   ├── csrf/              # Cross-Site Request Forgery prevention
│   ├── headers/           # Security header validation
│   ├── secrets/           # Sensitive data protection
│   └── xss/               # Cross-Site Scripting prevention
├── api/                   # API integration security tests
│   ├── auth/              # Authentication API testing
│   ├── product-service/   # Product API security
│   └── API.template.test.ts
├── auth/                  # Authentication & authorization
│   └── authorization/     # Role-based access control tests
├── components/            # Component security & functionality
│   ├── buttons/
│   ├── error-boundary/
│   ├── header/
│   ├── help-modal/
│   ├── sidebar/
│   └── Component.template.test.tsx
├── services/              # Service layer security
│   └── api-client-operations/
│       ├── config/        # Configuration security
│       ├── errors/        # Error handling security
│       └── security/      # Service-level security tests
├── accessibility/         # WCAG & accessibility testing
├── integration/           # End-to-end workflow testing
├── logic/                 # Business logic security
├── pages/                 # Page-level security testing
├── playbooks/             # Security scenario playbooks
├── fixtures/              # Test data & fixtures
├── mocks/                 # Mock objects & services
├── types/                 # Type safety tests
├── utils/                 # Utility function security
└── setup.ts               # Global test setup & configuration

Unit Security Testing

Purpose

Unit security tests validate that individual functions and components properly handle security-critical operations without introducing vulnerabilities.

Coverage Areas

1. Secrets & Sensitive Data Protection (security/secrets/)

• Storage Security: Tokens stored in localStorage only, never in sessionStorage or memory
• Error Message Sanitization: Stack traces and error messages don't leak tokens, API keys, or credentials
• Logging Security: Console logs don't expose sensitive data
• Environment Variables: VITE_ prefixed variables only, no secret exposure
• Build-Time Security: No secrets embedded in minified builds

Test Files:

• storage-and-errors.test.ts - Token storage, token clearance, error message safety
• logging-security.test.ts - Console logging, message redaction, URL sanitization
• env-variable-security.test.ts - VITE_ prefix enforcement, API URL validation
• build-and-cicd-secrets.test.ts - Build-time variable immutability, secret prevention

2. Cross-Site Scripting (XSS) Prevention (security/xss/)

• Validates that user input is properly escaped
• Verifies innerHTML usage is only on trusted content
• Tests that dangerouslySetInnerHTML is restricted to safe sources
• Validates DOM-based XSS patterns are prevented

3. Cross-Site Request Forgery (CSRF) Prevention (security/csrf/)

• Validates CSRF token handling in forms
• Verifies CSRF token is included in state-changing requests (POST, PUT, DELETE)
• Tests token refresh mechanisms
• Validates double-submit cookie patterns

4. Content Security Policy (CSP) Validation (security/csp/)

• Tests that CSP directives are properly configured
• Validates inline scripts are properly nonce-protected
• Verifies external resources conform to CSP rules
• Tests CSP violation reporting mechanisms

5. HTTP Header Security (security/headers/)

• CORS header validation (whitelist enforcement, no wildcard origins)
• Security headers: X-Content-Type-Options, X-Frame-Options, Strict-Transport-Security
• Cache control headers prevent sensitive data caching
• Credentials handling in cross-origin requests

6. Component-Level Security (security/components/)

• Error boundary security (doesn't expose stack traces in production)
• Authorization checks in component renders
• Secure form handling and input validation
• Session timeout handling in components

7. Authentication & Authorization (auth/authorization/)

• Role-based access control validation
• Permission checking on protected resources
• Token expiration and refresh handling
• Session management security

Test Execution

# Run all unit security tests
npm test -- security/

# Run specific security domain
npm test -- security/xss/
npm test -- security/csrf/
npm test -- security/secrets/

# Run with coverage
npm test -- --coverage security/

Coverage Metrics

Target coverage:

• Statements: ≥85% for security-critical code
• Branches: ≥80% for authentication and authorization
• Functions: ≥85% for security utilities
• Lines: ≥85% for sensitive data handling

Integration Testing

Purpose

Integration tests verify that security controls work correctly when multiple components interact with each other and external services.

Coverage Areas

1. API Integration Security (api/)

• Authentication flow with API backend
• Token refresh token lifecycle
• Error response handling (401, 403, 400, 500, 429)
• CORS preflight handling for complex requests
• Concurrent request security (race conditions in auth)

2. Service Layer Integration (services/api-client-operations/)

• Configuration Security: API base URL validation, environment-specific config
• Error Handling: Sensitive data redaction in error responses
• Security: Service-level request/response interceptors

3. Component Integration (components/)

• Component interactions with authentication state
• Form submission with CSRF token integration
• Error boundary behavior in authenticated contexts

4. Page-Level Integration (pages/)

• Full page workflows with security controls
• Authentication state persistence across navigation
• Protected page access control
• Login/logout flows

Test Execution

# Run all integration tests
npm test -- integration/
npm test -- api/
npm test -- services/

# Run integration tests with real API mocks
npm test -- --reporter=verbose api/

Scenario-Based Testing

Purpose

Scenario-based tests simulate real-world security challenges and user workflows to identify vulnerabilities that unit and integration tests might miss.

Coverage Areas

1. Token Lifecycle Management (playbooks/)

• Token acquisition and storage
• Token refresh on expiration
• Token invalidation on logout
• Concurrent request handling during token refresh
• Race condition prevention

Example Scenario:

// User logs in, receives token
// Multiple API requests fire while token is being refreshed
// Verify all requests use correct token after refresh

2. Concurrent Request Security (integration/)

• Multiple requests with different tokens
• Request cancellation during auth state changes
• Race conditions in session management
• Duplicate request prevention

3. Error Recovery (security/)

• Network error handling without leaking sensitive data
• Server error responses (500, 502, 503) handled safely
• Rate limiting (429) properly handled
• Error message display to users is sanitized

4. Authentication Edge Cases

• Session timeout during active use
• Token expiration with pending requests
• Simultaneous login attempts
• Browser back button after logout
• Tab synchronization of auth state

5. CORS & Origin Handling

• Wildcard origin rejection
• Subdomain detection and validation
• Protocol enforcement (http vs https)
• Port manipulation prevention
• Dangerous HTTP methods rejection

Test Execution

# Run scenario-based playbook tests
npm test -- playbooks/

# Run integration tests that simulate scenarios
npm test -- integration/ --reporter=verbose

Abuse Case Testing

Purpose

Abuse case testing identifies how the application handles malicious or unexpected usage patterns that could lead to security vulnerabilities or denial of service.

Coverage Areas

1. Malformed Input Handling

• Oversized payloads
• Invalid JSON
• Null bytes in strings
• Unicode normalization attacks
• Special character injection

2. Authentication Abuse

• Brute force attempts (rate limiting)
• Credential stuffing detection
• Session fixation attempts
• Token replay attacks
• Concurrent session limits

3. API Abuse

• Rate limiting enforcement
• Quota enforcement per user
• Pagination abuse (requesting large page sizes)
• Filter/search bypasses
• SQL injection patterns (if applicable)

4. XSS Abuse Cases

• Event handler injection (onclick, onerror)
• JavaScript protocol URLs
• SVG-based XSS
• DOM-based XSS through fragment identifiers
• Polyglot payloads

5. CSRF Abuse Cases

• Form CSRF without CSRF token
• JSON POST without CSRF protection
• GET requests used for state changes
• CSRF token reuse across sessions
• Multipart form CSRF

6. Authorization Bypass Attempts

• Direct object reference (IDOR) attacks
• Parameter tampering (changing user IDs)
• Role escalation attempts
• Resource access without permissions
• Horizontal/vertical privilege escalation

Test Patterns

describe('Abuse Case: Malformed Input', () => {
  it('should reject oversized payloads', () => {
    const hugeString = 'a'.repeat(1000000);
    expect(() => validator.validate(hugeString)).toThrow();
  });

  it('should reject invalid JSON gracefully', () => {
    const result = parser.parse('{invalid json}');
    expect(result.error).toBeDefined();
    expect(result.error).not.toIncludeSensitiveData();
  });
});

Test Execution

# Run abuse case tests (mixed with integration tests)
npm test -- --grep="abuse|malicious|invalid"

Test Coverage & Metrics

Coverage Reports

Coverage reports are generated using v8 provider and published to public-docs/coverage/:

# Generate coverage report
npm test -- --coverage

# View coverage report
open public-docs/coverage/index.html

Coverage Standards

• Security-Critical Code: ≥95% statement coverage

  • Authentication/authorization logic
  • Token handling and refresh
  • CORS validation
  • XSS prevention mechanisms

• Security Utilities: ≥85% statement coverage

  • Sanitization functions
  • Validation functions
  • Error handling utilities

• Non-Critical Code: ≥70% statement coverage

  • UI components
  • Layout components
  • Utility functions

Coverage Maintenance

• Coverage baseline is tracked in git
• CI/CD pipeline fails if coverage decreases below baseline
• New security features require matching test coverage
• Code review requires coverage compliance

Testing Frameworks & Tools

Vitest

Purpose: Modern test runner for JavaScript/TypeScript with fast execution.

Configuration:

• Environment: jsdom (browser-like environment for DOM testing)
• Coverage Provider: v8 (high-performance coverage analysis)
• Globals: Test utilities available without imports (describe, it, expect)

Key Features:

• Fast parallel test execution
• ESM support for modern imports
• Coverage reporting with filtering
• Watch mode for development

Testing Utilities

Setup File: src/__tests__/setup.ts

• Global mocks and fixtures
• Test environment initialization
• Common helper functions

Mock Management:

• Service mocks in src/__tests__/mocks/
• API mocks with realistic responses
• Error scenario mocks

Templates:

• API.template.test.ts - API test patterns
• Component.template.test.tsx - Component test patterns

Security Test Domains

Domain Coverage Matrix

Add New Security Tests

Steps:

1. Identify security concern (e.g., new authentication method)
2. Create test file in appropriate domain: src/__tests__/security/[domain]/[feature].test.ts
3. Follow test template: API.template.test.ts or Component.template.test.tsx
4. Ensure 85%+ coverage for the feature
5. Document in security audit trail

Example:

// src/__tests__/security/secrets/biometric-auth.test.ts
import { describe, it, expect, vi } from 'vitest';

describe('Biometric Auth Security', () => {
  it('should not store biometric data', () => {
    const storage = new BiometricAuth();
    const result = storage.authenticate();
    
    expect(localStorage.getItem('biometric')).toBeNull();
    expect(result.token).toBeDefined();
  });
});

Continuous Integration

Pre-Commit Testing

# Run security tests before commit
npm test -- security/ --coverage

CI/CD Pipeline

1. Unit Tests: All tests in src/__tests__/security/ must pass
2. Coverage Check: Security code coverage must ≥85%
3. Lint Check: ESLint security rules must pass (see sast.md)
4. Build Verification: Production build must not embed secrets

Test Commands

# Run all tests
npm test

# Run security tests only
npm test -- security/

# Run with coverage
npm test -- --coverage

# Run in watch mode (development)
npm test -- --watch

# Run specific test file
npm test -- auth/authorization

# Run tests matching pattern
npm test -- --grep="CSRF"

Performance

• Target: Full test suite completes in <30 seconds
• Parallel: Tests run in parallel (Vitest default)
• Coverage: Coverage report generation <5 seconds

Next Steps

• See SAST Strategy for static code analysis approach
• See DAST Strategy for dynamic security testing
• See Testing Overview for documentation guide

Related Documentation

• Security Checklists
• Compliance & Standards
• API Security
• Authentication