Tangkis XSS Pake CSP Header di Next.js? Gampang Parah!

Waspada Lur, Web Lu Bisa Kena 'Suntik' Kalo Gak Pake Ini!

Pernah gak sih lu lagi asik-asik ngoding, terus tiba-tiba kepikiran: 'Web gue aman gak ya dari tangan jahil hacker?'. Bayangin aja, lu udah capek-capek bikin UI yang estetik bin cakep, eh tau-taunya ada orang iseng yang nyelipin script aneh-aneh lewat input form atau query params. Hasilnya? Data user lu bisa dicuri, atau yang paling parah, web lu malah jadi tempat sebar malware. Duh, ngeri banget kan? Wkwk.

Nah, serangan kayak gitu biasanya disebut XSS atau Cross-Site Scripting. Tapi tenang, jangan langsung mager buat lanjutin project lu. Ada satu 'satpam' sakti yang bisa lu pasang di gardu depan web lu buat ngehalau serangan ini. Namanya adalah Content Security Policy atau yang lebih akrab dipanggil CSP Header. Di artikel kali ini, kita bakal bahas tuntas gimana cara masang CSP di Next.js dengan gaya yang asik dan gak bikin pusing.

Apa Sih CSP Itu? Analoginya Gini...

Gampangnya gini lur, bayangin lu lagi ngadain pesta privat di rumah. Lu pasti punya daftar tamu (whitelist) siapa aja yang boleh masuk, kan? Kalo ada orang asing tiba-tiba nyelonong bawa makanan aneh, satpam lu bakal langsung nendang dia keluar. Nah, CSP itu kerjanya mirip banget kayak gitu. CSP ngasih tau browser: 'Eh Browser, cuma script dari domain A, B, dan C ya yang boleh jalan di web gue. Sisanya? Blokir aja tanpa ampun!'.

Jadi, meskipun hacker berhasil nyelipin tag <script> jahat ke dalem HTML lu, browser gak bakal mau ngejalanin script itu karena gak ada di daftar 'tamu resmi' yang lu buat di CSP. Gaskeun lah kita pelajari gimana cara nerapinnya!

Kenapa Next.js Butuh CSP?

Next.js itu emang udah canggih banget, tapi yang namanya keamanan itu tanggung jawab kita sebagai developer. Secara default, Next.js emang udah punya beberapa proteksi, tapi buat serangan yang lebih spesifik kayak XSS, kita butuh layer tambahan. Apalagi kalo lu banyak pake library pihak ketiga atau Google Tag Manager, risiko ada script liar itu makin gede, lur.

1. Cara Gampang: Pake next.config.js

Kalo lu mau cara yang sat-set-wat-wet tanpa banyak mikir, lu bisa naruh CSP header langsung di file next.config.js. Ini cocok banget buat web yang sifatnya statis atau gak terlalu butuh kustomisasi ribet. Cekidot kodingannya:

const cspHeader = `
    default-src 'self';
    script-src 'self' 'unsafe-eval' 'unsafe-inline';
    style-src 'self' 'unsafe-inline';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
`.replace(/\s{2,}/g, ' ').trim();

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader,
          },
        ],
      },
    ];
  },
};

Tapi inget ya, pake 'unsafe-inline' itu sebenernya kurang disaranin karena masih ngasih celah dikit. Tapi buat awal-awal biar web lu gak langsung pecah tampilannya, ya boleh lah. Tapi kalo mau yang lebih pro, kita harus pake yang namanya Nonce.

2. Cara Pro: Pake Middleware dan Nonce

Apa itu Nonce? Nonce itu singkatan dari 'number used once'. Jadi setiap kali user buka web lu, Next.js bakal nge-generate kode unik yang cuma berlaku sekali itu doang. Script yang gak punya kode unik ini bakal langsung ditolak mentah-mentah sama browser. Ini baru namanya proteksi tingkat tinggi, lur! Gaskeun kita liat cara implementasinya di Middleware:

import { NextResponse } from 'next/server';

export function middleware(request) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'unsafe-inline';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
  `.replace(/\s{2,}/g, ' ').trim();

  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-nonce', nonce);
  requestHeaders.set('Content-Security-Policy', cspHeader);

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
  response.headers.set('Content-Security-Policy', cspHeader);

  return response;
}

Dengan cara ini, setiap script yang lu tulis harus punya atribut nonce yang sama. Kalo beda? Ya wassalam, gak bakal jalan tuh script. Memang agak repot dikit di awal, tapi demi keamanan user, masa lu mager sih? Wkwk.

Tips Biar Gak Pusing Pas Pasang CSP

Masang CSP itu emang gampang-gampang susah. Seringkali pas baru dipasang, eh web kita malah jadi berantakan karena banyak script atau style yang keblokir. Biar gak emosi, lu bisa pake mode Content-Security-Policy-Report-Only dulu. Di mode ini, browser gak bakal ngeblokir apa-apa, tapi dia bakal ngasih laporan di console browser tentang apa aja yang bakal keblokir kalo CSP-nya beneran aktif. Jadi lu bisa benerin dulu daftar whitelist-nya sebelum 'perang' beneran.

• Selalu cek console browser buat liat error CSP.
• Gunakan tool kayak CSP Evaluator dari Google buat ngecek seberapa kuat policy yang lu buat.
• Jangan pake 'unsafe-inline' kalo emang gak kepentok banget, biar makin aman.

Kesimpulan Singkat

Keamanan web itu bukan pilihan, tapi keharusan. Dengan masang CSP Header di Next.js, lu udah selangkah lebih maju buat ngelindungin project lu dari serangan XSS yang nyebelin. Mau pake cara simpel di config atau cara pro pake middleware, yang penting lu pasang! Jangan nunggu kena hack baru sibuk benerin, ntar malah nyesel, lur.

Gimana? Ternyata gak seserem yang dibayangin kan? Kodingan aman, hati pun tenang. Gaskeun lah langsung dipraktekin ke project masing-masing!

Kira-kira fitur keamanan apa lagi nih yang pengen lu bahas bareng gue di artikel selanjutnya?

FAQ (Pertanyaan Umum)