Obsługa treści HTTP na stronach HTTPS

Mamy witrynę, do której można uzyskać dostęp w całości przez HTTPS, ale czasami wyświetlamy zawartość zewnętrzną, którą jest HTTP (głównie obrazy z kanałów RSS). Zdecydowana większość naszych użytkowników utknęła również w IE6.

Idealnie chciałbym wykonać obie poniższe czynności

• Zapobiegaj wyświetlaniu ostrzeżenia IE o niezabezpieczonej zawartości (abym mógł pokazać mniej inwazyjną, np. Zastępując obrazy domyślną ikoną jak poniżej)
• Przedstaw użytkownikom coś pożytecznego zamiast obrazów, których inaczej nie mogliby zobaczyć; gdyby był jakiś JS, który mógłbym uruchomić, aby dowiedzieć się, które obrazy nie zostały załadowane i zastąpić je naszym obrazem, byłoby świetnie.

Podejrzewam, że pierwszy cel jest po prostu niemożliwy, ale drugi może wystarczyć.

Najgorszym scenariuszem jest to, że analizuję kanały RSS, kiedy je importujemy, pobieram obrazy i przechowuję je lokalnie, aby użytkownicy mieli do nich dostęp w ten sposób, ale wydaje się, że jest to dużo bólu przy stosunkowo niewielkim zysku.

Twój najgorszy scenariusz nie jest taki zły, jak myślisz.

Już analizujesz kanał RSS, więc masz już adresy URL obrazów. Załóżmy, że masz adres URL obrazu, taki jak http://otherdomain.com/someimage.jpg. Przepisujesz ten adres URL jako https://mydomain.com/imageserver?url=http://otherdomain.com/someimage.jpg&hash=abcdeafad. W ten sposób przeglądarka zawsze wysyła żądania przez https, więc pozbywasz się problemów.

Następna część - utwórz stronę proxy lub serwlet, który wykonuje następujące czynności -

1. Przeczytaj parametr url z ciągu zapytania i zweryfikuj skrót
2. Pobierz obraz z serwera i proxy go z powrotem do przeglądarki
3. Opcjonalnie buforuj obraz na dysku

To rozwiązanie ma kilka zalet. Nie musisz pobierać obrazu w momencie tworzenia HTML. Nie musisz przechowywać obrazów lokalnie. Ponadto jesteś bezpaństwowcem; adres URL zawiera wszystkie informacje niezbędne do wyświetlenia obrazu.

Wreszcie parametr hash służy do celów bezpieczeństwa; chcesz, aby serwlet obsługiwał obrazy tylko dla utworzonych adresów URL. Tak więc podczas tworzenia adresu URL oblicz go md5(image_url + secret_key)i dołącz jako parametr hash. Zanim obsłużysz żądanie, ponownie oblicz skrót i porównaj go z tym, co zostało Ci przekazane. Ponieważ tajny_klucz jest znany tylko Tobie, nikt inny nie może tworzyć prawidłowych adresów URL.

Jeśli tworzysz w Javie, serwlet to tylko kilka linijek kodu. Powinieneś być w stanie przenieść poniższy kod do dowolnej innej technologii zaplecza.

/*
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);
    }    
}

Jeśli szukasz szybkiego rozwiązania do ładowania obrazów przez HTTPS, może Cię zainteresować bezpłatna usługa odwrotnego proxy pod adresem https://images.weserv.nl/ . To było dokładnie to, czego szukałem.

Jeśli szukasz płatnego rozwiązania, korzystałem wcześniej z Cloudinary.com, który również działa dobrze, ale moim zdaniem jest zbyt drogi tylko do tego zadania.

Nie wiem, czy pasowałoby to do tego, co robisz, ale w ramach szybkiego rozwiązania „opakowałbym” zawartość http w skrypt https. Na przykład na twojej stronie, która jest obsługiwana przez https, wprowadziłbym iframe, który zastąpiłby twój kanał rss, a w atr src elementu iframe umieściłbym na serwerze adres URL skryptu, który przechwytuje kanał i wyprowadza HTML. skrypt czyta kanał przez http i wyprowadza go przez https (czyli „zawija”)

Tylko myśl

Jeśli chodzi o twoje drugie wymaganie - możesz być w stanie wykorzystać zdarzenie onerror, tj. <img onerror="some javascript;"...

Aktualizacja:

Możesz także spróbować wykonać iterację document.imagesw dom. Istnieje completewłaściwość logiczna, której możesz użyć. Nie wiem na pewno, czy to będzie odpowiednie, ale warto zbadać.

Najlepiej byłoby po prostu mieć zawartość http na https

Czasami, podobnie jak w aplikacjach na Facebooku, nie możemy mieć niezabezpieczonych treści na bezpiecznej stronie. nie możemy też tworzyć lokalnych treści. na przykład aplikacja, która będzie ładowana w iFrame, nie jest prostą treścią i nie możemy uczynić jej lokalną.

Myślę, że nigdy nie powinniśmy ładować zawartości http w https, a także nie powinniśmy zmieniać strony https na wersję http, aby zapobiec wyświetlaniu okna błędu.

jedynym sposobem, który zapewni bezpieczeństwo użytkownika, jest korzystanie z wszystkich treści w wersji https, http://developers.facebook.com/blog/post/499/

Zaakceptowana odpowiedź pomogła mi zaktualizować to zarówno do PHP, jak i CORS, więc pomyślałem, że dołączę rozwiązanie dla innych:

czysty PHP / HTML:

<?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 Zobacz http://stackoverflow.com/questions/8719276/cors-with-php-headers?noredirect=1&lq=1, aby uzyskać więcej informacji na temat 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;
}

Po prostu: NIE Rób tego. Treść HTTP na stronie HTTPS jest z natury niepewna. Punkt. Dlatego IE wyświetla ostrzeżenie. Pozbycie się ostrzeżenia to głupie podejście.

Zamiast tego strona HTTPS powinna zawierać tylko zawartość HTTPS. Upewnij się, że treść może być ładowana również przez HTTPS i odwołaj się do niej przez https, jeśli strona jest ładowana przez https. W przypadku treści zewnętrznych będzie to oznaczać ładowanie i buforowanie elementów lokalnie, tak aby były dostępne przez https - jasne. Niestety nie da się tego obejść.

Ostrzeżenie jest tam z dobrego powodu. Poważnie. Poświęć 5 minut na zastanowienie się, jak przejąć wyświetlaną stronę https z niestandardową zawartością - będziesz zaskoczony.

Zdaję sobie sprawę, że jest to stary wątek, ale jedną z opcji jest po prostu usunięcie http: części z adresu URL obrazu, aby „ http: //some/image.jpg ” stało się „//some/image.jpg”. Będzie to również działać z sieciami CDN

Najlepszy sposób na pracę dla mnie

<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" />