Content Security Policy (CSP)

10 Dec 2024

Kita analogikan website itu sebuah rumah. Kalau ngga pake CSP siapa aja bisa keluar masuk bawa barang karena ngga ada sistem keamanan yang mengawasi. Nah, peran CSP ini kayak kita pake jasa satpam buat ngecek setiap orang dan barang apa yang dibawa.

"Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft, to site defacement, to malware distribution."

— MDN Web Docs

CSP ini kerjanya sebagai pembatas resource yang bisa di akses oleh website kita. Resource yang dimaksud contohnya script, style, gambar, font, dan lainnya.

Directive

Untuk mengimplementasikan CSP kita pake yang namanya directive yang diikuti oleh value. Tiap directive ini mengatur aspek keamanan yang berbeda dan dipisahkan dengan titik koma. Berikut beberapa directive yang sering digunakan:

default-src

  • Berfungsi sebagai nilai default untuk semua directive
  • Digunakan kalau ngga ada directive yang lebih spesifik
  • Contoh: default-src 'self' hanya mengizinkan resource dari sumber yang sama dengan origin website

script-src

  • Mengatur sumber resource script yang boleh di load
  • Contoh: script-src 'self' https://cdnjs.com

style-src

  • Mengatur sumber resource style
  • Contoh: style-src 'self' https://fonts.googleapis.com

img-src

  • Mengatur sumber resource image/gambar
  • Contoh: img-src 'self' https://images.unsplash.com

Cara Implementasi CSP

1. Menggunakan HTTP Header

CSP bisa diatur di HTTP header dari sisi server. Ini cara yang direkomendasikan karena lebih aman dan fleksibel.

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdnjs.com

Server bakalan ngirim header ini sebagai response HTTP sebelum konten website di-load oleh browser. Cara implementasinya tergantung pada web server atau framework yang kalian pakai (seperti Next.js, Express, Nginx, atau Apache).

2. Menggunakan Meta Tag

Cara kedua yaitu menggunakan meta tag <head> di dokumen HTML. Walaupun keliatannya lebih gampang buat diimplementasi, tapi cara ini kurang fleksibel karena jadinya Hardcode, ngga bisa diubah secara dinamis.

<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src 'self';
    script-src 'self' 'unsafe-inline' 'unsafe-eval' https://trusted-cdn.com;
    style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
    img-src 'self' https://images.unsplash.com data: blob:;
    font-src 'self' https://fonts.gstatic.com;
    connect-src 'self' https://api.example.com;
    frame-src 'self' https://www.youtube.com;
    media-src 'self' https://media.example.com"
/>

Referensi