Content Security Policy (CSP)

Content Security Policy (CSP) adalah fitur keamanan yang digunakan untuk membantu melindungi situs web dan aplikasi web dari clickjacking, cross-site scripting (XSS), dan serangan injeksi kode berbahaya lainnya. Pada dasarnya, CSP adalah seperangkat aturan yang membatasi atau memberikan lampu hijau untuk konten apa pun yang dimuat ke situs web Anda. Ini adalah standar keamanan yang didukung luas dan direkomendasikan bagi siapa pun yang mengoperasikan situs web.

../_images/csp01-with-csp.webp

Mengapa saya memerlukan Kebijakan Keamanan Konten?

Menggunakan Kebijakan Keamanan Konten menambahkan lapisan perlindungan ke situs web Anda dengan menentukan sumber konten apa saja yang diizinkan untuk dimuat di halaman. Aturan ini membantu melindungi situs web Anda dari injeksi kode dan serangan cross-site-scripting (XSS), dua dari 10 Risiko Keamanan Aplikasi Web teratas versi OWASP.

Perlindungan terhadap cross-site scripting

Serangan XSS terjadi ketika penyerang berhasil menyusupi situs web yang tidak terlindungi dengan menyuntikkan kode berbahaya. Ketika pengguna mencoba berinteraksi dengan situs tersebut, skrip berbahaya tersebut akan dieksekusi di peramban pengguna, memberikan penyerang akses ke interaksi korban dengan situs tersebut, seperti informasi login, dll.

Kebijakan keamanan konten dapat membantu mencegah terjadinya serangan injeksi skrip karena dapat diatur untuk membatasi JavaScript agar hanya dimuat dari tempat tepercaya. Memanfaatkan kebijakan yang ketat dapat mencegah berbagai masalah yang berasal dari pemuatan skrip dari lokasi yang tidak sah, baik itu XSS maupun injeksi konten.

Batasi dan cegah skrip berbahaya

Anda dapat menggunakan CSP untuk membantu mencegah halaman web Anda mengeksekusi skrip inline atau jarak jauh. Penyerang diketahui menyuntikkan JavaScript berbahaya dari server mereka dalam berbagai jenis malware situs web, jadi dengan membatasi skrip yang diizinkan untuk dieksekusi, Anda dapat mengambil langkah signifikan untuk mengamankan situs web Anda.

Perlindungan terhadap clickjacking

Clickjacking memikat pengunjung situs yang tidak menaruh curiga untuk mengeklik objek tertentu yang memicu tindakan di situs web lain yang di-iframe. Tindakan yang dipicu dapat mencakup penghapusan pengguna, pembaruan izin, atau tindakan lain yang biasanya dilakukan melalui klik di situs web target. Clickjacking dapat digunakan untuk mencuri informasi sensitif, seperti kredensial login, atau bahkan mengelabui korban yang tidak menaruh curiga agar mengunduh malware.

Untungnya, arahan bingkai Kebijakan Keamanan Konten (CSS) frame-ancestors dapat digunakan untuk menginstruksikan peramban agar tidak mengizinkan bingkai dari domain lain guna membantu mencegah serangan clickjacking.

Terapkan HTTPS dan cegah packet sniffing

Untuk meningkatkan keamanan lebih lanjut, server dapat memasukkan domain ke daftar putih dan menentukan protokol yang diizinkan, seperti mewajibkan browser untuk menggunakan HTTPS. Kebijakan perlindungan transfer data yang kuat mencakup penerapan HTTPS, mengamankan cookie dengan atribut aman, dan pengalihan otomatis halaman HTTP ke HTTPS. Memanfaatkan header HTTP Strict-Transport-Security semakin memastikan koneksi browser terenkripsi. Langkah-langkah ini membantu mencegah packet sniffing dan menjaga keamanan transfer data.

Meningkatkan kinerja

Selain manfaat keamanan ini, CSP juga dapat membantu meningkatkan kinerja situs web Anda secara keseluruhan dengan mengurangi jumlah konten yang tidak berbahaya (atau berbahaya) yang dimuat di halaman Anda.

Cara menyiapkan Kebijakan Keamanan Konten

