Berurusan dengan konten HTTP di halaman HTTPS

Kami memiliki situs yang sepenuhnya diakses melalui HTTPS, tetapi terkadang menampilkan konten eksternal yaitu HTTP (gambar dari RSS feed, terutama). Sebagian besar pengguna kami juga terjebak di IE6.

Idealnya, saya ingin melakukan kedua hal berikut

• Cegah pesan peringatan IE tentang konten tidak aman (sehingga saya dapat menampilkan yang tidak terlalu mengganggu, misalnya dengan mengganti gambar dengan ikon default seperti di bawah)
• Menampilkan sesuatu yang berguna bagi pengguna sebagai ganti gambar yang tidak dapat mereka lihat; jika ada beberapa JS, saya bisa lari untuk mencari tahu gambar mana yang belum dimuat dan menggantinya dengan gambar milik kami, itu akan bagus.

Saya menduga bahwa tujuan pertama sama sekali tidak mungkin, tetapi tujuan kedua mungkin cukup.

Skenario kasus terburuk adalah saya mengurai RSS feed ketika kita mengimpornya, mengambil gambar menyimpannya secara lokal sehingga pengguna dapat mengaksesnya dengan cara itu, tetapi sepertinya sangat merepotkan untuk keuntungan yang cukup kecil.

Skenario terburuk Anda tidak seburuk yang Anda pikirkan.

Anda sudah mengurai umpan RSS, jadi Anda sudah memiliki URL gambarnya. Katakanlah Anda memiliki URL gambar seperti http://otherdomain.com/someimage.jpg. Anda menulis ulang URL ini sebagai https://mydomain.com/imageserver?url=http://otherdomain.com/someimage.jpg&hash=abcdeafad. Dengan cara ini, browser selalu membuat permintaan melalui https, jadi Anda bisa mengatasi masalah tersebut.

Bagian selanjutnya - buat halaman proxy atau servlet yang melakukan hal berikut -

1. Baca parameter url dari string kueri, dan verifikasi hash
2. Unduh gambar dari server, dan proksi kembali ke browser
3. Secara opsional, buat cache gambar di disk

Solusi ini memiliki beberapa keunggulan. Anda tidak perlu mengunduh gambar pada saat membuat html. Anda tidak harus menyimpan gambar secara lokal. Juga, Anda tidak memiliki kewarganegaraan; url berisi semua informasi yang diperlukan untuk menyajikan gambar.

Terakhir, parameter hash adalah untuk keamanan; Anda hanya ingin servlet Anda menampilkan gambar untuk url yang telah Anda buat. Jadi, saat Anda membuat url, hitung md5(image_url + secret_key)dan tambahkan sebagai parameter hash. Sebelum Anda melayani permintaan, hitung ulang hash dan bandingkan dengan apa yang diteruskan kepada Anda. Karena secret_key hanya diketahui oleh Anda, tidak ada orang lain yang dapat membuat url valid.

Jika Anda mengembangkan aplikasi di java, Servlet hanyalah beberapa baris kode. Anda harus dapat memindahkan kode di bawah ini ke teknologi back-end lainnya.

/*
targetURL is the url you get from RSS feeds
request and response are wrt to the browser
Assumes you have commons-io in your classpath
*/

protected void proxyResponse (String targetURL, HttpServletRequest request,
 HttpServletResponse response) throws IOException {
    GetMethod get = new GetMethod(targetURL);
    get.setFollowRedirects(true);    
    /*
     * Proxy the request headers from the browser to the target server
     */
    Enumeration headers = request.getHeaderNames();
    while(headers!=null && headers.hasMoreElements())
    {
        String headerName = (String)headers.nextElement();

        String headerValue = request.getHeader(headerName);

        if(headerValue != null)
        {
            get.addRequestHeader(headerName, headerValue);
        }            
    }        

    /*Make a request to the target server*/
    m_httpClient.executeMethod(get);
    /*
     * Set the status code
     */
    response.setStatus(get.getStatusCode());

    /*
     * proxy the response headers to the browser
     */
    Header responseHeaders[] = get.getResponseHeaders();
    for(int i=0; i<responseHeaders.length; i++)
    {
        String headerName = responseHeaders[i].getName();
        String headerValue = responseHeaders[i].getValue();

        if(headerValue != null)
        {
            response.addHeader(headerName, headerValue);
        }
    }

    /*
     * Proxy the response body to the browser
     */
    InputStream in = get.getResponseBodyAsStream();
    OutputStream out = response.getOutputStream();

    /*
     * If the server sends a 204 not-modified response, the InputStream will be null.
     */
    if (in !=null) {
        IOUtils.copy(in, out);
    }    
}

Jika Anda mencari solusi cepat untuk memuat gambar melalui HTTPS maka layanan proxy terbalik gratis di https://images.weserv.nl/ mungkin menarik bagi Anda. Itu persis seperti yang saya cari.

Jika Anda mencari solusi berbayar, saya sebelumnya telah menggunakan Cloudinary.com yang juga berfungsi dengan baik tetapi terlalu mahal hanya untuk tugas ini, menurut saya.

