Frontend Academy · Pelajaran

Content Security Policy: nonce dan hash

Tulis CSP ketat dengan nonce untuk skrip sebaris, hash untuk cuplikan yang dikenal, serta report-uri untuk memantau pelanggaran di produksi.

Content Security Policy: nonce dan hash adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Rangkuman CSP

CSP adalah header HTTP yang mencantumkan hal-hal yang boleh dimuat oleh peramban—skrip, gaya, gambar, font, bingkai, dan koneksi. Pertahanan berlapis: meskipun XSS melewati penyaring Anda, CSP sering kali menghentikan muatan serangan tersebut.

Anatomi Header CSP

Setiap arahan mencantumkan sumber yang diizinkan. 'self' berarti asal yang sama. URL tertentu juga dapat diizinkan.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  font-src 'self' https://fonts.gstatic.com;
  frame-ancestors 'none';
  base-uri 'self';

Arahan Umum

default-src: cadangan untuk semuanya. script-src: JavaScript. style-src: CSS. img-src: gambar. connect-src: fetch/XHR/WebSocket. font-src: font. frame-ancestors: pihak yang dapat menyematkan Anda dalam iframe (perlindungan dari clickjacking).

'unsafe-inline' — Celah Umum

Banyak situs menambahkan 'unsafe-inline' untuk mengizinkan tag <script> sebaris dan atribut onclick. Ini menggagalkan tujuan utama CSP—muatan XSS dapat dijalankan sebaris. Gantilah dengan nonce atau hash.

Nonce — Daftar Izin Sekali Pakai

Hasilkan nonce acak untuk setiap permintaan. Tandai skrip sebaris yang sah dengan nonce tersebut. Peramban hanya mengizinkan skrip dengan nonce yang sesuai.

// Server (Express middleware):
import crypto from 'crypto';

app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString('base64');
  res.setHeader('Content-Security-Policy',
    `script-src 'nonce-${res.locals.nonce}' 'strict-dynamic'`
  );
  next();
});

// Template:
<script nonce="<%= nonce %>">window.config = {...};</script>

'strict-dynamic'

Gabungkan nonce dengan 'strict-dynamic': skrip tepercaya (yang memiliki nonce) dapat memuat skrip tambahan. Ini menghilangkan kebutuhan untuk mencantumkan setiap URL sumber skrip. Inilah praktik terbaik CSP saat ini.

Hash — Daftar Izin Statis

Untuk skrip sebaris yang sudah diketahui dan tidak berubah (misalnya, build Anda selalu menghasilkan potongan bootstrap yang sama), hitung SHA-256-nya dan tambahkan sebagai sumber hash. Tidak diperlukan nonce untuk setiap permintaan.

// Hash of: console.log('hi');
Content-Security-Policy: script-src 'sha256-XwCNuB+/RUgPlAACI+yHrUKqUsm4zlpGV/Q8tEUx0Q4='

Hash Gaya Sebaris

Gunakan cara yang sama untuk tag <style> sebaris—hitung hash-nya dan tambahkan ke style-src. Ini lebih baik daripada 'unsafe-inline' untuk CSS.

Mode Pelaporan CSP

Gunakan Content-Security-Policy-Report-Only untuk menguji kebijakan tanpa memberlakukannya. Pelanggaran dilaporkan ke titik akhir Anda, tetapi tidak memblokir apa pun. Cara ini sangat baik untuk menerapkan CSP secara bertahap.

Content-Security-Policy-Report-Only: 
  default-src 'self';
  report-uri /csp-violations

// /csp-violations receives POSTs like:
{
  "csp-report": {
    "document-uri": "https://example.com/",
    "violated-directive": "script-src 'self'",
    "blocked-uri": "https://evil.com/x.js"
  }
}

report-to (Modern)

report-to + Reporting-Endpoints adalah pengganti modern untuk report-uri. Datanya sama, tetapi strukturnya lebih baik.

Reporting-Endpoints: csp="/csp-reports"
Content-Security-Policy: script-src 'self'; report-to csp

Integrasi Kerangka Kerja

Next.js: tetapkan CSP melalui middleware.ts atau header next.config.js. Nuxt: modul nuxt-security. Vite: konfigurasikan header server pengembangan; untuk produksi, gunakan konfigurasi header pada penyedia hosting Anda (Vercel, Netlify).

// next.config.js
module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'Content-Security-Policy',
        value: "default-src 'self'; script-src 'self' 'strict-dynamic'"
      }]
    }];
  }
};

Menguji CSP

Buka DevTools → Konsol: pelanggaran CSP dicatat di sana. Gunakan https://csp-evaluator.withgoogle.com/ untuk menilai kebijakan Anda. Gunakan mode hanya pelaporan di produksi terlebih dahulu; berlakukan kebijakan setelah semua pelanggaran diperbaiki.

Pemeriksaan Singkat

Mengapa 'unsafe-inline' dalam arahan script-src dianggap sebagai kelemahan CSP?

Rangkuman: Praktik Terbaik CSP

Tetapkan header Content-Security-Policy dengan arahan untuk setiap jenis sumber daya. Hindari 'unsafe-inline'—gunakan nonce + 'strict-dynamic' atau hash SHA. Tetapkan frame-ancestors 'none' (atau 'self'). Uji dalam mode Report-Only terlebih dahulu. Kirim pelanggaran ke /csp-violations (atau gunakan report-to modern). Kerangka kerja mendukung CSP melalui header middleware atau konfigurasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Content Security Policy: nonce dan hash” gratis?

Ya — teks lengkap “Content Security Policy: nonce dan hash” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Content Security Policy: nonce dan hash”?

Tulis CSP ketat dengan nonce untuk skrip sebaris, hash untuk cuplikan yang dikenal, serta report-uri untuk memantau pelanggaran di produksi. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Content Security Policy: nonce dan hash” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy