wake-up-neo.net

Umgang mit HTTP-Inhalten auf HTTPS-Seiten

Wir haben eine Site, auf die vollständig über HTTPS zugegriffen wird, aber manchmal externe Inhalte - HTTP (Bilder hauptsächlich aus RSS-Feeds). Die große Mehrheit unserer Nutzer steckt auch im IE6.

Im Idealfall möchte ich beides machen

  • Verhindern Sie die Warnmeldung IE zu unsicherem Inhalt (damit ich einen weniger aufdringlichen Inhalt anzeigen kann, z. B. durch Ersetzen der Bilder durch ein Standardsymbol wie unten).
  • Präsentieren Sie den Benutzern etwas Nützliches anstelle der Bilder, die sie sonst nicht sehen können. Wenn es einige JS gäbe, könnte ich rennen, um herauszufinden, welche Bilder nicht geladen wurden, und sie stattdessen durch ein Bild von uns ersetzen würden. Das wäre großartig.

Ich vermute, dass das erste Ziel einfach nicht möglich ist, aber das zweite kann ausreichen.

Im schlimmsten Fall kann ich die RSS-Feeds beim Importieren analysieren und die Bilder lokal speichern, sodass die Benutzer auf diese Weise darauf zugreifen können. Es scheint jedoch sehr schmerzhaft zu sein, wenn es nur wenig Gewinn bedeutet.

86
El Yobo

Ihr Worst-Case-Szenario ist nicht so schlimm wie Sie denken.

Sie analysieren den RSS-Feed bereits, sodass Sie bereits über die Bild-URLs verfügen. Angenommen, Sie haben eine Bild-URL wie http://otherdomain.com/someimage.jpg. Sie schreiben diese URL als https://mydomain.com/imageserver?url=http://otherdomain.com/someimage.jpg&hash=abcdeafad um. Auf diese Weise stellt der Browser immer Anfragen über https ab, damit Sie die Probleme beseitigen können.

Der nächste Teil - Erstellen Sie eine Proxy-Seite oder ein Servlet, das die folgenden Aufgaben ausführt - 

  1. Lesen Sie den URL-Parameter aus der Abfragezeichenfolge, und überprüfen Sie den Hash
  2. Laden Sie das Bild vom Server herunter und geben Sie es an den Browser zurück
  3. Zwischenspeichern Sie das Image optional auf der Festplatte

Diese Lösung hat einige Vorteile. Sie müssen das Bild zum Zeitpunkt der Erstellung der HTML-Datei nicht herunterladen. Sie müssen die Bilder nicht lokal speichern. Sie sind auch staatenlos. Die URL enthält alle Informationen, die zur Bereitstellung des Bildes erforderlich sind. 

Der Hash-Parameter dient schließlich der Sicherheit. Ihr Servlet soll nur Bilder für von Ihnen erstellte URLs bereitstellen. Wenn Sie also die URL erstellen, müssen Sie md5(image_url + secret_key) berechnen und als Hash-Parameter anhängen. Bevor Sie die Anfrage abliefern, berechnen Sie den Hash erneut und vergleichen Sie ihn mit dem, was an Sie übergeben wurde. Da der secret_key nur Ihnen bekannt ist, kann niemand anderes gültige URLs erstellen.

Wenn Sie in Java entwickeln, umfasst das Servlet nur wenige Codezeilen. Sie sollten den folgenden Code auf jede andere Back-End-Technologie portieren können.

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

Wenn Sie nach einer schnellen Lösung zum Laden von Bildern über HTTPS suchen, kann der kostenlose Reverse Proxy-Dienst unter https://images.weserv.nl/ Sie interessieren. Es war genau das, wonach ich gesucht hatte. 

Wenn Sie nach einer kostenpflichtigen Lösung suchen, habe ich zuvor Cloudinary.com verwendet, was ebenfalls gut funktioniert, aber meiner Meinung nach allein für diese Aufgabe zu teuer ist.

11
nullable

Ich weiß nicht, ob dies zu dem passt, was Sie tun, aber als schnelle Lösung würde ich den http-Inhalt in ein https-Skript "einpacken". Zum Beispiel würde ich auf Ihrer durch https bereitgestellten Seite einen iframe einführen, der Ihren RSS-Feed ersetzen würde, und im src-attr des iframe eine URL eines Skripts auf Ihrem Server einfügen, das den Feed erfasst und die HTML-Datei ausgibt. Das Skript liest den Feed über http und gibt ihn über https aus ("wrapping").

Nur ein Gedanke

3
Raine

In Bezug auf Ihre zweite Anforderung - Sie können möglicherweise das Ereignis onerror verwenden, d. <img onerror="some javascript;"...

Aktualisieren:

Sie können auch versuchen, document.images im Dom zu durchlaufen. Es gibt eine boolesche complete-Eigenschaft, die Sie möglicherweise verwenden können. Ich weiß nicht genau, ob dies geeignet ist, aber es lohnt sich, dies zu untersuchen.

2
UpTheCreek

Am besten ist es, den http-Inhalt nur auf https zu haben

0
Daniel

Die akzeptierte Antwort hat mir geholfen, das Update sowohl auf PHP als auch auf CORS zu aktualisieren. Daher dachte ich, ich würde die Lösung für andere hinzufügen:

reines 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 siehe http://stackoverflow.com/questions/8719276/cors-with-php-headers?noredirect=1&lq=1 für weitere Informationen zu 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;
}
0
CFP Support

Manchmal, wie in Facebook-Apps, können wir keine sicheren Inhalte auf der sicheren Seite haben. Wir können diese Inhalte auch nicht lokal erstellen. Beispielsweise ist eine App, die in iFrame geladen wird, kein einfacher Inhalt, und wir können sie nicht lokal machen.

Ich denke, wir sollten niemals http-Inhalte in https laden, auch sollten wir die https-Seite nicht auf die http-Version zurückgreifen, um Fehlerdialog zu verhindern.

die einzige Möglichkeit, die Sicherheit der Benutzer zu gewährleisten, besteht in der Verwendung der https-Version aller Inhalte. http://developers.facebook.com/blog/post/499/

0