Performa
13 Agu 2025
Konten Kebijakan Keamanan Tambahkan
Artikel ini menjelaskan cara menerapkan Kebijakan Keamanan Konten (CSP) di Framer, serta menguraikan kelebihan dan kekurangan metode meta tag dan header HTTP. Dengan CSP, Anda dapat meningkatkan keamanan sumber daya eksternal dan mencegah serangan XSS.
Diposting oleh
Diterjemahkan oleh
Daftar Isi
Daftar Isi
Apa itu Content Security Policy?
CSP membantu mencegah serangan cross-site scripting (XSS) dengan membatasi sumber daya yang diizinkan di situs. Situs Framer secara bawaan dirancang dengan aman, dan CSP berfungsi sebagai lapisan perlindungan tambahan. Terutama ketika mengintegrasikan skrip pelacakan dari manajer tag, seperti kode pihak ketiga yang tidak terpercaya, melalui HTML kustom atau komponen kode kustom, CSP bisa sangat berguna.
Meskipun situs Framer sudah konfigurasikan dengan aman, menerapkan CSP dalam situasi berikut dapat secara signifikan mengurangi kemungkinan eksekusi kode jahat.
Saat menambahkan skrip pelacakan pihak ketiga seperti Google Tag Manager
Saat menambahkan perpustakaan eksternal atau widget sebagai Kode Kustom
Menambahkan CSP melalui Meta Tag
CSP dapat ditambahkan dalam format meta tag pada bagian awal tag <head> menggunakan Kode Kustom (Custom Code).
Pergi ke pengaturan halaman Framer > Kode Kustom
Sisipkan meta tag CSP di bagian awal
<head>Tempatkan semua skrip tambahan setelah meta tag
Perhatian
Pastikan semua skrip lain disisipkan setelah meta tag CSP. Jika tidak, kebijakan mungkin tidak diterapkan atau situs mungkin tidak berfungsi dengan benar.
Jangan gunakan kode yang ditampilkan dalam screenshot contoh. Itu dapat merusak situs Anda.
Jika perlu, Anda dapat menggunakan alat seperti Report URI untuk membuat CSP yang disesuaikan dengan situs Anda.
Perbandingan Kinerja Meta Tag vs HTTP Header
CSP dapat disetel menggunakan cara meta tag ataupun cara HTTP header. Namun, dua metode ini memiliki perbedaan kinerja.
Metode | Keuntungan | Kekurangan |
|---|---|---|
Meta Tag | Penyisipan CSP sederhana melalui tag dan serupa dengan prinsip HTTP header | Potensi penurunan kinerja di Chrome |
HTTP Header | Kinerja unggul, cakupan dukungan browser luas | Membutuhkan pengaturan reverse proxy, tidak dapat dilakukan secara independen oleh FramerFramer |
Artikel ini adalah konten terjemahan dan adaptasi dari blog resmi Framer ‘How to add a content security policy’.
