Performa
13 Agu 2025
Konten Kebijakan Keamanan Tambahkan
FramerFramer에서 Content Security Policy(CSP)를 적용하는 방법을 소개하며, 메타 태그와 HTTP 헤더 방식의 장단점을 설명합니다. CSP를 통해 외부 리소스의 안전성을 높이고 XSS 공격을 방지할 수 있습니다.
Diposting oleh
Diterjemahkan oleh
Daftar Isi
Daftar Isi
Dokumen ini dibuat untuk mengatasi kesulitan pengguna domestik yang belajar Framer namun mengalami keterbatasan sumber daya dalam bahasa Korea, dengan menerjemahkan isi blog resmi dan menambah informasi yang berguna untuk praktik kerja. Kami harap ini dapat memberikan sedikit bantuan bagi Anda yang menggunakan FramerFramer.
Apa itu Content Security Policy?
CSP membantu mencegah serangan cross-site scripting (XSS) dengan membatasi sumber daya yang diizinkan di situs. Situs FramerFramer 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 FramerFramer 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 FramerFramer > 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 FramerFramer ‘How to add a content security policy’.
