Memperbaiki konten campuran

Jo-el van Bergen

Rachel Andrew

Mendukung HTTPS untuk situs Anda adalah langkah penting untuk melindungi situs dan pengguna Anda dari serangan, tetapi konten campuran dapat membuat perlindungan tersebut tidak berguna. Konten campuran yang semakin 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 masalah baru terjadi.

Menemukan konten campuran dengan membuka situs Anda

Saat membuka halaman HTTPS di Google Chrome, browser akan memberi tahu Anda tentang konten campuran sebagai error dan peringatan di konsol JavaScript.

Di Apa itu konten campuran?, Anda dapat menemukan sejumlah contoh dan melihat cara 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 Anda menemukan peringatan seperti ini untuk URL http:// di situs Anda, Anda harus memperbaikinya di sumber situs Anda. Sebaiknya buat daftar URL ini, beserta halaman tempat Anda menemukannya, untuk digunakan saat Anda memperbaikinya.

Catatan: Error dan peringatan konten campuran hanya ditampilkan untuk halaman yang sedang Anda lihat, dan konsol JavaScript akan dihapus setiap kali Anda membuka halaman baru. Artinya, Anda harus melihat setiap halaman situs satu per satu untuk menemukan error ini.

Menemukan konten campuran di situs Anda

Anda dapat menelusuri konten campuran langsung di kode sumber. Telusuri http:// di sumber Anda dan cari tag yang menyertakan atribut URL HTTP. Perhatikan bahwa adanya http:// dalam atribut href tag anchor (<a>) sering kali bukan 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 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, Anda dapat mengikuti langkah-langkah berikut untuk memperbaikinya.

Jika Anda mendapatkan pesan konsol bahwa permintaan resource telah otomatis diupgrade dari HTTP ke HTTPS, Anda dapat mengubah URL http:// untuk resource dalam kode Anda menjadi https:// dengan aman. Anda juga dapat memeriksa apakah resource tersedia dengan aman dengan mengubah http:// menjadi https:// di kolom URL browser dan mencoba membuka URL di tab browser.

Jika resource tidak tersedia melalui https://, Anda harus mempertimbangkan salah satu opsi berikut:

• Sertakan resource dari host lain, jika ada.
• Download dan host konten di situs Anda secara langsung, jika Anda diizinkan secara hukum untuk melakukannya.
• Mengecualikan resource dari situs Anda sepenuhnya.

Setelah memperbaiki masalah, lihat halaman tempat Anda menemukan error tersebut dan pastikan error tidak lagi muncul.

Waspadai penggunaan tag yang tidak standar

Waspadai penggunaan tag yang tidak standar di situs Anda. Misalnya, URL tag anchor (<a>) tidak menyebabkan error konten campuran, karena URL tersebut menyebabkan browser membuka halaman baru. Artinya, biasanya tidak perlu diperbaiki. Namun, beberapa skrip galeri gambar menggantikan fungsi tag <a> dan memuat resource HTTP yang ditentukan oleh atribut href ke dalam 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 dengan banyak tim pengembangan terpisah, akan sulit untuk melacak semua konten yang dimuat. Untuk membantu tugas ini, Anda dapat menggunakan kebijakan keamanan konten untuk menginstruksikan browser agar 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 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 tidak Content-Security-Policy-Report-Only) menggunakan tag <meta> di bagian <head> halaman Anda.

Catatan: Browser modern menerapkan semua kebijakan keamanan konten yang mereka terima. Beberapa nilai header CSP yang diterima oleh browser di header respons atau elemen <meta> digabungkan dan diterapkan sebagai satu kebijakan; kebijakan pelaporan juga digabungkan. Kebijakan digabungkan dengan mengambil irisan kebijakan; artinya, setiap kebijakan setelah kebijakan pertama hanya dapat membatasi lebih lanjut konten yang diizinkan, bukan memperluasnya.

Menemukan konten campuran dengan kebijakan keamanan konten

Anda dapat menggunakan kebijakan keamanan konten untuk mengumpulkan laporan 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

Catatan: Header respons report-uri tidak digunakan lagi dan digantikan dengan report-to.

Browser Support

• 70
• 79
• 
• 16.4

Source

Anda dapat memberikan kedua header, dan dalam hal ini report-uri akan diabaikan jika browser mendukung report-to.

Setiap kali pengguna mengunjungi halaman di situs Anda, browser mereka akan mengirim laporan berformat JSON terkait 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 mengonfigurasi endpoint pelaporan untuk mencatat laporan ini, Anda dapat melacak konten campuran di situs tanpa harus membuka setiap halaman.

Dua peringatan untuk hal ini adalah:

• Pengguna harus membuka 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 Anda. Jadi, jika Anda memiliki halaman yang tidak mendapatkan banyak traffic, mungkin perlu waktu sebelum Anda mendapatkan laporan untuk seluruh situs.

Panduan Kebijakan keamanan konten memiliki informasi selengkapnya dan contoh endpoint.

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 layak adalah menggunakan crawler situs untuk menemukan masalah di seluruh situs Anda, seperti HTTPSChecker atau Mixed Content Scan.

Mengupgrade permintaan tidak aman

Browser Support

• 44
• 17
• 48
• 10.1

Source

Browser mulai mengupgrade dan memblokir permintaan yang tidak aman. Anda dapat menggunakan direktif CSP untuk memaksa upgrade otomatis atau pemblokiran aset ini.

Direktif CSP upgrade-insecure-requests menginstruksikan browser untuk mengupgrade URL yang tidak aman sebelum membuat permintaan jaringan.

Sebagai contoh, 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 pengguna terhindar dari konten campuran.

Anda dapat mengaktifkan perilaku ini dengan mengirimkan header Content-Security-Policy dengan direktif ini:

Content-Security-Policy: upgrade-insecure-requests

Atau dengan menyematkan direktif yang sama 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 diupgrade akan gagal dan resource tidak dimuat. Tindakan ini akan menjaga keamanan halaman Anda. Direktif upgrade-insecure-requests akan melangkah lebih jauh daripada upgrade browser otomatis, dengan mencoba mengupgrade permintaan yang saat ini tidak dilakukan oleh browser.

Perintah upgrade-insecure-requests di-cascade ke dokumen <iframe>, memastikan seluruh halaman dilindungi.