Keamanan konten sematan berjalan dua arah. Arah pertama: kita menyematkan halaman orang lain — risikonya ditanggung pengunjung kita. Arah kedua: halaman kita dapat disematkan orang lain — risikonya menimpa pengunjung mereka. Chapter penutup ini merangkum pertahanan untuk keduanya, dari clickjacking sampai checklist praktik aman.

Clickjacking: Saat Halaman Kita yang Disematkan #

Mekanismenya: situs jahat menyematkan halaman kita dalam iframe transparan, lalu menyusun tampilan palsu di atasnya. Pengunjung situs itu mengira sedang mengeklik tombol “klaim hadiah” milik situs jahat, padahal kliknya jatuh pada tombol “setuju” atau “transfer” di halaman kita. Pengguna tertipu, sementara sesi login milik pengguna tetap berlaku karena halaman kita memang termuat.

Pertahanannya bukan di HTML. Kita melarang halaman kita disematkan melalui header respons HTTP yang diatur di server — bukan atribut di markup:

text 
X-Frame-Options: DENY
Content-Security-Policy: frame-ancestors 'none'

X-Frame-Options: DENY melarang penyematan sepenuhnya; nilai SAMEORIGIN mengizinkannya hanya untuk halaman kita sendiri. Bentuk modernnya adalah Content-Security-Policy: frame-ancestors, yang lebih fleksibel. Konfigurasinya berada di server atau hosting — di luar cakupan markup, tetapi kita perlu tahu bahwa pertahanan ini ada dan bukan tugas HTML.

Risiko dari Sisi Kita #

RisikoMitigasi
Skrip pihak ketiga berubah perilaku atau penyedianya disusupisandbox minimal; audit berkala; embed hanya dari penyedia tepercaya
Data pengunjung ikut terkirim ke penyedia lewat URLjangan sertakan data pribadi pada URL embed
Halaman melambat karena embed beratloading="lazy"; batasi jumlah embed; ukur dampaknya
Privasi: penyedia menandai tiap pengunjung kitatinjau kebijakan privasi penyedia; kurangi sematan
Widget mati tidak terdeteksiaudit kuartalan plus rencana pengganti

Kebocoran lewat URL mudah terjadi tanpa disadari: src yang memuat [email protected] tercatat utuh di log penyedia sematan. Data pengunjung kita menjadi data penyedia sejak baris itu ditulis — dan data itu berpindah lagi saat log dibagikan ke pihak lain.

Skrip Pihak Ketiga di Halaman #

Sematan tidak selalu berupa iframe — banyak penyedia memberi potongan <script> yang ditempel langsung ke halaman. Bedanya besar: script yang berjalan langsung di halaman kita tidak dapat dibatasi dengan sandbox; script itu membaca dan mengubah DOM halaman kita secara penuh. Perlakukan setiap potongan script sematan seperti memberi pihak lain akses penuh ke halaman: hanya dari penyedia yang benar-benar dipercayai, dan tinjau ulang daftarnya secara berkala.

Checklist Praktik Aman #

Tujuh butir pemeriksaan untuk setiap konten sematan:

  1. sandbox minimal — buka hanya token yang benar-benar dibutuhkan konten.
  2. loading="lazy" untuk setiap iframe di bawah lipatan layar.
  3. title deskriptif pada setiap iframe.
  4. Ukuran wajar — width/height sesuai konten, bukan menelan seluruh layar.
  5. Audit berkala — jadwalkan pemeriksaan semua embed tiap kuartal.
  6. HTTPS — sematkan hanya dari URL https://.
  7. Tanpa konten sensitif — data pribadi dan halaman internal tidak dibagikan lewat src maupun srcdoc.

Ringkasan #

  • Clickjacking ditangkal lewat header respons server: X-Frame-Options atau CSP frame-ancestors — bukan lewat HTML.
  • Risiko dari sisi kita: skrip pihak ketiga, kebocoran data lewat URL, performa, dan privasi pengunjung.
  • Potongan <script> sematan tidak dapat dibatasi sandbox — perlakukan layaknya akses penuh.
  • Tujuh butir checklist: sandbox minimal, lazy, title, ukuran wajar, audit, HTTPS, tanpa konten sensitif.

Section Embedded Content selesai. Selanjutnya kita menyusun informasi di bagian head agar halaman kita sendiri mudah dikenali oleh mesin pencari dan dibagikan di media sosial — Section Metadata dan SEO.