Mendukung HTTPS untuk situs adalah langkah penting untuk melindungi situs dan pengguna Anda dari serangan, tetapi konten campuran dapat membuat perlindungan tersebut menjadi tidak berguna. Konten campuran yang semakin tidak aman akan diblokir oleh browser, seperti yang dijelaskan dalam Apa yang dimaksud dengan konten campuran?
Dalam panduan ini, kami akan menunjukkan teknik dan alat untuk memperbaiki masalah konten campuran yang sudah ada dan mencegah terjadinya masalah baru.
Menemukan konten campuran dengan mengunjungi situs Anda
Saat mengunjungi halaman HTTPS di Google Chrome, browser akan memperingatkan Anda tentang konten campuran sebagai error dan peringatan pada konsol JavaScript.
Di bagian Apa yang dimaksud dengan konten campuran?, Anda dapat menemukan sejumlah contoh dan melihat bagaimana masalah dilaporkan di Chrome DevTools.
Contoh konten campuran pasif akan memberikan peringatan berikut.
Jika browser dapat menemukan konten di URL https, browser akan otomatis mengupgradenya, lalu menampilkan pesan.
Konten campuran aktif diblokir dan menampilkan peringatan.
Jika menemukan peringatan seperti ini untuk URL http:// di situs Anda,
Anda harus memperbaikinya di sumber situs.
Sebaiknya buat daftar URL tersebut, bersama dengan halaman tempat Anda menemukannya, untuk digunakan jika Anda memperbaikinya.
Menemukan konten campuran di situs Anda
Anda bisa menelusuri materi campuran secara langsung dalam kode sumber.
Telusuri http:// di sumber Anda dan cari tag yang berisi atribut URL HTTP.
Perhatikan bahwa memiliki http:// dalam atribut href tag anchor (<a>)
sering kali bukanlah masalah konten campuran, dengan beberapa pengecualian penting yang akan dibahas nanti.
Jika situs Anda dipublikasikan menggunakan sistem pengelolaan konten, ada kemungkinan link ke URL yang tidak aman akan disisipkan saat halaman dipublikasikan. Misalnya, gambar dapat disertakan dengan URL lengkap, bukan jalur relatif. Anda harus menemukan dan memperbaikinya dalam konten CMS.
Memperbaiki konten campuran
Setelah menemukan konten campuran di sumber situs, Anda dapat mengikuti langkah-langkah berikut untuk memperbaikinya.
Jika Anda menerima pesan konsol yang menyatakan bahwa permintaan resource telah otomatis diupgrade dari HTTP ke HTTPS,
Anda dapat dengan aman mengubah URL http:// untuk resource dalam kode Anda menjadi https://.
Anda juga dapat memeriksa untuk mengetahui apakah resource tersedia secara aman dengan mengubah http:// menjadi https:// di kolom URL browser
dan mencoba membuka URL di tab browser.
Jika sumber daya 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 halaman tempat Anda menemukan error pertama kali dan verifikasi bahwa error tersebut tidak lagi muncul.
Waspadai penggunaan tag non-standar
Waspadai penggunaan tag non-standar di situs Anda.
Misalnya, URL tag anchor (<a>) tidak menyebabkan error konten campuran,
karena menyebabkan browser membuka halaman baru.
Ini berarti biasanya masalah
tidak perlu diperbaiki.
Namun, beberapa skrip galeri gambar mengganti fungsi tag <a>
dan memuat resource HTTP yang ditentukan oleh atribut href ke tampilan lightbox di halaman,
sehingga menyebabkan masalah konten campuran.
Menangani konten campuran dalam skala besar
Langkah-langkah manual di atas berfungsi dengan baik untuk situs yang lebih kecil; tetapi untuk situs besar atau situs yang memiliki banyak tim pengembangan terpisah, mungkin sulit untuk melacak semua konten yang dimuat. Untuk membantu tugas ini, Anda dapat menggunakan kebijakan keamanan konten untuk memerintahkan browser memberi tahu Anda tentang konten campuran dan memastikan bahwa halaman tidak pernah memuat resource yang tidak aman secara tidak terduga.
Kebijakan keamanan konten
Kebijakan keamanan konten (CSP) adalah fitur browser serbaguna yang dapat Anda gunakan untuk mengelola konten campuran dalam skala besar. Mekanisme pelaporan CSP dapat digunakan untuk melacak konten campuran di situs Anda, dan memberikan kebijakan penegakan untuk melindungi pengguna dengan mengupgrade atau memblokir konten campuran.
Anda dapat mengaktifkan fitur ini untuk halaman dengan menyertakan header Content-Security-Policy atau Content-Security-Policy-Report-Only dalam respons yang dikirim dari server Anda.
Selain itu, Anda dapat menetapkan 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, tetapkan 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 akan mengirimkan laporan berformat JSON terkait hal 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 terjadinya pelanggaran kebijakan dan URL subresource yang melanggar kebijakan.
Jika Anda mengonfigurasi endpoint pelaporan untuk mencatat laporan ini ke dalam log, Anda dapat melacak konten campuran di situs tanpa mengunjungi sendiri setiap halaman.
Dua hal yang perlu diwaspadai 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 Anda memiliki halaman yang tidak mendapatkan banyak traffic, mungkin perlu waktu beberapa saat sebelum Anda mendapatkan laporan untuk seluruh situs Anda.
Panduan Kebijakan keamanan konten memiliki informasi selengkapnya dan contoh endpoint.
Alternatif untuk pelaporan dengan CSP
Jika situs dihosting untuk Anda oleh platform seperti Blogger, Anda mungkin tidak memiliki akses untuk mengubah header dan menambahkan CSP. Sebagai gantinya, alternatif yang tepat adalah menggunakan crawler situs untuk menemukan masalah di seluruh situs untuk Anda, seperti HTTPSChecker atau Pemindaian Konten Campuran.
Mengupgrade permintaan yang tidak aman
Browser mulai diupgrade dan memblokir permintaan yang tidak aman. Anda dapat menggunakan perintah CSP untuk memaksa upgrade atau pemblokiran otomatis aset ini.
Perintah CSP upgrade-insecure-requests 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 aman untuk
https://example.com/image.jpg, sehingga melindungi 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 tersebut secara inline di bagian <head> dokumen menggunakan elemen <meta>:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Seperti upgrade otomatis browser, jika resource tidak tersedia melalui HTTPS,
permintaan yang telah diupgrade akan gagal dan resource tidak akan dimuat.
Tindakan ini akan menjaga keamanan halaman Anda. Perintah upgrade-insecure-requests berfungsi lebih dari sekadar upgrade browser otomatis,
mencoba mengupgrade permintaan yang saat ini tidak dilakukan browser.
Perintah upgrade-insecure-requests menurun ke dokumen <iframe>, yang memastikan seluruh halaman terlindungi.