Koneksi HTTPS "tidak aman" karena gambar

14

Saat ini saya sedang mengerjakan situs web dan saya telah berhasil menginstal sertifikat SSL saya.

Pemeriksa GeoTrust SSL / TLS mengonfirmasi bahwa rantai sertifikat (termasuk CA) diinstal dengan benar. Semuanya terlihat baik di Chrome tetapi gembok saya tidak berwarna hijau dan di Firefox sebenarnya menyatakan bahwa situs web tidak aman karena ada elemen yang tidak dienkripsi di dalamnya.

Saya menggunakan layanan online untuk memeriksa mengapa itu dan ternyata memang gambar saya tidak dianggap sebagai URL aman. Bagaimana cara saya menangani situasi ini, alias bagaimana saya menanamkan gambar di situs web saya dengan aman?

mti_
sumber

Jawaban:

32

Tag gambar Anda saat ini harus terlihat seperti:

<img src="http://example.com/images/image.jpg">

Bahwa httpdi sana berarti gambar TIDAK dilayani dengan aman. Seorang penyerang dapat mengubah gambar dalam perjalanan dan dengan demikian mengubah bagaimana tampilan halaman Anda yang sebaliknya aman bagi pengguna Anda.

Alih-alih, Anda dapat menggunakan salah satu dari yang berikut ini untuk menyajikan gambar dengan aman:

  • Tautan ke httpssecara eksplisit:<img src="https://example.com/images/image.jpg">
  • Gunakan tautan relatif ke gambar di domain Anda sendiri: <img src="/images/image.jpg">
  • Gunakan tautan relatif protokol untuk menggunakan gambar dari domain lain: <img src="//example.com/images/image.jpg">

Eksplisit httpsakan selalu menyajikan gambar dengan aman (bahkan ketika halaman tidak disajikan dengan aman) sementara tautan relatif akan melayani gambar dengan aman hanya jika halaman disajikan dengan aman.

Di Firefox dan chrome Anda dapat mengklik gembok dan mendapatkan informasi lebih lanjut tentang masalah tersebut. Setelah melakukannya, berikut adalah cuplikan layar dari Firefox yang menampilkan daftar semua gambar di halaman tersebut. Sangat mudah untuk memindai daftar dan melihat mana yang http:

Stephen Ostermiller
sumber
2
"Seorang penyerang bisa mengubah gambar dalam perjalanan dan dengan demikian mengubah bagaimana tampilan halaman Anda yang aman bagi pengguna Anda." - atau bahkan memicu kerentanan dalam renderer.
John Dvorak
2
Dan membajak cookie, yang mungkin termasuk token akses.
Darkhogg
Sepertinya sangat disarankan untuk melakukannya. Terima kasih kepada Anda, saya telah berhasil mendapatkan gembok hijau saya tetapi seorang teman mengatakan bahwa mengenkripsi gambar mungkin memperlambat halaman. Apakah ini masalah dalam kasus saya?
mti_
3
Tentu ada beberapa overhead untuk enkripsi, namun biasanya tidak lebih dari 10% hari ini. Penalti kinerja (bahkan untuk gambar) adalah harga yang harus Anda bayar untuk situs yang aman.
Stephen Ostermiller
whynopadlock.com adalah alat praktis untuk dengan cepat menunjukkan sumber daya tidak aman di URL tertentu.
Ville
5

Masalahnya adalah bahwa halaman Anda melayani tautan dari lokasi http dan bukan https. Ini karena menggunakan tautan http absolut ke sumber referensi seperti gambar. Ada dua metode yang lebih baik yang akan memungkinkan Anda untuk merujuk tautan di http atau https dan menghindari masalah ini.

Anda harus menemukan tautan ini dan mengubahnya ke:

  1. tautan relatif: yaitu./wp-content/yourtheme/images/image1.jpg
  2. atau letakkan // di bagian depan domain seperti di //example.com/wp-content/wp-content/yourtheme/images/image1.jpg Ini kemudian akan menyajikan sumber daya ini melalui http atau https berdasarkan permintaan yang dibuat.

Di Chrome dan Firefox Anda dapat mengklik ikon gembok dan kemudian mengklik untuk melihat daftar tautan tidak aman yang menyinggung. Dan jika Anda tidak dapat melihat gambar atau sumber daya lain yang disorot di browser tetapi masih mendapatkan kesalahan, Anda mungkin menemukan bahwa ada panggilan javascript yang mereferensikan tautan secara absolut melalui http .

