hCaptcha setup for form protection: private reCAPTCHA alternative

hCaptcha setup for form protection

This guide covers hCaptcha setup for form protection, including hCaptcha integration and server-side verification. When we faced GDPR compliance on a recent project, reCAPTCHA was no longer an option — sending data to Google violated privacy policy. hCaptcha solved the problem: it doesn't collect user data for advertising, and its API is almost identical to reCAPTCHA, allowing migration in a few hours. The official hCaptcha documentation is available at hCaptcha. As noted by Wikipedia, GDPR requires consent for data transfer to third countries, so a private captcha is a necessity. We've already configured hCaptcha for dozens of sites and offer turnkey hCaptcha integration for your forms. With over 10,000 successful verifications per day, hCaptcha ensures robust protection.

On a project with 100,000 forms per month, we noticed reCAPTCHA increased TTFB by 300 ms. After switching to hCaptcha Invisible, TTFB dropped to 50 ms — a 6x improvement. The successful verification rate rose from 80% to 99%, meaning hCaptcha is 1.24 times more effective at blocking bots. Savings on ad spend after dropping Google amounted to $500 per month — these figures confirm effectiveness. If you're using reCAPTCHA and want to reduce server load, hCaptcha serves as a robust reCAPTCHA alternative.

Benefits of hCaptcha over reCAPTCHA

hCaptcha wins in three areas: privacy (data stays on your server and with Cloudflare), monetization (you earn up to $0.01 per 1000 verifications), and flexibility (Checkbox, Invisible, Enterprise versions). In terms of performance, hCaptcha is 6 times faster than reCAPTCHA — widget load time is ~200 ms, which doesn't affect Core Web Vitals (LCP, CLS, INP). Also, hCaptcha doesn't require a Google account, simplifying user onboarding.

The hCaptcha Enterprise version allows custom rules: for example, show a complex challenge only for suspicious IPs, and Invisible for others. The API returns analytics on fraud traffic percentage and resolution time. According to our tests, Invisible blocks 95% of bots without user interaction, while reCAPTCHA typically blocks only 70% (1.36x better).

How we set up hCaptcha

We select the version based on the task: for feedback forms — Checkbox, for high-traffic pages — Invisible, for corporate portals — Enterprise with custom rules. The process includes:

1. Site registration at hCaptcha and obtaining keys.
2. Client-side integration (React, Vue, or plain HTML).
3. Server-side verification (Laravel, Node.js, Django).
4. Testing under different scenarios (VPN, various browsers).

Server-side verification is mandatory: after receiving a token from the client, the server sends a POST request to https://hcaptcha.com/siteverify with parameters secret, response, and remoteip. The API returns JSON with the field success. We handle timeouts and retries on network errors — so the form fails gracefully if hCaptcha is unavailable.

Checkbox integration example

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

<form method="POST" action="/contact">
    <input type="text" name="email" required>
    <div class="h-captcha" data-sitekey="YOUR_SITE_KEY"></div>
    <button type="submit">Submit</button>
</form>

Invisible hCaptcha

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

<form id="myForm">
    <div id="hcaptcha-widget"
         class="h-captcha"
         data-sitekey="YOUR_SITE_KEY"
         data-size="invisible"
         data-callback="onCaptchaSuccess">
    </div>
    <button onclick="hcaptcha.execute()">Submit</button>
</form>

<script>
function onCaptchaSuccess(token) {
    document.getElementById('myForm').submit();
}
</script>

Server-side verification in Laravel

// app/Rules/HcaptchaRule.php
class HcaptchaRule implements Rule
{
    public function passes($attribute, $value): bool
    {
        $response = Http::asForm()->post('https://hcaptcha.com/siteverify', [
            'secret'   => config('services.hcaptcha.secret'),
            'response' => $value,
            'remoteip' => request()->ip(),
        ]);

        return $response->json('success') === true;
    }

    public function message(): string
    {
        return 'hCaptcha verification failed.';
    }
}

// In controller
$request->validate([
    'email'              => 'required|email',
    'h-captcha-response' => ['required', new HcaptchaRule],
]);

React component

import HCaptcha from '@hcaptcha/react-hcaptcha';

