http - resource - search by image

Tratar con contenido HTTP en páginas HTTPS

Question

Tenemos un sitio al que se accede completamente a través de HTTPS, pero a veces muestra contenido externo que es HTTP (imágenes de fuentes RSS, principalmente). La gran mayoría de nuestros usuarios también están atrapados en IE6.

Idealmente me gustaría hacer las dos cosas siguientes

• Evite el mensaje de advertencia de IE sobre contenido inseguro (para que pueda mostrar uno menos intrusivo, por ejemplo, reemplazando las imágenes con un ícono predeterminado como se muestra a continuación)
• Presente algo útil a los usuarios en lugar de las imágenes que de otra forma no podrían ver; si hubiera algún JS que pudiera ejecutar para descubrir qué imágenes no se han cargado y reemplazarlas con una imagen nuestra, sería genial.

Sospecho que el primer objetivo simplemente no es posible, pero el segundo puede ser suficiente.

En el peor de los casos, analizo los feeds RSS cuando los importamos, tomamos las imágenes y los almacenamos localmente para que los usuarios puedan acceder a ellos de esa manera, pero parece mucho dolor por una ganancia razonablemente pequeña.

Answer 1

A veces, como en las aplicaciones de Facebook, no podemos tener contenidos no seguros en una página segura. tampoco podemos hacer local esos contenidos. por ejemplo, una aplicación que se cargará en iFrame no es un contenido simple y no podemos hacerlo local.

Creo que nunca deberíamos cargar contenido http en https, tampoco deberíamos recurrir a la página https a la versión http para evitar el diálogo de error.

la única forma de garantizar la seguridad del usuario es utilizar la versión https de todos los contenidos, http://developers.facebook.com/blog/post/499/

Answer 2

Con respecto a su segundo requisito, es posible que pueda utilizar el evento onerror, es decir. <img onerror="some javascript;"...

Actualizar:

También podría intentar iterar a través de document.images en el dom. Hay una propiedad booleana complete que puede usar. No estoy seguro de si esto será adecuado, pero podría valer la pena investigarlo.

Answer 3

La respuesta aceptada me ayudó a actualizar esto tanto en PHP como en CORS, así que pensé que incluiría la solución para otros:

puro 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 vea http://.com/questions/8719276/cors-with-php-headers?noredirect=1&lq=1 para más información sobre 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;
}

Answer 4

Lo mejor sería tener el contenido http en https

Answer 5

Me doy cuenta de que este es un hilo antiguo, pero una opción es simplemente eliminar el http: parte de la URL de la imagen para que '' http://some/image.jpg '' se convierta en ''//some/image.jpg''. Esto también funcionará con CDN

Answer 6

No sé si esto se ajustaría a lo que está haciendo, pero como una solución rápida "envolvería" el contenido http en un script https. Por ejemplo, en su página que se sirve a través de https, introduciría un iframe que reemplazaría su rss feed y en el atributo src del iframe colocará una url de un script en su servidor que capture el feed y emita el html. el script está leyendo el feed a través de http y lo envía a través de https (por lo tanto, "wrapping")

Solo un pensamiento

Answer 7

Si está buscando una solución rápida para cargar imágenes a través de HTTPS, puede que le interese el servicio de proxy inverso gratuito en https://images.weserv.nl/ . Era exactamente lo que estaba buscando.

Si está buscando una solución paga, anteriormente utilicé Cloudinary.com, que también funciona bien, pero es demasiado caro solo para esta tarea, en mi opinión.

Answer 8

Simplemente: NO LO HAGAS. El contenido Http dentro de una página HTTPS es inherentemente inseguro. Punto. Es por eso que IE muestra una advertencia. Deshacerse de la advertencia es un enfoque estúpido.

En cambio, una página HTTPS solo debe tener contenido HTTPS. Asegúrese de que el contenido también se pueda cargar a través de HTTPS, y hágalo referencia a través de https si la página se carga a través de https. Para el contenido externo, esto significa cargar y almacenar en caché los elementos localmente para que estén disponibles a través de https - seguro. No hay forma de evitar eso, por desgracia.

La advertencia está ahí por una buena razón. Seriamente. Dedique 5 minutos a pensar cómo podría hacerse cargo de una página https mostrada con contenido personalizado: se sorprenderá.

Answer 9

Tu peor caso no es tan malo como crees.

Ya está analizando el canal RSS, por lo que ya tiene las URL de la imagen. Supongamos que tiene una URL de imagen como http://otherdomain.com/someimage.jpg . Reescribe esta URL como https://mydomain.com/imageserver?url=http://otherdomain.com/someimage.jpg&hash=abcdeafad . De esta forma, el navegador siempre solicita más de https, por lo que puede deshacerse de los problemas.

La siguiente parte: crear una página proxy o servlet que haga lo siguiente:

1. Lea el parámetro url de la cadena de consulta y verifique el hash
2. Descargue la imagen del servidor y deleguela de nuevo al navegador
3. Opcionalmente, almacenar en caché la imagen en el disco

Esta solución tiene algunas ventajas. No tiene que descargar la imagen al momento de crear el html. No tiene que almacenar las imágenes localmente. Además, eres apátrida; la url contiene toda la información necesaria para servir la imagen.

Finalmente, el parámetro hash es para seguridad; solo quiere que su servlet sirva imágenes para las URL que ha construido. Entonces, cuando crea la url, calcule md5(image_url + secret_key) y md5(image_url + secret_key) como el parámetro hash. Antes de atender la solicitud, vuelva a calcular el hash y compárelo con lo que se le pasó. Como secret_key solo lo conoce, nadie más puede construir URL válidas.

Si está desarrollando en Java, el Servlet es solo unas pocas líneas de código. Debería poder portar el código a continuación en cualquier otra tecnología de back-end.

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

Answer 10

La mejor manera de trabajar para mí

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