Halaman memiliki konten campuran jika 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 ini mengacu pada campuran konten HTTP dan HTTPS di satu halaman.
Meminta sub-resource menggunakan protokol HTTP yang tidak aman akan melemahkan keamanan halaman, karena permintaan ini rentan terhadap serangan di jalur, saat penyerang menguping koneksi jaringan dan melihat atau mengubah komunikasi antara dua pihak. Dengan menggunakan resource ini, penyerang dapat melacak pengguna dan mengganti konten di situs, dan dalam kasus konten campuran aktif, mereka dapat mengambil kontrol penuh atas halaman, bukan hanya resource yang tidak aman.
Meskipun banyak browser melaporkan peringatan konten campuran kepada pengguna, laporan tersebut sering kali terlambat: permintaan yang tidak aman telah dilakukan dan keamanan halaman telah disusupi.
Sebagian besar browser kini memblokir konten campuran karena alasan keamanan. Ubah permintaan konten yang tidak aman menjadi konten aman untuk 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 dalam hal 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
Konten campuran pasif memiliki risiko yang lebih kecil daripada konten campuran aktif, tetapi risiko tersebut masih ada. Misalnya, penyerang dapat:
- Mencegat permintaan HTTP untuk gambar di situs Anda dan menukar atau mengganti gambar tersebut.
- Mengganti gambar pada tombol sehingga pengguna bingung dan, misalnya, menghapus konten yang ingin mereka simpan.
- Mengubah tampilan situs Anda dengan mengganti gambar dengan konten pornografi.
- Mengganti gambar produk Anda dengan iklan untuk produk lain.
Meskipun penyerang tidak mengubah konten situs Anda, ia dapat melacak pengguna melalui permintaan konten campuran. Cookie juga dapat mengetahui halaman mana yang dikunjungi pengguna dan produk mana yang mereka lihat berdasarkan gambar atau resource lain yang dimuat browser.
Jika konten campuran pasif ada, sebagian besar browser akan 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 Anda harus memperbarui setiap instance konten campuran di situs Anda.
Dalam beberapa kasus, Chrome otomatis mengupgrade konten campuran pasif. Artinya, jika aset telah di-hardcode sebagai HTTP, tetapi tersedia melalui HTTPS, browser akan memuat versi HTTPS. Jika tidak ada versi aman, aset tidak akan dimuat.
Setiap kali Chrome mendeteksi konten campuran atau mengupgrade konten campuran pasif secara otomatis, Chrome akan mencatat pesan mendetail ke tab Issues di DevTools untuk memberi tahu Anda cara memperbaiki masalah tertentu.

Konten campuran yang aktif
Konten campuran aktif menimbulkan ancaman yang lebih besar daripada konten campuran pasif. Penyerang dapat menyadap dan menulis ulang konten aktif, menggunakannya untuk mengambil kontrol penuh atas halaman atau bahkan seluruh situs Anda. Hal ini memungkinkan mereka mengubah aspek apa pun di halaman, 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 aktif sangat tinggi, sebagian besar browser sudah memblokir jenis konten ini secara default untuk melindungi pengguna, tetapi perilakunya bervariasi di antara vendor dan versi browser.
Demo ini menunjukkan contoh konten campuran aktif. Muat contoh melalui HTTP untuk melihat konten yang diblokir saat Anda memuat contoh melalui HTTPS. Konten yang diblokir juga dijelaskan di tab Masalah di DevTools.

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 bagian web yang signifikan". Ini adalah subkumpulan konten 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 secara dramatis, dan telah menjadi default yang jelas di web. Hal ini membuat browser lebih memungkinkan untuk 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. Dalam kasus terburuk, browser dan versi lama tidak memblokir konten campuran sama sekali, yang tidak aman bagi pengguna.
Dengan memuat semua resource dengan aman dan memperbaiki masalah konten campuran, Anda memastikan bahwa konten Anda terlihat dan melindungi pengguna dari konten berbahaya yang mungkin tidak diblokir oleh browser lama.