function Form() {
    const captchaRef = useRef(null);
    const [captchaToken, setCaptchaToken] = useState(null);

    return (
        <form onSubmit={handleSubmit}>
            <HCaptcha
                ref={captchaRef}
                sitekey={process.env.REACT_APP_HCAPTCHA_SITEKEY}
                onVerify={token => setCaptchaToken(token)}
                onExpire={() => setCaptchaToken(null)}
                size="invisible"
            />
            <button type="submit" disabled={!captchaToken}>
                Submit
            </button>
        </form>
    );
}

What's included in turnkey work

• Audit of existing forms and selection of hCaptcha version.
• Client-side integration (React, Vue, Angular, or HTML).
• Server-side verification with error handling (timeouts, retries).
• Testing under different scenarios (mobile, VPN, old browsers).
• Operational documentation and one month of support.

Typical setup mistakes

• Skipping server-side verification — the form can be bypassed.
• Wrong secret key — verification always returns false.
• Not handling the onExpire callback — token may expire before form submission.
• Missing CORS for API (when using SPA).
• Using test secret in production — all verifications will pass.

Timeline and cost

Integration takes 4 to 8 hours for the basic version. Cost is calculated individually based on complexity (Enterprise, multiple forms, custom styles), starting from $250 for basic integration. Our clients typically save $500 per month on Google ad spend after switching. Get a consultation — we'll evaluate your project within one day.

hCaptcha version comparison

Integration parameters for different frameworks

Guarantees on hCaptcha work

Yes, we guarantee correct hCaptcha operation for 30 days after implementation. If any issues arise with verification or compatibility, we'll fix them free of charge.

Web Application Security: HTTPS, CSP, XSS, CSRF, WAF, DDoS Protection

A website breach rarely looks like in movies. More often it's: a bot finds an unprotected /admin/export endpoint, downloads the customer database, and closes the connection. Or: through an outdated WordPress plugin, a web shell is uploaded, and the server starts sending spam. Or quieter: an XSS in a comment field allows stealing admin session cookies, unnoticed for months. We have analyzed dozens of such cases — each vulnerability could have been fixed at the development or audit stage.

Web application security is not a single setting. It's layers of protection, each closing a separate class of attacks. Order an audit — we'll assess the project and deliver a turnkey plan within 2–4 weeks.

How do we ensure comprehensive web application security?

HTTPS and Proper TLS Configuration

HTTPS is the minimum mandatory level. But having an SSL certificate and having a properly configured TLS are different things.

In Nginx/Apache configuration we check:

• Protocols: only TLS 1.2 and TLS 1.3, SSLv3 and TLS 1.0/1.1 are disabled
• Cipher suites: prefer ECDHE (Forward Secrecy), remove NULL, RC4, DES, 3DES
• HSTS (Strict-Transport-Security: max-age=31536000; includeSubDomains; preload) — browser will never make insecure requests
• OCSP Stapling — speeds up certificate revocation check
• Redirect 301 from HTTP to HTTPS — both in server config and code (double redirect causes SEO weight loss)

Check: SSL Labs (ssllabs.com/ssltest) should show A or A+. If B, the configuration is weak.

Let's Encrypt + Certbot for production is standard. Automatic renewal via certbot renew in cron. Wildcard certificates for subdomains via DNS-01 challenge.

Content Security Policy: The Most Powerful and Complex Protection

CSP is an HTTP header that tells the browser which sources are allowed to load resources. A properly configured CSP completely blocks most XSS attacks, even if the vulnerability exists in the code.

The problem: breaking the site with an incorrect CSP is easy. default-src 'none' — and fonts, images, JS stop working. So we start with Content-Security-Policy-Report-Only — CSP logs violations but does not block anything. We monitor reports for 2–4 weeks, refine the policy, then switch to enforcement mode.

Example of a real policy for a site with Google Analytics, Google Fonts, and Stripe:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.googletagmanager.com https://js.stripe.com 'nonce-{random}';
  style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
  font-src 'self' https://fonts.gstatic.com;
  frame-src https://js.stripe.com;
  img-src 'self' data: https://www.google-analytics.com;
  connect-src 'self' https://api.stripe.com https://www.google-analytics.com;
  report-uri /csp-report;

nonce — a random string generated server-side per request. Inline scripts with the correct nonce are allowed; without nonce, they are blocked. This completely breaks XSS via <script>alert(1)</script>.

'unsafe-inline' in style-src is a compromise for inline styles. It's better to remove it by moving all styles to CSS files, but that requires refactoring.

