ReactDrop Update: Validate Components Before You Deploy

Since launching ReactDrop, we have heard the same question from developers: “Will my component actually work before I create a gist?” Today’s update answers that with a dedicated component validator and a round of security hardening across the platform.

The Component Validator

Visit reactdrop.verdient.co.uk/validate to try it. Paste any React TSX component and get instant feedback on whether it will deploy on ReactDrop.

Five Validation Checks

The validator runs five checks against your code, all client-side with no API calls:

1. Code size — must be under 50KB
2. React component detection — at least one PascalCase component found via AST parsing
3. Default export — present, or the validator flags that it will auto-add one
4. Forbidden imports — blocks Node.js builtins like fs, path, and child_process
5. Import allowlist — every external import must be in ReactDrop’s supported library list (Radix UI, lodash, date-fns, recharts, framer-motion, and more)

When all checks pass, a Preview Component button renders your component in the same Sandpack sandbox used by the production renderer. What you see in the validator is exactly what others will see when they open your shared link.

How It Works

The validator extends the existing astComponentDetector.ts module with a new componentValidator.ts that parses imports, checks them against the dependency allowlist, and returns structured results. No server round-trips needed — everything runs in the browser.

// Validation runs entirely client-side
const result = validateComponent(pastedCode);
// result.checks: [{id, label, status, message}, ...]
// result.isDeployable: boolean
// result.componentName: string | null
// result.processedCode: string | null (ready for Sandpack)

The Sandpack preview reuses the exact same configuration as the production renderer, so there are no surprises when you deploy.

Security Hardening

Alongside the validator, we tightened security across the platform.

Proxy Endpoint

The /proxy endpoint previously forwarded requests to arbitrary URLs. It now enforces:

• Domain allowlist — only approved CDN domains (tailwindcss, jsdelivr, unpkg, cdnjs, Google Fonts)
• HTTPS only — HTTP requests are rejected
• SSRF prevention — private and internal IP ranges are blocked
• Response size limit — 5MB maximum
• Timeout — 10-second request timeout
• GET only — other HTTP methods are rejected

Security Headers

All worker responses now include:

• X-Content-Type-Options: nosniff
• X-Frame-Options: DENY
• Referrer-Policy: strict-origin-when-cross-origin
• Permissions-Policy: camera=(), microphone=(), geolocation=()

Dependency Management

• Dependabot is now configured for weekly dependency checks, with PRs grouped by category (Radix UI, dev dependencies, production dependencies)
• pnpm audit runs in CI on every push
• A SECURITY.md documents the vulnerability disclosure process and security architecture

Vulnerability Fixes

• Updated happy-dom from 18.0.1 to 20.8.9, fixing a critical remote code execution vulnerability
• Confirmed vite at 7.3.1 (patched against known server.fs issues)

What’s Next

The remaining items on the roadmap:

• GitHub OAuth — authenticate users before they can submit components via the validator, so every submission has a known identity
• Rate limiting — per-user and per-IP rate limits on API endpoints and validator submissions
• Content moderation — report button, admin review queue, and terms of service

Try It

Head to reactdrop.verdient.co.uk/validate and paste a component. The example button loads a Counter component so you can see the full validation and preview flow in action.

If you find issues or have feedback, email tom@verdient.co.uk.