halaman dalam
sumber
2
//pada awalnya tidak ada standar, dan browser seperti Lynx akan mengeluh.
mirabilos
2
@mirabilos RFC 1808 adalah standar untuk URL dan menentukan tautan relatif protokol (dimulai dengan //) di bagian 2.4.3. Standar ini sekarang berusia 15 tahun dan diimplementasikan oleh semua browser utama termasuk Lynx
Stephen Ostermiller
#mirabilos Periksa tautan repositori Google yang Anda rekomendasikan. Anda akan menemukan Google telah menggunakannya selama bertahun-tahun.
garth
1

Ini sangat mendasar. Ketika Anda membangun situs web yang dilayani melalui SSL (https), setiap referensi dalam kode Anda yang tidak diawali dengan https akan memunculkan peringatan keamanan - selain tautan. Perhatikan bahwa sebagian besar (semua) browser juga memiliki tautan relatif default ke http. Jadi, jika Anda merujuk /uploads/12/5/img.jpg atau /js/jquery.js, protokol transfer akan default ke http - yang benar-benar menjengkelkan.

Semua browser menangani peringatan sedikit berbeda tetapi Anda akan mendapatkan beberapa jenis pesan. Pernyataan umum adalah bahwa browser yang baru akan semakin parah pesannya. Beberapa browser lama praktis mengabaikan kesalahan ini sementara browser yang lebih baru dapat bertindak seolah-olah dunia Anda sedang diserang karena "s" yang hilang.

blankip
sumber
10
"sebagian besar (semua) browser juga tautan relatif default ke http" Err, apa? Benar-benar semua browser, kecuali mereka rusak, akan menggunakan protokol saat ini jika Anda tidak menentukan yang baru secara eksplisit.
Oleg V. Volkov
5
Oleg benar; itu bukan "menjengkelkan": itu sepenuhnya salah.
Lightness Races with Monica
3
Ini sepenuhnya salah. Abaikan jawaban ini.
martijnve
@martijnve - Bagaimana jawaban saya salah?
blankip
4
@blankip lihat komentar oleg V. Volkovs. Referensi apa pun yang menyertakan http salah. SEMUA yang lain baik-baik saja. (protokol relatif, relatif domain, jalur relatif). Dan Anda harus menggunakan tautan relatif di hampir semua kasus.
martijnve
1

Jika tidak satu pun dari saran ini membantu ketika menyangkut ketidakmampuan untuk menampilkan gambar setelah Anda mengaktifkan SSL pada halaman web Anda, maka periksa untuk berjaga-jaga jika pengaturan cPanel untuk Hotlinks, yang berada di bawah bagian Keamanan cPanel. Sangat mungkin bahwa dalam pengaturan ini Anda memiliki yang berikut: http://example.comdan http://www.example.comdiaktifkan untuk memungkinkan untuk mengakses gambar sementara httpsversi ini tidak diaktifkan.

Sampah Web
sumber
-4

Periksa konfigurasi protokol url aman Anda di cms / wordpress / magento atau platform lain yang Anda gunakan. Anda juga dapat membagikan beberapa tag gambar Anda, tetapi gambar img src dasar tidak memberikan kesalahan seperti itu.

Struktur tag gambar itu penting, tetapi fokus pertanyaan Anda menurut saya relatif terhadap "jenis" Sertifikat SSL yang dipasang di situs Anda. Kasus pribadi terjadi pada saya dengan "Sertifikat SSL GoDaddy Standar.

Anda akan melihat ikon peringatan di bilah pencarian url Firefox (khususnya), mengatakan bahwa mungkin ada gambar atau elemen yang tidak aman di situs Anda. Sejauh yang saya tahu itu hanya masalah bagaimana firefox memproses info tentang sertifikat, atau info yang termasuk di dalamnya. Ini tidak terjadi di safari, chrome atau browser lain. Saya menemukan solusi untuk ini, menginstal daripada "SSL Standar" a "Premium SSL Certificate atau EVC extended validation Certificate " yang memiliki info lebih rinci tentang perusahaan situs. Anda akan mendapatkan bilah url aman gembok hijau.

Namun sertifikat ssl premium bisa sedikit lebih mahal, sekitar $ 150 - $ 200 USD setahun.

masukkan deskripsi gambar di sini

Gaio RoOts
sumber
5
Ini tidak benar karena: 1) tag <img src = "..."> memang dapat memberikan kesalahan seperti ini, jika Anda memasukkan url HTTP (yang bertentangan dengan url HTTPS) dan 2) jenis sertifikat atau cara diproses sama sekali tidak ada hubungannya dengan ini
fNek
Saya menggunakan untuk tag media global img src seperti {{media url = "path / to / image.jpg"}} dengan atau tanpa protokol ssl dan saya tidak mendapatkan kesalahan. Ngomong-ngomong aku menunjuk ke kesalahan Stephen ssl Firefox yang ditampilkan. Salam.
Gaio RoOts
3
Jika Anda menggunakan URL relatif, tidak ada masalah, karena mereka relatif. Silakan baca jawaban lainnya. Saya tahu Anda mengacu pada kesalahan Stephen. Jenis sertifikat masih tidak ada hubungannya dengan itu.
fNek
Jenis sertifikat tidak berdampak pada apa yang disebut 'peringatan konten campuran'. Juga, semua browser modern hari ini menunjukkan peringatan, beberapa jelas, yang lain hanya dengan menolak untuk menunjukkan ikon Kunci.
Martijn Heemels