Ikuti panduan singkat ini untuk ikhtisar singkat tentang Kebijakan Keamanan Konten, cara menulisnya, dan cara menerapkan CSP untuk lingkungan Anda.

Langkah 1 – Tentukan CSP Anda

Ada banyak arahan berbeda yang dapat digunakan dalam CSP, sehingga memudahkan Anda menyesuaikan CSP agar sesuai dengan kebutuhan situs web atau aplikasi Anda.

Untuk memulai, buatlah daftar kebijakan atau arahan dan nilai sumber untuk menentukan sumber daya mana yang akan diizinkan atau dibatasi oleh situs Anda. Kami telah menyediakan daftar Arahan CSP umum dan nilai sumber untuk Anda padukan.

Directive

Example

Description

default-src

default-src ‘self’ cdn.example.com;

Default policy, used in any case (JavaScript, Fonts, CSS, Frames etc.) except if overridden by a more precise directive.

script-src

script-src ‘self’ js.example.com;

Defines authorized sources for scripts

style-src

style-src ‘self’ css.example.com;

Defines authorized sources for stylesheets (CSS)

object-src

object-src ‘self’;

Defines authorized sources for plugins (ex: <object> or <embed>)

img-src

img-src ‘self’ img.example.com;

Defines authorized sources for images, or link element related to an image type (ex: rel=”icon”)

media-src

mia-src media.example.com;

Defines authorized sources for media elements (ex: <video>, <audio>)

frame-src

frame-src ‘self’;

Defines authorized sources for loading frames (iframe or frame)

font-src

font-src font.example.com;

Defines authorized sources where fonts files can be loaded from

connect-src

connect-src ‘self’;

Policy applies to connections from a XMLHttpRequest (AJAX) or a WebSocket

report-uri

report-uri /some-report-uri;

Instructs a browser to create a report of policy failures. If a piece of content is blocked, the browser will send a report of the information to this URI.Alternatively, you can use Content-Security-Policy-Report-Only as the HTTP header name to receive the reports without blocking anything.

add-header add_header Content-Security-Policy “default-src ‘self’;”; Allows you to add header for the Content Security Policy (CSP).

Berikut adalah daftar nilai sumber umum untuk direktif -src.

Value

Example

Description

*

img-src *

Wildcard, allows any URL except data: blob: filesystem: schemes.

‘none’

object-src ‘none’

Prevents loading resources from any source.

‘self'

script-src ‘self’

Allows loading resources from the same origin (same scheme and domain name).

data:

img-src ‘self’ data:

Allows loading resources via the data scheme (eg Base64 encoded images).

domain.example.com

img-src domain.example.com

Allows loading resources from the specified domain name.

*.example.com

img-src *.example.com

Allows loading resources from any subdomain under example.com

https://cdn.com

img-src https://cdn.com

Allows loading resources only over HTTPS matching the given domain

https:

img-src https:

Allows loading resources only over HTTPS on any domain.

‘unsafe-inline’

script-src ‘unsafe-inline’

Allows use of inline source elements such as style attribute, onclick, or script tag bodies and javascript: URIs

‘unsafe-eval’

script-src ‘unsafe-eval’

Allows use of unsafe dynamic code evaluation like JavaScript eval()

Source: content-security-policy.com

Contoh Kebijakan Keamanan Konten

Setelah kita memahami arahan umum dan nilai sumber untuk Kebijakan Keamanan Konten, mari kita bahas beberapa contoh CSP yang membahas beberapa skenario keamanan situs web yang umum.

Tip

Saat membuat CSP, pastikan untuk memisahkan beberapa arahan dengan titik koma ;.

Contoh 1 – Cegah iframe dengan frame-src:

Gunakan frame-src untuk mencegah iFrame dimuat di situs Anda.

Content-Security-Policy:frame-src 'none'

Contoh 2 – Cegah JavaScript dengan script-src:

Gunakan script-src untuk mencegah JavaScript dimuat di situs Anda.

Content-Security Policy:script-src 'none'

Contoh 3 – Batasi konten selain gambar dengan img-src:

Gunakan img-src untuk membatasi konten selain gambar agar tidak dimuat di situs web Anda.

