Add WebAssembly Inspector tool

[simonw]

A comprehensive tool to inspect WASM files with:

• Binary parsing to extract all sections (types, imports, exports, memory, tables, globals, data, custom sections)
• Function signature display with parameter and return types
• Interactive function executor UI for calling exported functions
• Hex dump view of raw binary
• Example buttons for all WASM files in this repo (mquickjs, emperl, code counters)
• Drag-and-drop file upload support
• Collapsible sections for easy navigation

[claude]

Claude finished @simonw's task —— View job

---

Code Review: WebAssembly Inspector Tool

I've thoroughly reviewed this comprehensive WebAssembly inspection tool. Here's my detailed feedback:

Todo List

• Read repository guidelines (CLAUDE.md)
• Analyze the wasm-inspector.html file structure and code
• Review JavaScript code for bugs and issues
• Check security considerations for file upload and WASM execution
• Evaluate performance aspects
• Assess code quality and best practices
• Check for accessibility and usability concerns
• Provide comprehensive feedback

---

✅ Strengths

Excellent Code Quality

• Clean Architecture: Well-structured single-file app with logical separation of parsing, UI, and execution logic
• Comprehensive WASM Parsing: Manual binary parsing implementation covers all major WASM sections (types, imports, exports, memory, tables, globals, data, custom)
• Robust LEB128 Implementation: Correct handling of both unsigned and signed LEB128 encoding
• Error Handling: Good try-catch blocks around section parsing and function execution

Great User Experience

• Multiple Input Methods: URL input, file upload, drag-and-drop, and convenient example buttons
• Interactive Features: Live function execution with parameter inputs and result display
• Responsive Design: Mobile-friendly layout with proper breakpoints
• Visual Polish: Excellent styling with collapsible cards, type tags, and hex dump viewer

Security Best Practices

• Safe Instantiation: Creates minimal import stubs to avoid crashes when dependencies missing
• Input Validation: File type checking (.wasm extension)
• Sandboxed Execution: Uses WebAssembly's built-in sandbox for function execution
• Error Boundaries: Function execution errors are caught and displayed safely

---

⚠️ Issues & Recommendations

Minor Code Issues

1. Missing Error Handling in File Operations (wasm-inspector.html:659-663)

fileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
        loadWasmFromFile(e.target.files[0]);  // No file type validation here
    }
});

Recommendation: Add file validation similar to the drag-drop handler.

2. Potential Memory Issues (wasm-inspector.html:1145-1177)
The hex dump function processes large binaries without limits:

function formatHexDump(bytes, maxBytes = 512) {
    // Only limits display, but still processes full array
}

Recommendation: Consider streaming for very large files (>50MB).

3. Global Function Exposure (wasm-inspector.html:1477)

window.executeFunction = function(name) { /* ... */ }

Recommendation: Use a namespace object instead of polluting global scope.

Performance Considerations

4. Synchronous Binary Processing (wasm-inspector.html:774-831)
Large WASM files could block the UI during parsing.
Recommendation: Consider using setTimeout or Web Workers for parsing files >1MB.

5. DOM Manipulation in Loops (Multiple locations)
Building HTML strings and setting innerHTML repeatedly:

binaryInfo.types.forEach((type, i) => {
    const row = document.createElement('tr');
    // ... build row
    tbody.appendChild(row);  // DOM manipulation in loop
});

Recommendation: Use DocumentFragment for better performance with large datasets.

Security Enhancements

6. URL Validation Missing (wasm-inspector.html:1193)

async function loadWasm(url) {
    const response = await fetch(url);  // No URL validation
}

Recommendation: Validate URLs to prevent SSRF attacks:

