Tratar con contenido HTTP en páginas HTTPS

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 fonts 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 objective 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.

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 

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.

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

Con respecto a su segundo requisito, es posible que pueda utilizar el evento onerror, es decir.

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.

Lo mejor sería tener el contenido http en https

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/

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:

    

javascript / jQuery:

   

imageserve.php vea http://stackoverflow.com/questions/8719276/cors-with-php-headers?noredirect=1&lq=1 para más información sobre CORS

  

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á.

La mejor manera de trabajar para mí

 // this work only online or  // this work both or asign variable   

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