Konten sematan adalah cara terbaik untuk mempertahankan pengguna di situs Anda, sekaligus membagikan konten dari halaman atau situs lain. Hal ini bisa sekecil Tweet yang disematkan, yang ditampilkan dalam gaya dan format Twitter. Situs ini bisa sebesar situs terpisah yang disematkan ke situs Anda, seperti toko Shopify yang disematkan, tempat pengunjung dapat melakukan pembelian tanpa meninggalkan situs Anda.
Sekarang lebih dari sebelumnya, penting agar situs kami tetap aman saat kami menyematkan konten.
Ada beberapa cara yang dapat dilakukan developer untuk menyematkan konten di situs. Teknik yang paling umum adalah menggunakan <iframe>, yang memungkinkan Anda menyematkan konten apa pun ke situs hanya dengan URL. Anda sudah dapat menambahkan atribut sandbox untuk membuat iframe lebih aman.
Atau, Anda dapat menggunakan elemen HTML yang diusulkan:
<fencedframe>diusulkan sebagai cara yang menjaga privasi untuk menyematkan konten pihak ketiga.<portal>diusulkan untuk transisi halaman yang lebih lancar.
Baca terus untuk mempelajari cara meningkatkan keamanan konten yang disematkan.
Menyematkan dengan iframe
Iframe dapat digunakan untuk berbagai kasus penggunaan, seperti menambahkan peta atau formulir ke halaman kontak, dan menampilkan iklan.
<iframe src="https://example.com/maps"></iframe>
Setiap iframe memiliki konteks penjelajahannya sendiri, dengan histori sesi dan dokumen-nya sendiri. Konteks yang menyematkan iframe disebut sebagai konteks penjelajahan induk.
Konten pihak ketiga yang ditampilkan dalam iframe dapat berinteraksi dengan situs induk melalui postMessage(). Hal ini memungkinkan developer mengirim nilai arbitrer di antara konteks penjelajahan. Penerima pesan dapat menggunakan pemroses peristiwa onmessage
untuk menerima nilai.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Keamanan tambahan dengan atribut sandbox
Jika konten berbahaya di-deploy dalam iframe, tindakan yang tidak diinginkan (seperti eksekusi JavaScript atau pengiriman formulir) dapat dilakukan.
Untuk menghindarinya, atribut sandbox membatasi
API yang dapat dieksekusi di iframe dan menonaktifkan fitur yang berpotensi berbahaya.
<iframe src="https://example.com" sandbox></iframe>
Sandbox dapat membuat API tertentu yang penting untuk konten sematan Anda menjadi tidak tersedia. Untuk mengizinkan API yang dinonaktifkan, Anda dapat menambahkan argumen secara eksplisit ke atribut sandbox.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Ada sejumlah kemungkinan nilai untuk
spesifikasi sandbox,
termasuk allow-forms, allow-same-origin, allow-popups, dan
lainnya.
Kebijakan Izin
Seiring dengan pengembangan fitur yang semakin canggih untuk web, kebijakan izin dibuat untuk mengelola izin bagi semua fitur tersebut. Kebijakan izin
dapat diterapkan ke situs induk dan ke konten iframe. Izin yang diberikan
ke situs induk juga dapat diberikan ke iframe, menggunakan atribut allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Menyematkan dengan frame yang dibatasi
Fenced frame (<fencedframe>) adalah elemen HTML yang diusulkan untuk konten sematan, mirip dengan iframe. Tidak seperti iframe, frame tertutup membatasi komunikasi dengan konteks penyematannya untuk memungkinkan akses frame ke data lintas situs tanpa membagikannya dengan konteks penyematan. Demikian pula, data pihak pertama di halaman induk tidak dapat dibagikan ke frame tertutup.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames adalah proposal Privacy Sandbox yang menyarankan agar situs tingkat teratas mempartisi data. Sebagian besar proposal Privacy Sandbox bertujuan untuk memenuhi kasus penggunaan lintas situs, tanpa cookie pihak ketiga atau mekanisme pelacakan lainnya. API Privacy Sandbox tertentu mungkin memerlukan dokumen tertentu untuk dirender dalam frame tertutup.
Misalnya, frame tertutup akan dibuat untuk pemenang lelang iklan FLEDGE API. FLEDGE API akan menyediakan sumber buram, skema URN yang independen dari lokasi, yang dapat dirender dalam frame tertutup. Sumber buram memungkinkan situs menampilkan konten di situsnya tanpa mengungkapkan URL sumber iklan kepada pemilik situs.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Pada akhirnya, frame tertutup tidak akan menggantikan iframe. Anda tidak perlu menggunakannya. Frame tertutup diusulkan untuk frame yang lebih privat untuk penggunaan saat data dari partisi tingkat teratas yang berbeda perlu ditampilkan di halaman yang sama.
Menyematkan dengan portal
Portal (<portal>) adalah elemen HTML
yang diusulkan dengan konteks penjelajahan independen, yang dapat meningkatkan pengalaman transisi halaman. Portal menyematkan konten seperti iframe, tetapi pengguna tidak dapat
mengakses kode portal. Portal bersifat hanya lihat dan tidak dapat digunakan oleh pengguna.
Portal menawarkan kompleksitas rendah aplikasi multi-halaman dengan transisi lancar aplikasi satu halaman. Transisi ini dapat dianimasikan, dengan cepat menggantikan konten di jendela browser.
<portal src="https://example.com/"></portal>
Spesifikasi portal masih dalam tahap awal pengembangan.
Elemen HTML lain yang digunakan untuk penyematan
Sepanjang sejarah web, ada sejumlah elemen HTML yang diusulkan dan API yang dibuat untuk menyematkan konten. Untuk sementara waktu, situs umum dibuat dengan beberapa elemen <frame> dan <frameset>. Situs dengan beberapa elemen <frameset> menampilkan URL halaman induk di kolom URL, terlepas dari sumber banyak frame individual. Hal ini membuat link ke konten dalam situs sulit dibagikan. API ini sudah tidak digunakan lagi.
Ada juga saat ketika teknologi plugin, seperti elemen Java <applet>, digunakan untuk mencakup kasus penggunaan lainnya. Ini kemudian diganti dengan elemen <object>. Kedua elemen ini biasanya digunakan untuk menampilkan plugin Flash, tetapi juga digunakan untuk menampilkan elemen HTML lainnya (mirip dengan iframe).
Elemen lain, seperti <canvas>, <audio>, <video>, dan <svg>, telah membuat elemen <object> dan <applet> tidak berlaku lagi.
Meskipun <object> dan <embed> belum dihentikan secara resmi, sebaiknya
hindari keduanya, terutama karena keduanya memiliki beberapa perilaku aneh.
<applet> telah dihapus dari spesifikasi HTML pada tahun 2017.
Kesimpulan
Anda dapat menyematkan konten secara aman ke situs mana pun, menggunakan spesifikasi iframe yang ada. Elemen HTML lainnya, termasuk <fencedframe> dan <portal>, telah diusulkan untuk peningkatan keamanan dan gaya. Kami akan terus membagikan progres proposal Fenced Frames seiring perkembangannya.