Menyematkan konten dengan aman di situs Anda

Jack J

Alexandra Klepper

Konten tersemat adalah cara terbaik untuk membuat pengguna tetap berada di situs Anda, sekaligus membagikan konten dari halaman atau situs lain. Ini bisa berukuran sekecil Tweet tersemat, yang ditampilkan dalam gaya dan format Twitter. Halaman tersebut dapat sebesar situs terpisah yang disematkan ke situs Anda, seperti toko Shopify tersemat tempat pengunjung dapat melakukan pembelian tanpa meninggalkan situs Anda.

Kini, lebih dari sebelumnya, penting bagi situs kita untuk tetap aman saat kita 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 tersemat Anda.

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 penjelajahan 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);
})

Menambahkan keamanan dengan atribut sandbox

Jika konten berbahaya di-deploy dalam iframe, tindakan yang tidak disengaja (seperti eksekusi JavaScript atau pengiriman formulir) dapat dijalankan. 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 dapat membuat API tertentu tidak tersedia dan penting untuk konten yang disematkan. 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 semakin banyaknya fitur yang dikembangkan untuk web, kebijakan izin dibuat untuk mengelola izin untuk 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>

Menyematkan dengan frame dengan fence

Frame berpagar (<fencedframe>) adalah elemen HTML yang diusulkan untuk konten sematan, mirip dengan iframe. Tidak seperti iframe, bingkai berpagar membatasi komunikasi dengan konteks penyematan untuk memungkinkan akses bingkai ke data lintas situs tanpa membagikannya dengan konteks penyematan. Demikian pula, data pihak pertama di halaman induk tidak dapat dibagikan dengan bingkai yang dibatasi.

<fencedframe src="https://3rd.party.example"></fencedframe>

Fenced Frames adalah proposal Privacy Sandbox yang menyarankan agar situs tingkat teratas harus mempartisi data. Banyak 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 dengan fence.

Misalnya, bingkai berpagar akan dibuat untuk pemenang lelang iklan FLEDGE API. FLEDGE API akan memberikan sumber buram, skema URN yang tidak bergantung pada lokasi, yang dapat dirender dalam frame dengan fence. 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 dengan fence tidak akan menggantikan iframe. Anda tidak perlu menggunakannya. Bingkai berpagar diusulkan untuk bingkai yang lebih pribadi untuk digunakan 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 berinteraksi dengan pengguna.

Portal menawarkan kompleksitas rendah aplikasi multi-halaman dengan transisi yang lancar dari aplikasi web satu halaman. Transisi ini dapat dianimasikan, yang akan dengan cepat mengganti konten di jendela browser.

<portal src="https://example.com/"></portal>

Spesifikasi portal masih dalam tahap awal pengembangan.

Elemen HTML lainnya yang digunakan untuk penyematan

Sepanjang sejarah 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 banyak frame individual. Hal ini membuat sulit untuk membagikan link ke konten dalam situs. API ini tidak digunakan lagi.

Ada juga saat 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 (mirip dengan iframe). Elemen lain, seperti <canvas>, <audio>, <video>, dan <svg>, telah membuat elemen <object> dan <applet> tidak digunakan lagi.

Meskipun <object> dan <embed> belum dihentikan secara resmi, sebaiknya hindari keduanya, terutama karena keduanya memiliki beberapa perilaku aneh. <applet> dihapus dari spesifikasi HTML pada tahun 2017.

Kesimpulan

Anda dapat menyematkan konten dengan 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 terkait proposal Bingkai Pagar seiring progresnya.