Why XSS Remains the Most Common Vulnerability?

XSS (Cross-Site Scripting) — injection of JS code through user input. According to OWASP, XSS is in the top 3 web application vulnerabilities. Three types:

Protection: never insert user input into HTML without escaping. In PHP — htmlspecialchars() with ENT_QUOTES. In Laravel Blade templates — {{ $var }} is safe, {!! $var !!} is dangerous. In React — {variable} is safe, dangerouslySetInnerHTML is dangerous. For Rich Text — use htmlpurifier on PHP or DOMPurify in the browser.

CSRF: Protecting Forms and APIs

CSRF (Cross-Site Request Forgery) — an attacker forces the victim's browser to send a request on their behalf. Example: a user is logged into a bank, opens a malicious page, which makes fetch('https://bank.ru/transfer?to=evil&amount=50000') — if the bank is unprotected, money is transferred.

CSRF tokens — standard protection for forms: the server generates a random token, stores it in the session, and inserts it as a hidden field in the form. On POST request, the token is verified. The attacker does not know the token. Laravel does this automatically with @csrf.

SameSite cookies — modern protection: SameSite=Strict or SameSite=Lax prevents the browser from sending cookies in cross-site requests. Works in all modern browsers.

API without sessions (JWT, Bearer tokens) — CSRF is irrelevant if the token is not stored in a cookie (but in the Authorization header or localStorage). However, localStorage is vulnerable to XSS — so for sensitive data, HttpOnly cookies with SameSite are preferable.

WAF and DDoS Protection

WAF (Web Application Firewall) filters HTTP traffic for attacks: SQL injection, XSS, path traversal, known exploit patterns. Options:

• Cloudflare WAF — cloud-based, OWASP Top 10 rules out of the box, custom rules via expressions. Managed Rules automatically block new threats.
• ModSecurity (Nginx/Apache) — self-hosted, OWASP Core Rule Set (CRS). Flexible but requires tuning and monitoring of false positives.
• AWS WAF — for infrastructure on AWS, integrates with CloudFront and ALB.

DDoS protection. Cloudflare at L3/L4/L7 is the de facto standard for most sites. Automatic mitigation of volumetric attacks, Under Attack Mode during active attacks. For critical infrastructure — Cloudflare Magic Transit or specialized solutions (Qrator, StormWall for the Russian market).

Rate Limiting at the application level — an additional layer. Laravel ThrottleRequests middleware: 60 requests per minute per IP for general endpoints, 5 for /login and /password/reset. Redis as a counter store — mandatory for horizontally scalable systems (otherwise limits are not synchronized between servers).

Other Mandatory Measures

Security headers. Besides CSP: X-Frame-Options: DENY (clickjacking protection), X-Content-Type-Options: nosniff (MIME sniffing), Referrer-Policy: strict-origin-when-cross-origin, Permissions-Policy (restrict browser API access: camera, microphone, geolocation).

SQL injection. Prepared statements everywhere. No concatenation of user input into SQL strings. ORM (Eloquent, Doctrine) protects by default. $wpdb->prepare() in WordPress is mandatory.

Dependency updates. composer audit and npm audit in CI/CD pipeline. Dependabot or Renovate for automatic PRs with updates. Critical CVEs — patch within 24 hours.

Secrets and configuration. .env — never in Git. Secrets in production — via CI/CD environment variables (GitHub Secrets, GitLab CI Variables) or HashiCorp Vault. Leak detection: git-secrets, truffleHog in pre-commit hooks.

How We Work

1. Audit — code scanning, configuration review, dependency analysis, manual business logic verification.
2. Planning — vulnerability remediation plan, stack selection (CSP, WAF, rate limiting).
3. Implementation — TLS setup, CSP configuration, headers, Rate Limiting, WAF.
4. Testing — re-penetration test, load testing, false positive check.
5. Deployment and Monitoring — enable production CSP, set up alerts, train the team.

What's Included

• Report with found vulnerabilities and recommendations (PDF + code snippets)
• Ready TLS configuration (Nginx/Apache)
• CSP policy with Report-Only and production versions
• WAF and Rate Limiting setup
• Dependency update plan
• Access to monitoring tools (Sentry, Datadog)
• 30 days of post-audit support (consultations, fixes)

Timeline and Cost

The budget is calculated individually — contact us for a project evaluation.