Lewati ke konten utama
iotools.cloudiotools.cloud

Generator CSP

Buat nilai header Content-Security-Policy dari field directive terstruktur (default-src, script-src, style-src, img-src, dan lainnya) ditambah meta tag siap tempel di HTML.

Input

Daftar sumber fallback untuk directive yang tidak diatur secara eksplisit.

Tempat script dapat dimuat.

Tempat stylesheet dapat dimuat.

Tempat gambar dapat dimuat.

Tempat font dapat dimuat.

Origin yang diizinkan untuk koneksi fetch/XHR/WebSocket.

Tempat konteks browsing bersarang (iframe) dapat dimuat.

Tempat resource <object>/<embed>/<applet> dapat dimuat.

Tempat sumber audio/video dapat dimuat.

Parent mana yang boleh menyematkan halaman ini dalam frame — proteksi clickjacking.

Membatasi URL yang dapat digunakan dalam elemen <base> dokumen.

Membatasi URL yang dapat digunakan sebagai target action formulir HTML.

Secara otomatis meningkatkan permintaan HTTP halaman ke HTTPS.

Output

Generated CSP Header Value

Atur ini sebagai nilai header respons Content-Security-Policy.

Meta Tag
Apakah ini membantu?

Cara lain menggunakan alat ini

REST API

curl -X POST https://api.iotools.cloud/v1/tool/csp-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "defaultSrc": "'self'",
    "scriptSrc": "'self' https://cdn.example.com",
    "styleSrc": "",
    "imgSrc": "'self' data:",
    "fontSrc": "",
    "connectSrc": "",
    "frameSrc": "",
    "objectSrc": "",
    "mediaSrc": "",
    "frameAncestors": "",
    "baseUri": "",
    "formAction": "",
    "upgradeInsecure": ""
  }'

Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.

Tanyakan ke agen AI

Use the IOTools `csp-generator` tool (CSP Generator) on this input:

YOUR_INPUT_HERE

Tempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.

Widget sematan

<iframe
  src="https://iotools.cloud/embed/csp-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Generator CSP — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.

Biaya per panggilan API/MCPMulai dari 5 kredit
Butuh kredit lebih?Lihat harga

Juga tersedia melalui

IntegrasiEkstensi browserEkstensi VS Code

Panduan

Apa itu Content-Security-Policy?

Content-Security-Policy (CSP) adalah header respons HTTP yang memberi tahu browser sumber script, style, gambar, font, dan resource lainnya mana yang diizinkan dimuat oleh halaman. Ini adalah salah satu pertahanan browser paling efektif terhadap Cross-Site Scripting (XSS): bahkan jika penyerang berhasil menyuntikkan tag <script> ke halaman Anda melalui kolom komentar atau input yang tidak disanitasi dengan baik, CSP yang ditulis dengan baik akan menghentikan script itu dari eksekusi (atau memuat dari domain penyerang sejak awal) karena tidak cocok dengan sumber yang diizinkan. CSP juga memblokir clickjacking (melalui frame-ancestors), membatasi injeksi tag <base>, dan dapat mengunci tempat form diizinkan untuk dikirim. Tool ini membangun nilai header CSP yang valid dari field directive terstruktur, sehingga Anda tidak perlu menghafal syntax atau mengambil risiko typo yang secara diam-diam menonaktifkan kebijakan.

Cara menggunakannya

  1. Isi daftar sumber untuk setiap directive yang ingin Anda batasi — misalnya, default-src dengan 'self', atau script-src dengan 'self' https://cdn.example.com. Pisahkan beberapa sumber dengan spasi.
  2. Biarkan directive kosong untuk mengabaikannya sepenuhnya dari header yang dihasilkan — directive yang diabaikan cukup jatuh kembali ke default-src (kecuali frame-ancestors dan base-uri, yang tidak pernah diwarisi dan harus diatur secara eksplisit).
  3. Aktifkan upgrade-insecure-requests agar browser secara otomatis menulis ulang permintaan sub-resource HTTP halaman ke HTTPS.
  4. Salin Generated CSP Header Value ke header respons Content-Security-Policy Anda, atau salin Meta Tag untuk tempel langsung ke <head> halaman Anda.

Directive yang didukung

  • default-src — daftar sumber fallback yang digunakan oleh setiap fetch directive yang tidak diatur secara eksplisit.
  • script-src — tempat JavaScript dapat dimuat/dieksekusi.
  • style-src — tempat CSS dapat dimuat.
  • img-src — tempat gambar dapat dimuat.
  • font-src — tempat web font dapat dimuat.
  • connect-src — origin yang diizinkan untuk koneksi fetch, XMLHttpRequest, WebSocket dan EventSource.
  • frame-src — tempat konteks browsing bersarang (<iframe>) dapat dimuat.
  • object-src — tempat resource <object>, <embed> dan <applet> dapat dimuat; 'none' direkomendasikan karena ini adalah legacy plugin API.
  • media-src — tempat sumber <audio>/<video> dapat dimuat.
  • frame-ancestors — origin parent mana yang diizinkan untuk menyematkan halaman ini dalam frame; pertahanan utama terhadap clickjacking.
  • base-uri — membatasi URL yang dapat digunakan dalam elemen <base>, mencegah serangan injeksi base-tag.
  • form-action — membatasi URL yang dapat dikirim oleh <form> HTML di halaman.

Nilai sumber umum

'self' (asal yang sama), 'unsafe-inline' (memungkinkan <script>/<style> inline — melemahkan proteksi XSS, hindari jika memungkinkan), 'unsafe-eval' (memungkinkan eval() — hindari), domain tertentu (https://cdn.example.com), skema (https:, data:), atau * (asal apa pun — sangat permisif).

FAQ

Mengapa directive saya hilang dari output? Directive kosong dihilangkan sepenuhnya — hanya directive dengan setidaknya satu sumber yang disertakan dalam header yang dihasilkan.

Haruskah saya menggunakan header atau meta tag? Header HTTP Content-Security-Policy lebih disukai — ini diterapkan sebelum HTML apa pun diurai dan mendukung directive (seperti frame-ancestors dan report-uri) yang tidak dapat dipaksakan oleh tag <meta>. Gunakan meta tag hanya ketika Anda tidak dapat mengontrol header respons server.

Apa perbedaan antara default-src dan menetapkan setiap directive secara individual? default-src adalah fallback: setiap fetch directive yang Anda biarkan kosong mewarisinya. Menetapkan default-src 'self' saja adalah baseline minimal yang wajar, tetapi directive eksplisit memberi Anda kontrol lebih halus per jenis resource.

Privasi

Semuanya berjalan di browser Anda — nilai directive yang Anda masukkan tidak pernah dikirim ke server kami.

cspcontent security policyhttp headerxssweb securitymeta tagweb development

Suka alat-alatnya? Hilangkan iklannya.

Satu kali pembayaran menghapus semua iklan dari akun Anda, selamanya. Tanpa langganan, tanpa pelacakan.

Hapus iklan