Saya tidak tahu apakah ini cocok dengan apa yang Anda lakukan, tetapi sebagai perbaikan cepat saya akan "membungkus" konten http ke dalam skrip https. Misalnya, di halaman Anda yang disajikan melalui https, saya akan memperkenalkan iframe yang akan menggantikan feed rss Anda dan di src attr dari iframe letakkan url skrip di server Anda yang menangkap feed dan mengeluarkan html. skrip membaca umpan melalui http dan mengeluarkannya melalui https (dengan demikian "membungkus")

Hanya pemikiran saja

Mengenai persyaratan kedua Anda - Anda mungkin dapat memanfaatkan acara onerror, yaitu. <img onerror="some javascript;"...

Memperbarui:

Anda juga dapat mencoba melakukan iterasi melalui document.imagesdom. Ada completeproperti boolean yang mungkin bisa Anda gunakan. Saya tidak tahu pasti apakah ini cocok, tetapi mungkin perlu diselidiki.

Akan lebih baik jika memiliki konten http di https

Terkadang seperti di aplikasi facebook kita tidak dapat memiliki konten yang tidak aman di halaman aman. juga kita tidak bisa membuat lokal isinya. misalnya aplikasi yang akan dimuat di iFrame bukanlah konten sederhana dan kami tidak dapat menjadikannya lokal.

Saya pikir kita tidak boleh memuat konten http di https, juga kita tidak boleh mengembalikan halaman https ke versi http untuk mencegah dialog kesalahan.

satu-satunya cara yang akan memastikan keamanan pengguna adalah dengan menggunakan versi https dari semua konten, http://developers.facebook.com/blog/post/499/

Jawaban yang diterima membantu saya memperbarui ini baik ke PHP maupun CORS, jadi saya pikir saya akan menyertakan solusi untuk orang lain:

PHP / HTML murni:

<?php // (the originating page, where you want to show the image)
// set your image location in whatever manner you need
$imageLocation = "http://example.com/exampleImage.png";

// set the location of your 'imageserve' program
$imageserveLocation = "https://example.com/imageserve.php";

// we'll look at the imageLocation and if it is already https, don't do anything, but if it is http, then run it through imageserve.php
$imageURL = (strstr("https://",$imageLocation)?"": $imageserveLocation . "?image=") . $imageLocation;

?>
<!-- this is the HTML image -->
<img src="<?php echo $imageURL ?>" />

javascript / jQuery:

<img id="theImage" src="" />
<script>
    var imageLocation = "http://example.com/exampleImage.png";
    var imageserveLocation = "https://example.com/imageserve.php";
    var imageURL = ((imageLocation.indexOf("https://") !== -1) ? "" : imageserveLocation + "?image=") + imageLocation;
    // I'm using jQuery, but you can use just javascript...        
    $("#theImage").prop('src',imageURL);
</script>

imageserve.php lihat http://stackoverflow.com/questions/8719276/cors-with-php-headers?noredirect=1&lq=1 untuk lebih lanjut tentang CORS

<?php
// set your secure site URL here (where you are showing the images)
$mySecureSite = "https://example.com";

// here, you can set what kinds of images you will accept
$supported_images = array('png','jpeg','jpg','gif','ico');

// this is an ultra-minimal CORS - sending trusted data to yourself 
header("Access-Control-Allow-Origin: $mySecureSite");

$parts = pathinfo($_GET['image']);
$extension = $parts['extension'];
if(in_array($extension,$supported_images)) {
    header("Content-Type: image/$extension");
    $image = file_get_contents($_GET['image']);
    echo $image;
}

Sederhananya: JANGAN LAKUKAN. Konten Http dalam halaman HTTPS secara inheren tidak aman. Titik. Inilah mengapa IE menampilkan peringatan. Menyingkirkan peringatan itu adalah pendekatan omong kosong yang bodoh.

Sebagai gantinya, halaman HTTPS seharusnya hanya memiliki konten HTTPS. Pastikan konten juga dapat dimuat melalui HTTPS, dan referensikan melalui https jika halaman dimuat melalui https. Untuk konten eksternal ini berarti memuat dan menyimpan elemen secara lokal sehingga tersedia melalui https - tentu. Tidak ada jalan lain, sayangnya.

Peringatan itu ada untuk alasan yang bagus. Sungguh. Luangkan 5 menit untuk memikirkan bagaimana Anda dapat mengambil alih https yang ditampilkan halaman dengan konten kustom - Anda akan terkejut.

Saya menyadari bahwa ini adalah utas lama tetapi salah satu pilihan adalah menghapus http: bagian dari URL gambar sehingga ' http: //some/image.jpg ' menjadi '//some/image.jpg'. Ini juga akan bekerja dengan CDN

Cara terbaik bekerja untuk saya

<img src="/path/image.png" />// this work only online
    or
    <img src="../../path/image.png" /> // this work both
    or asign variable
    <?php 
    $base_url = '';
    if($_SERVER['HTTP_HOST'] == 'localhost')
    {
         $base_url = 'localpath'; 
    }
    ?>
    <img src="<?php echo $base_url;?>/path/image.png" />