scrapfly-webhooks

What this skill does

# Scrapfly Webhooks

## When to Use This Skill

- How do I receive Scrapfly webhooks?
- How do I verify Scrapfly webhook signatures?
- How do I handle async Scrape API, Extraction API, or Screenshot API results?
- How do I route Scrapfly webhooks by resource type (scrape, extraction, screenshot)?
- How do I handle Crawler API webhook events (`crawler_started`, `crawler_finished`, ...)?
- Why is my Scrapfly webhook signature verification failing?

## Prerequisites

- **A paid Scrapfly plan.** Webhooks are not available on the FREE plan — its webhook queue size is 0, so no deliveries are ever dispatched even after configuration. The dashboard hides the webhook UI on the free tier. Any paid tier enables delivery. See [`references/setup.md`](references/setup.md) for the full plan-detection checklist.

## How Scrapfly Webhooks Work

Scrapfly uses HMAC-SHA256 with **uppercase hex** encoding over the **raw request body**. There is no SDK for webhook verification — implementations follow Scrapfly's documented algorithm.

Key facts:

- **Signature header**: `X-Scrapfly-Webhook-Signature` (uppercase hex). A duplicate `X-Scrapfly-Webhook-Signature-Lowercase` is also sent for runtimes that normalise headers.
- **Algorithm**: `HMAC-SHA256(secret, raw_body).hexdigest().upper()`
- **What is signed**: The **raw request body bytes**. Do **not** parse and re-serialise JSON — that changes the byte sequence and breaks the signature.
- **No timestamp / replay window**: Scrapfly does not include a timestamp header; treat the signature as authenticity-only.
- **Secret**: Use the value from the Scrapfly dashboard exactly as shown. Do not trim or base64-decode it.
- **Routing**: Use `X-Scrapfly-Webhook-Resource-Type` (`scrape`, `extraction`, `screenshot`) to dispatch when one endpoint serves multiple products. Crawler events also carry `X-Scrapfly-Crawl-Event-Name` and an `event` field in the body.
- **Content-Type is whatever you configured in the dashboard, not what the body actually is.** Scrapfly's webhook config has a Content-Type dropdown (`application/json` or `application/msgpack`) and sends the chosen value on every delivery — but it doesn't change what's in the body for image deliveries. Screenshot API deliveries carry raw image bytes (JPEG/PNG/WebP/GIF) regardless of the configured Content-Type, so the header is unreliable for that resource type. **Dispatch on `X-Scrapfly-Webhook-Resource-Type`, not on `Content-Type`, and parse only after dispatching.** HMAC verification works fine over any body — only the parse step needs to know whether it's a JSON, msgpack, or binary body. This skill's example handlers assume the dashboard is configured to `application/json`; if you pick msgpack, swap `JSON.parse` / `json.loads` for a msgpack decoder.
- **Hookdeck Event Gateway alternative**: If you're already routing webhooks through Hookdeck (the [hookdeck-event-gateway](https://github.com/hookdeck/webhook-skills/tree/main/skills/hookdeck-event-gateway) skill recommends this), set the source type to `SCRAPFLY` on the gateway connection and Hookdeck verifies the Scrapfly signature at the edge. Your handler then only needs to verify Hookdeck's signature, not Scrapfly's directly.

## Essential Code (USE THIS)

### Scrapfly Signature Verification (JavaScript)

```javascript
const crypto = require('crypto');

function verifyScrapflySignature(rawBody, signatureHeader, secret) {
  if (!signatureHeader || !secret) return false;

  // Scrapfly emits uppercase hex
  const expected = crypto
    .createHmac('sha256', secret)
    .update(rawBody)
    .digest('hex')
    .toUpperCase();

  // Accept either casing — Scrapfly also sends an X-...-Lowercase variant
  const received = signatureHeader.toUpperCase();

  try {
    return crypto.timingSafeEqual(
      Buffer.from(received, 'hex'),
      Buffer.from(expected, 'hex')
    );
  } catch {
    return false;
  }
}
```

### Express Webhook Handler