Content-Security-Policy: default-src 'self'; img-src *;

Tip

Penting untuk mengatur default-src ke 'self' atau 'none' (dan secara eksplisit mencantumkan sumber daya yang diizinkan), jika tidak, pengaturan default akan mengizinkan semua.

Perhatikan bahwa 'self' tidak mencakup subdomain Anda.

Contoh 4: Hanya izinkan konten asal yang sama dengan default-src:

Gunakan default-src untuk hanya mengizinkan konten dimuat dari asal yang sama, situs web Anda, dan subdomainnya.

Content-Security-Policy: default-src 'self' *.sucuri.net;

Catatan

Karena konten yang akan dimuat dari sucuri.net tidak disebutkan secara spesifik dalam CSP, default-src akan mengizinkan semua konten masuk.

Contoh 5 – Hanya izinkan media atau skrip yang dapat dieksekusi lainnya dari sumber yang sama:

Kombinasi ini memungkinkan gambar dimuat dari mana saja, tetapi hanya mengizinkan media atau skrip yang dapat dieksekusi yang berasal dari sumber yang sama.

Content-Security-Policy: default-src 'self'; img-src *; media-src sucuri.net; script-src sucuri.net;

Tip

Ini adalah jenis aturan yang Anda perlukan jika Anda memiliki CDN atau subdomain media tempat Anda menayangkan semua media Anda.

Contoh 6 – Hanya izinkan gambar, skrip, tindakan formulir, dan CSS dari sumber yang sama:

Kombinasi ini mengizinkan gambar, skrip, tindakan formulir, dan CSS dari sumber yang sama, tetapi tidak ada yang lain untuk dimuat di situs web.

default-src 'none'; script-src 'self'; img-src 'self'; style-src 'self';base-uri 'self';form-action 'self'

Uji CSP Anda sebelum menerapkannya

Uji CSP Anda untuk memastikan Anda tidak lupa menyertakan asal domain tepercaya yang dibutuhkan situs Anda.

  • Anda dapat menerima peringatan pelanggaran kebijakan tanpa memblokir konten dengan mengatur header Respons HTTP ke Content-Security-Policy-Report-Only.

  • Anda juga dapat menambahkan perintah report-uri dengan URL tempat Anda ingin melihat laporan tentang pelanggaran CSP.

Langkah 2 – Tambahkan CSP ke Header Respons HTTP Anda

Di mana saya harus mengatur CSP?

Sebagian besar modifikasi pada header Respons HTTP Anda akan dilakukan di berkas konfigurasi. Ikuti langkah-langkah ini untuk mengidentifikasi server Anda dan mengatur CSP untuk lingkungan yang sesuai.

  1. Cari tahu server yang digunakan situs web Anda. Anda juga dapat masuk ke cPanel dan memeriksa di bagian Informasi Server untuk mengetahuinya. Ini akan menampilkan server yang menghosting akun Anda.

  2. Setelah Anda mengetahui server Anda, atur header respons HTTP Anda di dalam berkas konfigurasi yang sesuai seperti yang dijelaskan di bawah ini. Kami juga telah menautkan sumber daya tambahan untuk detail lebih lanjut.

Opsi 1: Atur CSP Anda menggunakan IIS (Layanan Informasi Internet)

Buka pengelola IIS.

../_images/csp-IIS-Manager.png

  1. Di sebelah kiri, pilih situs web tempat Anda ingin menambahkan Header Respons HTTP.

  2. Pilih ikon Header Respons HTTP.

  3. Pilih "add" dan masukkan nama serta nilai untuk header tersebut.

../_images/csp-AddResponseHeader.png

Atau, jika Anda tidak ingin membuka pengelola IIS, Anda dapat menambahkan kebijakan ke berkas web.config. Tergantung pada direktif yang Anda pilih, tampilannya akan seperti ini:

<system.webServer>
   <httpProtocol>
      <customHeaders>
         <add name=”Content-Security-Policy” value=”default-src 'self'; img-src*” />
      </customHeaders>
   </httpProtocol>
</system.webServer>

Informasi selengkapnya dapat ditemukan di Memodifikasi Header Respons HTTP.

