Header Dbuggy

A simple tool to test CORS header handling in Supabase Edge Functions, specifically demonstrating that case-insensitivity in Access-Control-Allow-Headers works correctly.

Live Demo

---

Why This Exists

This tool demonstrates that:

• Supabase Edge Functions correctly handle header case-sensitivity
• The CORS specification treats header names as case-insensitive
• Headers like x-IDEMPOTENCY-key match against x-IdempoteNCY-key as expected

How It Works

┌─────────────────────────────────────────────────────────────────┐
│                         Browser                                 │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  Request with header: x-IDEMPOTENCY-key                   │  │
│  └───────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                   Supabase Edge Function                        │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │  Access-Control-Allow-Headers: x-IdempoteNCY-key          │  │
│  │                                                           │  │
│  │  ✓ Request succeeds - CORS is case-insensitive!           │  │
│  └───────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

The Edge Function defines allowed headers with intentionally mixed casing:

const allowedHeaders = ["x-example", "x-IdempoteNCY-key"];

The test UI sends a request with a differently-cased header (x-IDEMPOTENCY-key), proving that the CORS preflight check handles case-insensitivity correctly.

Using the Demo

1. Visit supabase.github.io/header-dbuggy
2. The form is pre-filled with test values:
   • API URL: Points to a deployed Edge Function supabase/functions/restrict-headers/index.ts by default
   • Header Key: x-IDEMPOTENCY-key (different case than what's specified as allowed)
   • Header Value: someValue
3. Click Send Request
4. Observe the successful response showing:
   • Which headers were allowed by the function
   • Which headers were actually received

Project Structure

header-dbuggy/
├── index.html                      # Web UI for testing
├── supabase/
│   ├── config.toml                 # Supabase project config
│   └── functions/
│       └── restrict-headers/
│           └── index.ts            # Edge Function implementation
└── .github/workflows/
    ├── deploy-frontend.yaml        # GitHub Pages deployment
    └── deploy-function.yaml        # Supabase Functions deployment

Local Development

# Start Supabase locally
supabase start

# The function will be available at:
# http://127.0.0.1:54321/functions/v1/restrict-headers

The CORS Spec

Per RFC 7230:

Each header field consists of a case-insensitive field name...

This tool provides a quick way to verify that Supabase Edge Functions correctly implement this behavior.

---

Built with Supabase Edge Functions