Mendukung HTTPS untuk situs web Anda adalah langkah penting untuk melindungi situs dan pengguna Anda dari serangan, tetapi konten campuran bisa membuat perlindungan itu menjadi tidak berguna. Konten campuran yang makin tidak aman akan diblokir oleh browser, seperti yang dijelaskan dalam Apa itu konten campuran?
Dalam panduan ini, kami akan menunjukkan teknik dan alat untuk memperbaiki masalah konten campuran yang ada dan mencegah terjadinya terjadinya serangan baru.
Menemukan konten campuran dengan mengunjungi situs Anda
Saat mengunjungi laman HTTPS di Google Chrome, browser memperingatkan Anda tentang konten campuran sebagai error dan peringatan di konsol JavaScript.
Di bagian Apa yang dimaksud dengan konten campuran?, Anda bisa menemukan sejumlah contoh dan melihat bagaimana masalah dilaporkan di Chrome DevTools.
Contoh konten campuran pasif akan memberikan peringatan berikut.
Jika dapat menemukan konten di URL https
, browser akan otomatis mengupgradenya, lalu menampilkan pesan.
![Chrome DevTools menampilkan peringatan yang ditampilkan saat konten campuran terdeteksi dan diupgrade](https://web.dev/static/articles/fixing-mixed-content/image/passive-mixed-content.jpeg?authuser=19&hl=id)
Konten campuran aktif diblokir dan menampilkan peringatan.
![Chrome DevTools menampilkan peringatan yang ditampilkan saat konten campuran aktif diblokir](https://web.dev/static/articles/fixing-mixed-content/image/chrome-devtools-showing-7a65755cae4b8.jpg?authuser=19&hl=id)
Jika Anda menemukan peringatan seperti ini untuk http://
URL di situs Anda,
Anda harus memperbaikinya di sumber situs Anda.
Akan sangat membantu bila Anda membuat daftar URL tersebut, bersama dengan halaman tempat Anda menemukannya, untuk digunakan saat Anda memperbaikinya.
Menemukan konten campuran di situs Anda
Anda dapat menelusuri konten campuran secara langsung di kode sumber.
Telusuri http://
di kode sumber Anda dan cari tag yang menyertakan atribut URL HTTP.
Perhatikan bahwa memiliki http://
dalam atribut href
tag anchor (<a>
)
seringkali bukan masalah konten campuran, dengan beberapa pengecualian penting yang akan dibahas nanti.
Jika situs Anda dipublikasikan menggunakan sistem pengelolaan konten, ada kemungkinan bahwa tautan ke URL yang tidak aman disisipkan saat laman diterbitkan. Misalnya, gambar dapat disertakan dengan URL lengkap, bukan jalur relatif. Anda harus menemukan dan memperbaikinya dalam konten CMS.
Memperbaiki konten campuran
Setelah Anda menemukan konten campuran di sumber situs Anda, Anda dapat mengikuti langkah-langkah berikut untuk memperbaikinya.
Jika Anda mendapatkan pesan konsol bahwa permintaan
sumber daya telah diupgrade secara otomatis dari HTTP ke HTTPS,
Anda dapat mengubah URL http://
dengan aman untuk resource dalam kode Anda menjadi https://
.
Anda juga dapat memeriksa apakah resource tersedia secara aman dengan mengubah http://
menjadi https://
di kolom URL browser
dan mencoba membuka
URL di tab {i>browser<i}.
Jika resource tidak tersedia melalui https://
, Anda harus mempertimbangkan salah satu opsi berikut:
- Sertakan resource dari host lain, jika tersedia.
- Download dan hosting konten di situs Anda secara langsung, jika secara hukum Anda diizinkan untuk melakukannya.
- Kecualikan sumber daya dari situs Anda sepenuhnya.
Setelah memperbaiki masalah, lihat laman tempat Anda menemukan kesalahan awalnya dan verifikasi bahwa kesalahan tersebut tidak lagi muncul.
Waspadai penggunaan tag non-standar
Waspadai penggunaan tag non-standar di situs Anda.
Misalnya, URL tag anchor (<a>
) tidak menghasilkan error konten campuran,
karena membuat browser membuka halaman baru.
Ini berarti masalah tersebut biasanya tidak perlu diperbaiki.
Namun, beberapa skrip galeri gambar menggantikan fungsi <a>
dan memuat resource HTTP yang ditentukan oleh atribut href
ke tampilan lightbox di halaman,
menyebabkan masalah materi campuran.
Menangani konten campuran dalam skala besar
Langkah manual di atas berfungsi dengan baik untuk situs yang lebih kecil; tetapi untuk situs web besar atau situs dengan banyak tim pengembangan yang terpisah, mungkin sulit untuk melacak semua konten yang sedang dimuat. Untuk membantu melakukan tugas ini, Anda dapat menggunakan kebijakan keamanan konten untuk memerintahkan browser memberi tahu Anda tentang konten campuran dan memastikan halaman Anda tidak pernah memuat resource yang tidak aman secara tidak terduga.
Kebijakan keamanan konten
Kebijakan keamanan konten (CSP) adalah fitur browser multiguna yang dapat Anda gunakan untuk mengelola konten campuran dalam skala besar. Mekanisme pelaporan CSP dapat digunakan untuk melacak konten campuran di situs, dan menyediakan kebijakan penegakan untuk melindungi pengguna dengan mengupgrade atau memblokir konten campuran.
Anda dapat mengaktifkan fitur ini untuk sebuah halaman dengan menyertakan
Content-Security-Policy
atau Content-Security-Policy-Report-Only
dalam respons yang dikirim dari server Anda.
Selain itu, Anda dapat menyetel Content-Security-Policy
(meskipun bukan Content-Security-Policy-Report-Only
) menggunakan tag <meta>
di bagian <head>
halaman Anda.
Menemukan konten campuran dengan kebijakan keamanan konten
Anda dapat menggunakan kebijakan keamanan konten untuk mengumpulkan laporan tentang konten campuran di situs Anda.
Untuk mengaktifkan fitur ini, setel perintah Content-Security-Policy-Report-Only
dengan menambahkannya sebagai header respons untuk situs Anda.
Header respons:
Content-Security-Policy-Report-Only: default-src https: 'unsafe-inline' 'unsafe-eval'; report-uri https://example.com/reportingEndpoint
Setiap kali pengguna mengunjungi
halaman di situs Anda,
browser mereka mengirim laporan berformat JSON mengenai apa pun yang melanggar kebijakan keamanan konten ke
https://example.com/reportingEndpoint
.
Dalam hal ini, setiap kali subresource dimuat melalui HTTP, laporan akan dikirim.
Laporan ini mencakup URL halaman tempat pelanggaran kebijakan terjadi dan URL subresource yang melanggar kebijakan.
Jika Anda mengonfigurasi endpoint pelaporan
untuk mencatat laporan ini,
Anda dapat melacak konten campuran di situs tanpa mengunjungi setiap halaman sendiri.
Dua keberatan untuk hal ini adalah:
- Pengguna harus mengunjungi halaman Anda di browser yang memahami header CSP. Hal ini berlaku untuk sebagian besar browser modern.
- Anda hanya mendapatkan laporan untuk halaman yang dikunjungi oleh pengguna. Jadi, jika halaman Anda tidak mendapatkan banyak traffic, mungkin perlu waktu beberapa saat sebelum Anda mendapatkan laporan untuk keseluruhan situs.
Kebijakan keamanan konten memiliki informasi lebih lanjut dan contoh titik akhir.
Alternatif untuk pelaporan dengan CSP
Jika situs Anda dihosting oleh platform seperti Blogger, Anda mungkin tidak memiliki akses untuk mengubah header dan menambahkan CSP. Sebagai gantinya, alternatif yang dapat digunakan adalah menggunakan crawler situs untuk menemukan masalah di seluruh situs Anda, seperti HTTPSChecker atau Pemindaian Konten Campuran.
Mengupgrade permintaan yang tidak aman
Browser mulai mengupgrade dan memblokir permintaan yang tidak aman. Anda dapat menggunakan perintah CSP untuk memaksa upgrade atau pemblokiran aset ini secara otomatis.
upgrade-insecure-requests
Perintah CSP menginstruksikan browser untuk mengupgrade URL yang tidak aman sebelum membuat permintaan jaringan.
Misalnya, jika halaman berisi tag gambar dengan URL HTTP seperti
<img src="http://example.com/image.jpg">
Sebagai gantinya, browser membuat
permintaan yang aman untuk
https://example.com/image.jpg
, sehingga menghemat konten pengguna dari konten campuran.
Anda dapat mengaktifkan perilaku ini dengan mengirimkan header Content-Security-Policy
dengan perintah ini:
Content-Security-Policy: upgrade-insecure-requests
Atau dengan menyematkan perintah yang sama secara inline dalam <head>
dokumen
menggunakan elemen <meta>
:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Seperti peningkatan otomatis browser, jika sumber daya tidak tersedia melalui HTTPS,
permintaan yang diupgrade akan gagal dan resource tidak dimuat.
Tindakan ini akan menjaga keamanan halaman Anda. Perintah upgrade-insecure-requests
lebih dari sekadar upgrade browser otomatis,
mencoba meningkatkan permintaan yang saat ini tidak dilakukan browser.
Perintah upgrade-insecure-requests
menurun menjadi dokumen <iframe>
,
untuk memastikan seluruh laman terlindungi.