Cara Marketer Indonesia Pasang Sec-Fetch Headers di Next.js untuk Cegah SPAM Form dan CSRF 2026

TL;DR: Sec-Fetch Headers adalah set header HTTP yang dikirim otomatis browser modern, memberi tahu server konteks asal request. Dengan satu middleware Next.js sederhana yang menolak request dengan Sec-Fetch-Site: cross-site ke endpoint sensitif, SPAM form submission dari bot lintas-domain bisa turun 80-95%. Tetap whitelist endpoint webhook seperti payment gateway dan Meta CAPI.

Banyak marketer di Indonesia mengeluhkan form kontak dan newsletter yang dibombardir 50-200 submission palsu per hari dari bot lintas-domain. Solusi tradisional seperti reCAPTCHA bikin form lambat dan menurunkan conversion rate. Banyak yang akhirnya mematikan validasi karena ribet, lalu inbox banjir lead palsu yang bikin sales team kelelahan.

Dalam beberapa project terakhir untuk klien personal branding seperti Aris Setiawan dan e-commerce Nalesha, kami pasang Sec-Fetch Headers sebagai layer pertahanan pertama sebelum endpoint sensitif. Hasilnya, SPAM submission turun 80-95% tanpa menambah friction ke user asli. Form tetap satu-klik, tidak ada captcha popup.

Apa Itu Sec-Fetch Headers Singkatnya

Sec-Fetch Headers adalah implementasi spesifikasi Fetch Metadata Request Headers dari W3C. Browser modern (Chrome, Firefox, Safari sejak 2023) menambahkan otomatis di setiap request HTTP. Header utamanya: Sec-Fetch-Site (hubungan asal request dengan domain target), Sec-Fetch-Mode (jenis fetch), Sec-Fetch-Dest (tipe resource yang diminta), dan Sec-Fetch-User (apakah dipicu user).

Yang membuat header ini powerful: namanya diawali Sec-, jadi JavaScript tidak bisa men-set atau memodifikasinya. Bot yang pakai library HTTP seperti axios atau requests Python umumnya tidak mengirim header ini, atau mengirimnya dengan pola yang gampang dideteksi.

Setup di Next.js 15 Middleware

Buat middleware.ts di root project:

import { NextResponse, type NextRequest } from 'next/server';

const PROTECTED_PATHS = ['/api/contact', '/api/newsletter', '/api/checkout'];
const WEBHOOK_WHITELIST = ['/api/webhook/meta', '/api/webhook/midtrans'];

export function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl;

  if (WEBHOOK_WHITELIST.some(p => pathname.startsWith(p))) {
    return NextResponse.next();
  }

  if (PROTECTED_PATHS.some(p => pathname.startsWith(p))) {
    const site = req.headers.get('sec-fetch-site');
    const mode = req.headers.get('sec-fetch-mode');

    if (site && site !== 'same-origin' && site !== 'same-site' && site !== 'none') {
      return NextResponse.json({ error: 'forbidden' }, { status: 403 });
    }

    if (mode && mode === 'no-cors' && req.method === 'POST') {
      return NextResponse.json({ error: 'forbidden' }, { status: 403 });
    }
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/api/:path*'],
};

Logika cek: kalau request POST ke endpoint sensitif datang dari cross-site atau punya mode no-cors, langsung tolak. Webhook eksternal di-whitelist karena memang datang dari domain lain dan butuh akses.

Tabel Keputusan Allow vs Block

Untuk browser lama (di bawah 1% trafik di kebanyakan situs Indonesia per April 2026 menurut data StatCounter), aktifkan fallback ke CSRF token tradisional.

Studi Kasus: Newsletter Aris Setiawan

Aris Setiawan punya landing page personal branding dengan form newsletter yang menerima 120-180 submission palsu per hari. Setelah pasang middleware ini di awal April 2026, submission palsu turun ke 5-12 per hari. Conversion form asli naik 14% karena email valid tidak lagi tenggelam di antara spam. Bounce rate kampanye email turun dari 9,3% ke 1,8%.

Yang menarik, kami tidak mematikan reCAPTCHA sepenuhnya. Sec-Fetch jadi gerbang pertama, reCAPTCHA v3 (invisible, score-based) jadi gerbang kedua untuk request yang lolos. Friction user nol, akurasi pertahanan naik.

Kombinasikan dengan Pertahanan Lain

Sec-Fetch Headers bukan pengganti, tapi pelengkap. Untuk produksi, kombinasikan dengan Content Security Policy untuk cegah XSS, HSTS untuk paksa HTTPS, dan HttpOnly Cookies untuk session. Lapisan-lapisan ini saling menutup gap satu sama lain.

Untuk endpoint analytics yang menerima beacon dari user di tab background, perhatikan bahwa Sec-Fetch-Mode kadang bernilai no-cors. Kalau pakai Beacon API, buat exception untuk path tersebut.

Pertanyaan Umum

Apakah Sec-Fetch Headers merusak fitur sharing ke media sosial?

Tidak, selama endpoint yang dilindungi adalah API internal, bukan halaman publik. Sharing Open Graph preview dari Facebook atau Twitter mengakses halaman publik dengan Sec-Fetch-Site: none atau cross-site ke endpoint OG image. Pastikan halaman publik tidak ikut di-block.

Bagaimana cara test middleware ini di local?

Pakai curl dengan flag custom: curl -X POST -H "Sec-Fetch-Site: cross-site" http://localhost:3000/api/contact. Harus dapat status 403. Lalu coba submit dari browser, harus berhasil. Tracking error juga bisa pakai tools RUM di production.

Apakah Google Analytics dan Meta Pixel terpengaruh?

Tidak, karena keduanya mengirim ke domain milik vendor (google-analytics.com, facebook.com), bukan ke domain Anda. Yang perlu Anda whitelist hanya webhook inbound dari vendor seperti Midtrans atau Meta CAPI ke server Anda.

Bagaimana kalau pakai PWA atau mobile app?

PWA tetap pakai Sec-Fetch-Site: same-origin karena dijalankan di domain yang sama. Mobile app native (React Native, Flutter) tidak mengirim header ini, jadi treat seperti klien API biasa: gunakan API key atau JWT Bearer token.

Penutup

Sec-Fetch Headers adalah salah satu fitur browser yang paling under-utilized di kalangan marketer Indonesia. Pasang sekali di middleware, langsung dapat lapisan pertahanan extra tanpa biaya runtime. Untuk situs personal brand atau e-commerce yang sering jadi target SPAM, ini sering jadi quick win pertama sebelum berinvestasi di WAF berbayar.