Halaman memiliki konten campuran saat HTML awalnya dimuat melalui koneksi HTTPS yang aman, tetapi resource lain (seperti gambar, video, stylesheet, dan skrip) dimuat melalui koneksi HTTP yang tidak aman. Nama tersebut mengacu pada gabungan konten HTTP dan HTTPS di satu halaman.
Meminta subresource menggunakan protokol HTTP yang tidak aman akan melemahkan keamanan halaman, karena permintaan ini rentan terhadap serangan di jalur, yang membuat penyerang menyadap koneksi jaringan dan melihat atau mengubah komunikasi antara dua pihak. Dengan menggunakan resource ini, penyerang dapat melacak pengguna dan mengganti konten di situs. Untuk konten campuran yang aktif, penyerang dapat mengambil kendali penuh atas halaman, bukan hanya resource yang tidak aman.
Meskipun banyak browser melaporkan peringatan konten campuran kepada pengguna, laporan ini sering kali terlambat: permintaan tidak aman telah dijalankan dan keamanan halaman telah disusupi.
Sebagian besar browser kini memblokir konten campuran karena alasan keamanan. Ubah permintaan konten yang tidak aman untuk mengamankan konten guna memastikan halaman Anda terus dimuat dengan benar.
Dua jenis konten campuran
Ada dua jenis konten campuran: aktif dan pasif.
Konten campuran pasif, termasuk gambar, video, dan audio, tidak berinteraksi dengan bagian halaman lainnya, sehingga serangan man-in-the-middle dibatasi pada apa yang dapat dilakukannya jika mencegat atau mengubah konten tersebut.
Konten campuran aktif berinteraksi dengan halaman secara keseluruhan. Hal ini mencakup skrip, stylesheet, iframe, dan kode lain yang dapat didownload dan dijalankan oleh browser. Serangan pada konten campuran aktif memungkinkan penyerang melakukan hampir semua hal pada halaman.
Konten campuran pasif
Risiko konten campuran pasif lebih kecil dibandingkan konten campuran aktif, tetapi risiko tersebut masih ada. Misalnya, penyerang dapat:
- Cegah permintaan HTTP untuk gambar di situs Anda dan tukar atau ganti gambar tersebut.
- Mengganti gambar pada tombol sehingga pengguna akan bingung dan, misalnya, menghapus konten yang ingin disimpan.
- Perbaiki situs Anda dengan mengganti gambar dengan konten pornografi.
- Ganti gambar produk Anda dengan iklan untuk sesuatu yang lain.
Meskipun penyerang tidak mengubah konten situs Anda, mereka dapat melacak pengguna melalui permintaan konten campuran. Elemen ini juga dapat mengetahui halaman mana yang dikunjungi pengguna dan produk mana yang mereka lihat berdasarkan gambar atau resource lain yang dimuat browser.
Jika terdapat konten campuran pasif, sebagian besar browser menunjukkan di kolom URL bahwa halaman tidak aman, meskipun halaman itu sendiri dimuat melalui HTTPS. Anda dapat mengamati perilaku ini dalam demo ini.
Hingga baru-baru ini, konten campuran pasif dimuat di semua browser karena memblokirnya akan merusak banyak situs. Hal ini sekarang mulai berubah, jadi penting untuk mengupdate setiap instance konten campuran di situs Anda.
Dalam beberapa kasus, Chrome otomatis mengupgrade konten campuran pasif. Artinya, jika aset telah di-hard code sebagai HTTP, tetapi tersedia melalui HTTPS, browser akan memuat versi HTTPS. Jika tidak ada versi yang aman, aset tidak akan dimuat.
Setiap kali Chrome mendeteksi konten campuran atau konten campuran pasif yang diupgrade otomatis, Chrome akan mencatat pesan mendetail ke tab Issues di DevTools untuk memberi tahu Anda cara memperbaiki masalah tertentu.
![Tab Issues di Chrome DevTools menampilkan informasi mendetail tentang masalah materi campuran tertentu dan cara memperbaikinya](https://web.dev/static/articles/what-is-mixed-content/image/issues-tab-chrome.jpg?authuser=19&hl=id)
Konten campuran aktif
Konten campuran aktif menimbulkan ancaman yang lebih besar daripada konten campuran pasif. Penyerang dapat menyadap dan menulis ulang konten aktif, menggunakannya untuk mengambil kendali penuh atas halaman atau bahkan seluruh situs Anda. Dengan tindakan ini, mereka dapat mengubah aspek halaman apa pun, termasuk menampilkan konten yang berbeda, mencuri sandi pengguna atau kredensial login lainnya, mencuri cookie sesi pengguna, atau mengalihkan pengguna ke situs yang sama sekali berbeda.
Karena risiko konten campuran yang aktif sangat tinggi, sebagian besar browser sudah memblokir jenis konten ini secara default untuk melindungi pengguna, tetapi perilakunya bervariasi antara vendor dan versi browser.
Demo ini menunjukkan contoh konten campuran yang aktif. Muat contoh melalui HTTP untuk melihat konten yang diblokir saat Anda memuat contoh melalui HTTPS. Konten yang diblokir juga dijelaskan dalam tab Issues di DevTools.
![Tab Issues di Chrome DevTools menampilkan informasi mendetail tentang masalah materi campuran tertentu dan cara memperbaikinya](https://web.dev/static/articles/what-is-mixed-content/image/the-issues-tab-chrome-de-0eea9d1e99f11.jpg?authuser=19&hl=id)
Spesifikasi konten campuran
Browser mengikuti spesifikasi konten campuran, yang menentukan kategori konten yang dapat diblokir secara opsional dan konten yang dapat diblokir.
Resource memenuhi syarat sebagai konten yang dapat diblokir secara opsional "jika risiko mengizinkan penggunaannya sebagai konten campuran lebih besar daripada risiko merusak sebagian besar web". Ini adalah bagian dari materi campuran pasif.
Semua konten campuran yang tidak dapat diblokir secara opsional dianggap dapat diblokir, dan harus diblokir oleh browser.
Dalam beberapa tahun terakhir, penggunaan HTTPS telah meningkat drastis, dan telah menjadi default yang jelas di web. Hal ini membuat browser lebih memungkinkan bagi browser untuk mempertimbangkan memblokir semua konten campuran, bahkan jenis subresource yang ditentukan dalam spesifikasi konten campuran sebagai dapat diblokir secara opsional.
Browser lama
Beberapa pengunjung mungkin menggunakan browser lama. Versi browser yang berbeda dari vendor yang berbeda memperlakukan konten campuran secara berbeda. Yang terburuk, browser dan versi lama tidak memblokir konten campuran sama sekali, sehingga tidak aman bagi pengguna.
Dengan memuat semua resource Anda secara aman dan memperbaiki masalah konten campuran, Anda memastikan konten Anda terlihat dan melindungi pengguna dari konten berbahaya yang mungkin tidak diblokir oleh browser lama.