---
title: Content Security Policy (CSP)
description: "Header yang membatasi asal script, style, dan gambar. Membantu menahan XSS, tapi harus diuji bertahap."
canonical: https://penasihathosting.com/wikihosting/csp
type: wiki
locale: id
updated: 2026-10-29
author: Willya Randika
---

# Content Security Policy (CSP)

## Overview

- **Summary:** Header yang membatasi asal script, style, dan gambar. Membantu menahan XSS, tapi harus diuji bertahap.
- **Author:** Willya Randika ([profile](/penulis/willya-randika))

## Article

CSP adalah header HTTP yang menentukan sumber mana yang boleh memuat script, style, gambar, font, dan koneksi. Header ini tidak menutup celah XSS, tapi membatasi apa yang bisa dilakukan kode yang berhasil disisipkan. Kalau penyerang menambahkan tag script, browser menolak menjalankannya dari domain yang tidak diizinkan.

## Direktif yang sering dipakai

`default-src` menjadi cadangan untuk semua resource. `script-src` mengatur JavaScript, termasuk script inline dan worker. `style-src` mengatur CSS. `img-src` mengatur gambar. `connect-src` mengatur fetch, XHR, WebSocket, dan beacon. `frame-ancestors` mencegah halaman di-embed di situs lain, sedangkan `form-action` membatasi tujuan form.

Nilai `'self'` berarti origin yang sama. Nonce dan hash mengizinkan script tertentu tanpa membuka semua script inline. Hindari `'unsafe-inline'` di `script-src` karena nilainya membuat proteksi XSS jauh lebih lemah.

## Contoh header dari aplikasi

```http
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://cdn.contoh.com; connect-src 'self' https://api.contoh.com; frame-ancestors 'self'; base-uri 'self'; form-action 'self'
```

Nonce di header harus sama dengan nonce yang dirender aplikasi di tag script. Aplikasi membuat nonce acak untuk setiap request, memakai nilai itu di HTML, lalu mengirim header yang sama. Jangan membuat nonce terpisah di Nginx karena nilainya tidak akan cocok dengan HTML.

## Mulai dari report-only

Jangan langsung mengaktifkan policy penuh. Pakai `Content-Security-Policy-Report-Only` lebih dulu. Browser akan melaporkan pelanggaran tanpa memblokir resource. Buka DevTools Console, cari pesan “Refused to load”, lalu perbaiki widget chat, analytics, font, dan iframe pembayaran yang belum diizinkan.

Setelah daftar pelanggaran bersih, terapkan satu direktif pada satu waktu. Uji login, checkout, dan form sebelum menaikkan policy. Kirim laporan ke endpoint sendiri dengan `report-to` atau `report-uri`, dan batasi ukuran log supaya tidak membanjiri server.

## Yang bikin CSP gagal

Policy yang disalin dari situs lain sering memblokir aset penting. Membuka `unsafe-inline` karena malas juga melemahkan proteksi. Lupa `frame-ancestors` membuat halaman masih bisa di-embed. Dan CSP tidak menggantikan validasi input atau escaping output.

CSP melengkapi [HSTS](/wikihosting/hsts) yang mengamankan transport dan [WAF](/wikihosting/waf) yang memfilter request di server. Ketiganya bekerja di lapisan berbeda.

Kalau aplikasi memuat resource dari origin lain, atur juga [CORS](/wikihosting/cors).

## FAQ

<Accordion>
  <AccordionItem title="Apakah CSP memperlambat situs?">
    Overhead utamanya kecil. Dampak terasa kalau ada banyak laporan pelanggaran atau policy dipasang lewat aplikasi yang lambat. Ukur dengan DevTools sebelum menyimpulkan.
  </AccordionItem>
  <AccordionItem title="Apakah CSP bisa menggantikan WAF?">
    Tidak. CSP adalah kontrol di browser. WAF memeriksa request di server. Keduanya menangani ancaman yang berbeda.
  </AccordionItem>
  <AccordionItem title="Mengapa Google Fonts diblokir setelah CSP aktif?">
    Tambahkan domain font ke `font-src` dan `style-src`, atau host font sendiri. Jangan langsung memakai `*` hanya untuk menghilangkan error.
  </AccordionItem>
</Accordion>