if (!url.match(/^https?:\/\//)) {
    throw new Error('Only HTTP/HTTPS URLs allowed');
}

7. Content-Type Validation (wasm-inspector.html:1198-1201)
Currently only checks HTTP status, not content type.
Recommendation: Verify application/wasm content-type.

Accessibility Improvements

8. Missing ARIA Labels
Interactive elements lack proper accessibility attributes.
Recommendation: Add ARIA labels, especially for the function executor interface.

9. Keyboard Navigation
Collapsible cards only work with click events.
Recommendation: Add keyboard event handlers for Enter/Space keys.

Code Quality Enhancements

10. Magic Numbers (wasm-inspector.html:685-693)
Hard-coded type constants should be documented:

const valueTypes = {
    0x7F: 'i32',  // Add comments explaining WASM spec
    0x7E: 'i64',
    // ...
};

11. Function Complexity
parseWasmBinary() is quite large (80+ lines). Consider breaking into smaller functions.

---

🛡️ Security Assessment: GOOD

• ✅ WebAssembly execution is properly sandboxed
• ✅ File uploads are client-side only
• ✅ No server-side code execution
• ✅ Proper error handling prevents crashes
• ✅ No XSS vulnerabilities detected

Minor concerns: URL fetching could benefit from additional validation.

---

⚡ Performance Assessment: GOOD

• ✅ Lazy loading with collapsible sections
• ✅ Hex dump limited to reasonable size
• ✅ Efficient binary parsing algorithms
• ⚠️ Large files could cause UI blocking (consider async processing)

---

📱 Accessibility: NEEDS IMPROVEMENT

• ✅ Responsive design works well
• ✅ Good color contrast
• ⚠️ Missing ARIA labels and keyboard navigation
• ⚠️ Screen reader support could be enhanced

---

🏆 Overall Assessment

This is an excellent WebAssembly inspection tool with impressive functionality:

• Comprehensive binary parsing with detailed section analysis
• Interactive function execution capabilities
• Professional UI with great visual design
• Solid security posture for a client-side tool

The code quality is high with good error handling and clean structure. The minor issues identified are mostly enhancements rather than bugs.

Recommendation: APPROVE with the above suggestions for future improvements.

---

[cloudflare-workers-and-pages]

Deploying tools with    Cloudflare Pages

Latest commit:	36c1d68
Status:	✅  Deploy successful!
Preview URL:	https://f1ba9e6d.tools-b1q.pages.dev
Branch Preview URL:	https://claude-wasm-inspector-tool-b.tools-b1q.pages.dev

View logs

[claude]

Claude finished @simonw's task —— View job

---

Code Review: WebAssembly Inspector Tool

Conducting comprehensive code review of the WebAssembly Inspector tool...

Todo List

• Read repository guidelines (CLAUDE.md) - No specific guidelines found
• Analyze the wasm-inspector.html file structure and code
• Review JavaScript code for bugs and issues
• Check security considerations for file upload and WASM execution
• Evaluate performance aspects
• Assess code quality and best practices
• Check for accessibility and usability concerns
• Provide comprehensive feedback

---

✅ Overall Assessment: EXCELLENT

This is a highly sophisticated and well-crafted WebAssembly inspection tool that demonstrates exceptional technical competence. The implementation is comprehensive, secure, and user-friendly.

Major Strengths

🏗️ Excellent Architecture & Code Quality

• Single-file design with clean separation of concerns between parsing, UI rendering, and execution logic
• Comprehensive WASM binary parsing manually implementing all major sections (types, imports, exports, memory, tables, globals, data, custom sections)
• Robust LEB128 implementation for both signed and unsigned variants - critical for WASM parsing
• Professional error handling with try-catch blocks around all section parsing and function execution
• Clean, modern ES6+ JavaScript with consistent coding style

🎨 Outstanding User Experience

• Multiple input methods: URL input, file upload, drag-and-drop, plus convenient example buttons for repo WASM files
• Interactive function executor with smart categorization (simple vs complex functions) and educational explanations
• Responsive design that works well on mobile devices
• Collapsible card interface for easy navigation of large amounts of data
• Professional styling with excellent visual hierarchy and type-specific color coding

🛡️ Excellent Security Posture

• Safe WASM instantiation with minimal import stubs to prevent crashes when dependencies are missing
• Proper file validation checking for .wasm extensions on drag-drop
• Sandboxed execution leveraging WebAssembly's built-in security model
• No server-side dependencies - entirely client-side operation
• Input validation and error boundaries prevent crashes

💡 Innovative Features

• String mode execution for functions that expect pointer+length parameters - very clever UX innovation
• Memory visualization with automatic string detection from returned pointers
• Educational tooltips explaining WASM types and function complexity
• Hex dump viewer with proper offset/ASCII formatting
• Smart function categorization helping users understand which functions are safe to execute

---

⚠️ Minor Issues & Recommendations

Code Quality Improvements

1. Missing Input Validation (wasm-inspector.html:659-663)

fileInput.addEventListener('change', (e) => {
    if (e.target.files.length > 0) {
        loadWasmFromFile(e.target.files[0]);  // No file type validation
    }
});

Recommendation: Add same validation as drag-drop handler:

if (e.target.files.length > 0) {
    const file = e.target.files[0];
    if (file.name.endsWith('.wasm')) {
        loadWasmFromFile(file);
    } else {
        showStatus('Please select a .wasm file', 'error');
    }
}

2. Global Function Pollution (wasm-inspector.html:1579, 1594)

window.executeFunction = function(name) { /* ... */ }
window.toggleStringMode = function(safeName, enabled) { /* ... */ }

Recommendation: Use namespace object instead:

window.WasmInspector = {
    executeFunction: function(name, safeName) { /* ... */ },
    toggleStringMode: function(safeName, enabled) { /* ... */ }
};

Performance Optimizations

3. Large File Processing (wasm-inspector.html:1145-1177)

function formatHexDump(bytes, maxBytes = 512) {
    // Processes entire array even with limits
}

Recommendation: For files >10MB, consider using Web Workers or streaming:

if (bytes.length > 10 * 1024 * 1024) {
    showStatus('Large file detected, processing may take time...', 'info');
    setTimeout(() => processLargeWasm(bytes), 100);
}

4. DOM Manipulation in Loops (Multiple locations)
Building HTML in loops could be optimized with DocumentFragment for better performance.

Security Enhancements

5. URL Validation (wasm-inspector.html:1198)

const response = await fetch(url);  // No URL validation

Recommendation: Add URL validation to prevent SSRF:

if (!url.match(/^https?:\/\/[^\s<>"]+\.wasm$/i)) {
    throw new Error('Invalid WASM URL format');
}

6. Content-Type Validation
Consider verifying application/wasm content-type in responses.

Accessibility Improvements

7. Missing ARIA Labels
Interactive elements could benefit from proper accessibility attributes:

<button onclick="...">Execute</button>

8. Keyboard Navigation
Card collapse currently only supports mouse clicks. Add keyboard support:

header.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        header.click();
    }
});

---

🔍 Detailed Security Analysis

✅ Excellent Security Practices:

• WebAssembly execution is properly sandboxed by the browser
• File uploads are client-side only with no server transmission
• Minimal import objects prevent crashes from missing dependencies
• No XSS vulnerabilities detected in dynamic HTML generation
• No unsafe eval() or innerHTML usage with unsanitized data

Minor Security Considerations:

• URL fetching could validate origins to prevent unexpected requests
• Large file DoS protection could be enhanced

---

⚡ Performance Assessment

✅ Well Optimized:

• Lazy loading with collapsible sections prevents UI bloat
• Hex dump limited to reasonable sizes
• Efficient binary parsing algorithms
• Smart memory usage in function execution

Potential Improvements:

• Large file handling (>50MB) could benefit from chunked processing
• Background parsing for very large WASM files

---

📱 Accessibility & Usability

✅ Strong Foundation:

• Responsive design works well across devices
• Good color contrast and visual hierarchy
• Clear error messages and status feedback
• Educational content helps users understand WASM concepts

Enhancement Opportunities:

• Screen reader support could be improved with better ARIA labels
• Keyboard navigation for all interactive elements

---

🏆 Final Verdict: APPROVE

This is an exceptional WebAssembly inspection tool that showcases:

1. Deep Technical Expertise - Manual WASM binary parsing is non-trivial and expertly implemented
2. Security Consciousness - Thoughtful approach to safe WASM execution and file handling
3. User-Centric Design - Educational features and smart UX make complex concepts accessible
4. Production Quality - Clean code, proper error handling, and professional presentation

The minor issues identified are mostly enhancements rather than bugs. This tool would be valuable for anyone working with WebAssembly, from beginners learning WASM concepts to experts debugging complex modules.

Recommended for merge with the above suggestions as potential future improvements.

---

🧪 Test Coverage Assessment

Current State: No automated tests present (expected for a demonstration tool)

Recommendations for Future:

• Unit tests for binary parsing functions (readLEB128, parseTypeSection, etc.)
• Integration tests for file loading and processing
• UI tests for function execution workflows

However, for a standalone inspection tool, the lack of formal tests is acceptable given the comprehensive error handling and defensive programming practices evident in the code.

---