Opsi 2: Tetapkan CSP Anda menggunakan Apache

Jika Anda memiliki server web Apache, Anda akan menentukan CSP di berkas .htaccess situs Anda, VirtualHost, atau di httpd.conf.

Tergantung pada direktif yang Anda pilih, tampilannya akan seperti ini:

Header set Content-Security-Policy-Report-Only "default-src 'self'; img-src *"

Catatan

mod_headers diperlukan untuk menyuntikkan header di Apache. Informasi selengkapnya di Tutorial Server HTTP Apache.

Opsi 3: Atur CSP Anda menggunakan NGINX

Header respons HTTP dimodifikasi melalui berkas konfigurasi yang sesuai di dalam blok server. Dengan menambahkan direktif [add_header], Anda mengatur header respons.

Di NGINX, tampilannya seperti ini:

add_header Content-Security-Policy"default-src 'self'; img-src *"

Anda dapat menemukan informasi selengkapnya tentang header keamanan HTTP dengan NGINX di sini.

Setelah Anda menguji CSP Anda, saatnya menerapkannya ke lingkungan produksi Anda!

Langkah 3 – Terapkan Kebijakan Keamanan Konten Anda

CSP biasanya diimplementasikan menggunakan header HTTP khusus yang dikirimkan bersama respons dari server. Header tersebut berisi aturan CSP, yang kemudian diberlakukan oleh peramban.

Kami akan menjelaskan dua cara untuk mengonfigurasi sistem Anda agar mulai memberlakukan CSP: Opsi pertama adalah menambahkan CSP Anda melalui tag Meta, yang berfungsi di semua peramban, tetapi kurang populer. Opsi kedua adalah mengatur CSP Anda menggunakan Header Respons HTTP.

Opsi 1: Tambahkan CSP Anda melalui Meta Tag:

Jika Anda tidak memiliki akses ke konfigurasi server web Anda, Anda dapat menggunakan tag HTML untuk mengaktifkan CSP Anda di dalam HTML halaman. Atur <meta> di <head> agar dapat segera berfungsi di lingkungan Anda.

<head>
<meta http-equiv=”Content-Security-Policy”
content=”default-src ’self’; img-src *”>
</head>

Opsi 2: Tambahkan CSP Anda melalui Header Respons HTTP:

Ini adalah cara yang direkomendasikan untuk mengimplementasikan CSP oleh W3. Sebagian besar peramban (kecuali Internet Explorer dan beberapa versi peramban yang lebih lama) mendukung penggunaan header Respons HTTP CSP, tetapi Anda dapat memeriksa ulang di sini di bagian "Dapatkah Saya Menggunakannya?".

Lihat kembali bagian "Menetapkan Header Respons HTTP" untuk detail server web spesifik Anda, tetapi kali ini tambahkan "Content-Security-Policy" tanpa bagian "Report-Only".

Contoh CSP untuk server web Apache

Misalnya, jika Anda ingin mengimplementasikan CSP langsung untuk Apache, tambahkan entri berikut ke berkas konfigurasi Anda di /etc/apache2/sites-enabled/CSPexample.conf:

Header always set Content-Security-Policy "default-src 'self'; script-src *; style-src *; font-src *;img-src *"

Setelah Anda menyimpan berkas, mulai ulang Apache untuk menerapkan perubahan dan meluncurkannya ke tahap produksi.

Catatan

mod_headers diperlukan untuk menyuntikkan header di Apache. Informasi selengkapnya di Tutorial Server HTTP Apache.

Untuk informasi selengkapnya tentang kompatibilitas peramban, pengujian kebijakan, dan contoh CSP, lihat Dokumen Web MDN.

Alat untuk membantu Anda membuat dan memantau CSP

Menyusun Kebijakan Keamanan Konten (CSP) yang selaras sempurna dengan kebutuhan unik Anda dapat menjadi tantangan. Untungnya, tersedia berbagai alat gratis untuk membantu Anda membuat, mengevaluasi, dan memantau CSP Anda.

