Content Security Policy (CSP) adalah suatu kebijakan keamanan yang ditambahkan pada aplikasi web untuk membantu melindungi dari serangan-serangan tertentu, terutama Cross Site Scripting (XSS) dan serangan penyisipan data. Jenis serangan ini dapat menyebabkan kerusakan besar, seperti pencurian data, perusakan situs web, atau penyebaran malware.
CSP bekerja dengan menyediakan serangkaian aturan yang diterapkan pada halaman web. Aturan-aturan ini, yang disampaikan melalui header HTTP, memberitahu browser tentang sumber-sumber konten yang diperbolehkan untuk dimuat pada halaman tersebut. Sumber konten yang biasanya diatur oleh CSP meliputi JavaScript, CSS, HTML frame, font, gambar, dan objek yang dapat disematkan seperti Java applet, ActiveX, atau file audio dan video.
Dengan menggunakan CSP, pemilik situs web dapat secara eksplisit mendeklarasikan sumber konten yang aman, dan browser akan mengikuti aturan tersebut ketika memuat halaman web. Ini membantu mencegah browser memuat sumber konten dari sumber yang tidak dipercayai, yang dapat mengurangi risiko dari serangan XSS dan serangan penyisipan data.
Secara keseluruhan, CSP memberikan lapisan keamanan tambahan yang penting bagi aplikasi web, membantu melindungi data pengguna dan mencegah kerusakan yang disebabkan oleh serangan-serangan tertentu.
Contoh Penerapan Content Security Policy (CSP) dalam header HTTP
Misalkan kita memiliki halaman web dengan kode HTML berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh CSP</title>
</head>
<body>
<h1>Halaman Web dengan CSP</h1>
<p>Ini adalah halaman web yang dilindungi dengan Content Security Policy.</p>
<script src="https://example.com/script.js"></script>
</body>
</html>
Sekarang, kita ingin menerapkan CSP untuk hanya memuat skrip dari sumber yang dipercayai, seperti halaman itu sendiri.
Kita dapat menambahkan header CSP ke dalam halaman ini dengan menambahkan tag meta di bagian head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
<title>Contoh CSP</title>
</head>
<body>
<h1>Halaman Web dengan CSP</h1>
<p>Ini adalah halaman web yang dilindungi dengan Content Security Policy.</p>
<script src="https://example.com/script.js"></script>
</body>
</html>Dalam contoh ini, content="script-src 'self'" pada tag meta menunjukkan bahwa hanya skrip yang di-host di halaman itu sendiri ('self') yang diperbolehkan untuk dimuat. Dengan demikian, skrip dari sumber eksternal seperti https://example.com/script.js akan diblokir oleh browser. Hal ini membantu mencegah serangan XSS dengan membatasi sumber skrip yang diizinkan untuk dieksekusi di halaman web tersebut.