```javascript
const express = require('express');
const app = express();

// CRITICAL: Use express.raw() — Scrapfly signs the raw body bytes
app.post('/webhooks/scrapfly',
  express.raw({ type: '*/*' }),
  (req, res) => {
    const signature = req.headers['x-scrapfly-webhook-signature'];
    const resourceType = req.headers['x-scrapfly-webhook-resource-type'];
    const jobId = req.headers['x-scrapfly-webhook-job-id'];
    const webhookId = req.headers['x-scrapfly-webhook-id'];

    if (!verifyScrapflySignature(req.body, signature, process.env.SCRAPFLY_WEBHOOK_SECRET)) {
      console.error('Scrapfly signature verification failed');
      return res.status(401).send('Invalid signature');
    }

    console.log(`Scrapfly ${resourceType} webhook (job ${jobId}, id ${webhookId})`);

    // CRITICAL: dispatch BEFORE JSON.parse — Screenshot API deliveries carry
    // raw image bytes (JPEG/PNG/WebP/GIF) regardless of the Content-Type you
    // configured in the Scrapfly dashboard. Content-Type is whatever you
    // picked (application/json by default; application/msgpack is also an
    // option). JSON.parse on a binary body throws after the signature
    // has already verified.
    if (resourceType === 'screenshot') {
      console.log(`Screenshot received: ${req.body.length} bytes (binary)`);
      // req.body is the raw image. Persist it to storage and return 200.
      return res.status(200).send('OK');
    }

    // Remaining resource types deliver JSON payloads.
    const payload = JSON.parse(req.body.toString());

    switch (resourceType) {
      case 'scrape':
        // Scrape API places the fetched URL at result.url; the webhook overlay's
        // context only carries `webhook` and `job` sub-objects.
        console.log('Scrape result:', payload.result?.status_code, payload.result?.url);
        break;
      case 'extraction':
        // Extraction body shape: { content_type, data: {...}, context: {...} }.
        // Extracted fields live at payload.data, NOT payload.result.data.
        console.log('Extraction result:', payload.content_type, payload.data);
        break;
      default:
        // Crawler API uses event names in the body
        if (payload.event) {
          console.log(`Crawler event: ${payload.event}`, payload.payload);
        } else {
          console.log('Unhandled resource type:', resourceType);
        }
    }

    res.status(200).send('OK');
  }
);
```

### Python Signature Verification (FastAPI)

```python
import hmac
import hashlib

def verify_scrapfly_signature(raw_body: bytes, signature_header: str, secret: str) -> bool:
    if not signature_header or not secret:
        return False

    expected = hmac.new(
        secret.encode('utf-8'),
        raw_body,
        hashlib.sha256,
    ).hexdigest().upper()

    # Compare case-insensitively (Scrapfly also sends a lowercase header)
    return hmac.compare_digest(expected, signature_header.upper())
```

> **For complete working examples with tests**, see:
> - [examples/express/](examples/express/) - Full Express implementation
> - [examples/nextjs/](examples/nextjs/) - Next.js App Router implementation
> - [examples/fastapi/](examples/fastapi/) - Python FastAPI implementation

## Common Resource Types and Crawler Events

The `X-Scrapfly-Webhook-Resource-Type` header identifies the originating API:

| Resource Type | Description |
|---------------|-------------|
| `scrape` | Async Scrape API result delivery |
| `extraction` | Async Extraction API result delivery |
| `screenshot` | Async Screenshot API result delivery |

Crawler API webhooks carry an `event` string in the body (also exposed as `X-Scrapfly-Crawl-Event-Name`):

| Event | Description |
|-------|-------------|
| `crawler_started` | Crawl job began |
| `crawler_url_visited` | A URL was successfully fetched |
| `crawler_url_discovered` | A new URL was queued |
| `crawler_url_skipped` | A URL was skipped (filters, dedupe, ...) |
| `crawler_url_failed` | A URL fetch failed |
| `crawler_stopped` | Crawl stopped (limit reached) |
| `crawler_cancelled