Mengintegrasikan alat-alat ini ke dalam alur kerja pengembangan aplikasi web Anda dapat memfasilitasi pemeriksaan otomatis yang konsisten, meskipun audit manual rutin tetap penting:

  • CSP Policy Generator: Sebuah ekstensi untuk peramban Chrome dan Firefox, yang dirancang untuk pembuatan kebijakan secara otomatis.

  • CSP Tester: Tersedia sebagai ekstensi peramban, alat ini menyediakan kemampuan untuk membangun dan menguji kebijakan untuk aplikasi web Anda.

  • CSP Policy Evaluator: Alat ini berguna untuk mengevaluasi kebijakan keamanan konten yang ada dan mengidentifikasi potensi kesalahan konfigurasi keamanan.

  • Csper Report Collector: Alat ini dirancang untuk memantau kebijakan keamanan konten menggunakan report-uri. Dilengkapi dengan versi uji coba sehingga Anda dapat mencobanya.

Meskipun alat-alat ini menyederhanakan proses dan menawarkan pemeriksaan otomatis yang berharga, perlu diingat bahwa alat-alat ini melengkapi — bukan menggantikan — kebutuhan akan audit manual. Audit manual yang dilakukan secara berkala merupakan syarat untuk memastikan CSP yang aman dan tangguh.

Kerentanan apa saja yang dapat dilindungi oleh CSP?

Kebijakan Keamanan Konten dapat membantu Anda mencegah penyerang mengakses sumber daya melalui protokol yang tidak aman.

CSP memungkinkan Anda untuk mewajibkan penggunaan protokol HTTPS untuk nilai apa pun yang ditentukan dalam atribut *-src dengan menambahkan awalan https:// ke URL mana pun dalam daftar putih Anda. Ini memastikan sumber daya tidak pernah dimuat melalui koneksi HTTP yang tidak terenkripsi. Anda juga dapat melakukannya dengan menggabungkan properti block-all-mixed-content.

Selain itu, Kebijakan Keamanan Konten dapat membantu melindungi dari kerentanan berikut:

  • Kode JavaScript Dinamis menggunakan eval()

  • CSS Dinamis menggunakan CSSStyleSheet.insertRule()

  • Pernyataan CSS inline yang tidak ditandatangani di <style>

  • Javascript inline yang tidak ditandatangani di <script>

Idealnya, Anda harus menyimpan skrip dan CSS dalam file terpisah yang direferensikan oleh halaman HTML. Jika situs Anda memerlukan fungsi ini, Anda dapat mengaktifkannya dengan unsafe-eval dan unsafe-inline.

Bagaimana cara kerja Kebijakan Keamanan Konten?

CSP adalah lapisan perlindungan tambahan untuk situs web Anda yang dapat membantu mendeteksi dan memblokir injeksi data berbahaya dan XSS dari sisi klien. Penyerang dapat melancarkan serangan ini terhadap situs web Anda untuk menginfeksinya dengan malware, mencuri dan memanen data sensitif dari server Anda, meluncurkan kampanye phishing atau spam SEO, atau bahkan merusak tampilan situs web.

Ketika peramban memuat halaman yang memiliki Kebijakan Keamanan Konten, peramban akan memeriksa CSP untuk melihat apakah konten di halaman tersebut diizinkan untuk dimuat. Jika konten tersebut tidak diizinkan, peramban akan memblokirnya agar tidak dimuat, dan akan menampilkan pesan kesalahan. Ini membantu mencegah penyerang menyuntikkan kode berbahaya ke dalam halaman, dan dapat membantu melindungi pengguna dari serangan berbahaya.

Menerapkan Kebijakan Keamanan Konten juga dapat mencegah situs web Anda ditandai oleh otoritas pencarian. Ketika Google mengidentifikasi kode berbahaya di situs Anda, kode tersebut dapat diblokir, yang dapat mengakibatkan penurunan lalu lintas, kekecewaan pelanggan, penurunan peringkat, masalah reputasi merek, dan hilangnya pendapatan situs Anda.

Meskipun CSP merupakan komponen penting dari setiap solusi keamanan situs web, CSP tidak memberikan perlindungan yang komprehensif. Pemindaian situs web gratis kami dapat membantu Anda mengidentifikasi ancaman keamanan lain yang mungkin dihadapi situs Anda.

Referensi: