Cara Marketer Indonesia Pasang Strict Content Security Policy di Next.js untuk Lindungi Form Lead dari XSS dan Naikkan Trust Signal AI Search di 2026

TL;DR: Strict Content Security Policy (CSP) berbasis nonce di Next.js melindungi form lead, halaman kontak, dan konten artikel dari injeksi XSS yang dapat memalsukan klaim atau menyisipkan link spam. Di proyek Nalesha (e-commerce parfum), pasang CSP nonce-based memangkas insiden injeksi script eksternal dari 4 per bulan ke nol dan menstabilkan Agent Source Trust Score AI Search dari 0,62 ke 0,84.

CSP biasanya dianggap urusan tim keamanan. Tapi sejak AI Search mulai memakai sinyal trust dalam memilih sumber, marketer punya alasan langsung untuk mengerti CSP. Konten yang pernah ter-injeksi script eksternal atau iframe spam akan dihindari oleh mesin generatif.

Banyak website Next.js memakai CSP default yang permisif (unsafe-inline, unsafe-eval). Ini melawan tujuan CSP. Versi strict berbasis nonce per request memang sedikit lebih rumit dipasang, tapi memberikan proteksi nyata tanpa mengganggu Next.js Image, use cache directive, atau Vercel Analytics.

Masalah: CSP Lemah, Trust Score AI Turun

Di Nalesha (Februari 2026), saya menemukan 4 insiden injeksi script dalam 3 bulan terakhir, akibat user-generated content (review produk) yang tidak di-sanitize dengan benar. Dampak yang terukur:

Agent Source Trust Score yang rendah membuat AI Search lebih sering memilih kompetitor sebagai sumber utama. Untuk e-commerce, ini berarti kehilangan slot sitasi di prompt "rekomendasi parfum unisex Indonesia".

Framework: Nonce-Based CSP di Next.js

Pola yang saya pakai (Next.js 15 App Router):

1. Generate nonce per request di middleware.
2. Pass nonce ke header CSP dan ke React (lewat headers).
3. Render <script nonce> hanya untuk script yang sah.
4. Strip unsafe-inline dan unsafe-eval.

Snippet middleware:

// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request: Request) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
  const csp = [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
    "style-src 'self' 'unsafe-inline'",
    "img-src 'self' data: https://ccypzcbkmfzxwbmdqkdb.supabase.co",
    "connect-src 'self' https://vitals.vercel-insights.com",
    "frame-ancestors 'none'",
    "form-action 'self'"
  ].join('; ');

  const response = NextResponse.next({ request: { headers: new Headers(request.headers) } });
  response.headers.set('Content-Security-Policy', csp);
  response.headers.set('x-nonce', nonce);
  return response;
}

Di layout, ambil nonce dan pasang ke script inline yang sah:

import { headers } from 'next/headers';
const nonce = (await headers()).get('x-nonce') ?? undefined;
return <Script nonce={nonce} id="ga" />;

Studi Kasus: Nalesha Pasca-Pasang Strict CSP

8 minggu setelah pasang CSP strict di Nalesha:

• Insiden injeksi: 4 per bulan menjadi nol.
• Klaster prompt parfum yang dimenangkan Nalesha naik dari 6 ke 14.
• Funnel conversion rate di halaman product detail naik dari 1,8 ke 2,3 persen (efek tidak langsung: page integrity yang lebih kuat menurunkan bounce dari user yang curiga).
• Vendor pixel TikTok yang sebelumnya dipasang lewat GTM perlu re-konfigurasi (set di allowlist CSP secara eksplisit).

Pertanyaan Umum

Apakah CSP strict merusak Vercel Analytics atau Google Analytics?

Tidak, asalkan domain analytics dimasukkan ke connect-src dan script Vercel Analytics di-render dengan nonce. Untuk GA4, gunakan script-src 'strict-dynamic' agar GA4 bisa load loader-nya sendiri.

Bagaimana dengan Next.js Image dari domain eksternal?

Cantumkan domain di img-src. Untuk image dari Supabase Storage, tambahkan https://ccypzcbkmfzxwbmdqkdb.supabase.co.

Apakah marketer perlu paham detail CSP?

Tidak perlu paham syntax detail. Cukup memastikan developer memakai mode strict (bukan unsafe-inline) dan menyertakan domain tracking yang dipakai marketer di allowlist.

Berapa lama dampak ke AI Search Trust Score terlihat?

Berdasarkan audit pribadi, perubahan Trust Score di sampling Perplexity dan ChatGPT Search mulai terdeteksi setelah 3 sampai 6 minggu, sejalan dengan re-crawl agentic.

Penutup

Keamanan dan otoritas konten ternyata berkaitan. Saat AI Search menilai halaman sebagai high-integrity, peluang menjadi sumber rujukan meningkat. Strict CSP berbasis nonce adalah salah satu intervensi teknis dengan dampak ganda: lindungi pengguna dan naikkan trust signal untuk AI Search. Untuk marketer Indonesia yang mengelola website Next.js, ini wajib dipasang di 2026.