Konten sematan adalah cara terbaik agar pengguna tetap berada di situs Anda, sekaligus berbagi konten dari halaman atau situs lain. Ukurannya bisa sekecil Tweet yang disematkan, yang ditampilkan dalam gaya dan format Twitter. Situs ini bisa sebesar situs yang sepenuhnya terpisah dan disematkan ke situs Anda sendiri, seperti toko Shopify tersemat tempat pengunjung dapat melakukan pembelian tanpa meninggalkan situs Anda.
Sekarang, situs kami harus tetap aman saat kami menyematkan konten.
Ada beberapa cara yang dapat digunakan 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.
Lanjutkan membaca untuk mempelajari cara meningkatkan keamanan konten Anda yang disematkan.
Menyematkan dengan iframe
Iframe dapat digunakan untuk semua jenis 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 dokumennya sendiri. Konteks yang menyematkan iframe disebut sebagai konteks penjelajahan parent.
Konten pihak ketiga yang ditampilkan dalam iframe dapat berinteraksi dengan situs induk melalui postMessage(). Hal ini memungkinkan developer mengirim nilai arbitrer antar-konteks penjelajahan. Penerima pesan dapat menggunakan pemroses peristiwa onmessage
untuk menerima nilai tersebut.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Keamanan yang ditambahkan dengan atribut sandbox
Jika konten berbahaya di-deploy di iframe, ada kemungkinan tindakan yang tidak diinginkan (seperti eksekusi JavaScript atau pengiriman formulir) dapat dilakukan.
Untuk menghindari hal ini, atribut sandbox membatasi
API yang dapat dieksekusi di iframe dan menonaktifkan fitur yang berpotensi berbahaya.
<iframe src="https://example.com" sandbox></iframe>
Sandbox mungkin membuat API tertentu tidak tersedia yang penting untuk konten yang disematkan. Untuk mengizinkan API yang dinonaktifkan, Anda dapat secara eksplisit menambahkan argumen 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 berkembangnya fitur-fitur yang semakin canggih untuk web, kebijakan izin dibuat untuk mengelola izin bagi semua fitur tersebut. Kebijakan izin
dapat diterapkan ke situs induk dan konten iframe. Izin yang diberikan
ke situs induk juga dapat diberikan ke iframe, menggunakan atribut allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Sematkan dengan frame dengan fence
Frame dengan fence (<fencedframe>) adalah
elemen HTML yang diusulkan untuk konten sematan, mirip dengan iframe. Tidak seperti iframe, frame dengan fence membatasi komunikasi dengan konteks embeddingnya, untuk memungkinkan akses frame ke data lintas situs tanpa membagikannya dengan konteks embedding. Demikian pula, data pihak pertama di halaman induk tidak dapat dibagikan ke
frame dengan fence.
<fencedframe src="https://3rd.party.example"></fencedframe>
Frame dengan Fence adalah proposal Privacy Sandbox yang menyarankan agar situs tingkat atas harus mempartisi data. Banyak proposal Privacy Sandbox bertujuan untuk memenuhi kasus penggunaan lintas situs, tanpa cookie pihak ketiga atau mekanisme pelacakan lainnya. Privacy Sandbox API tertentu mungkin memerlukan dokumen tertentu untuk dirender dalam frame fence.
Misalnya, frame dengan fence akan dibuat untuk pemenang lelang iklan FLEDGE API. FLEDGE API akan menyediakan sumber buram, skema URN yang tidak bergantung lokasi, yang dapat dirender dalam frame dengan fence. Sumber yang tidak transparan memungkinkan situs menampilkan konten di situs mereka tanpa mengungkapkan URL sumber iklan kepada pemilik situs.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
Pada akhirnya, bingkai dengan fence tidak akan menggantikan iframe. Anda tidak perlu menggunakannya. Frame dengan fence diusulkan untuk frame yang lebih pribadi untuk digunakan saat data dari partisi tingkat atas yang berbeda perlu ditampilkan di halaman yang sama.
Sematkan 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 berinteraksi dengan
pengguna.
Portal menawarkan kompleksitas rendah pada aplikasi multi-halaman dengan transisi yang mulus pada aplikasi web satu halaman. Transisi ini dapat dianimasikan untuk mengganti konten di jendela browser dengan cepat.
<portal src="https://example.com/"></portal>
Spesifikasi portal masih dalam tahap pengembangan awal.
Elemen HTML lain yang digunakan untuk sematan
Sepanjang riwayat web, ada sejumlah elemen HTML yang diusulkan dan
API yang dibuat untuk menyematkan konten. Untuk sementara waktu, membuat situs dengan
beberapa elemen <frame>
dan
<frameset> adalah hal yang umum. Situs dengan beberapa elemen <frameset> menampilkan URL
halaman induk di kolom URL, terlepas dari sumber masing-masing
frame. Hal ini menyulitkan berbagi link ke konten dalam situs. API ini
sudah tidak digunakan lagi.
Ada waktu ketika teknologi plugin, seperti elemen <applet> Java, digunakan untuk mencakup kasus penggunaan lainnya. Elemen ini kemudian diganti dengan elemen <object>. Kedua elemen ini biasanya digunakan untuk menampilkan plugin Flash, tetapi juga digunakan untuk menampilkan elemen HTML lainnya (serupa dengan iframe).
Elemen lain, seperti <canvas>, <audio>, <video>, dan <svg>, telah
merender elemen <object> dan <applet> yang sudah tidak digunakan lagi.
Meskipun <object> dan <embed> belum digunakan secara resmi, sebaiknya
hindari, terutama karena keduanya memiliki perilaku yang aneh.
<applet> dihapus dari spesifikasi HTML pada 2017.
Kesimpulan
Anda dapat menyematkan konten dengan aman ke situs apa 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 Frame dengan Fence seiring
prosesnya berlangsung.
Banner besar oleh Jackson So.