Cargar imágenes desde sitios HTTP no seguros y mostrar con HTTPS

Weserv es un proyecto gratis y de software libre que posibilita cargar imágenes a través del CDN de Cloudflare, modificando varios parámetros como su tamaño, relación de aspecto, orientación e insertarlas en nuestro sitio.
Las imágenes se cargan de su sitio de origen aunque no tenga habilitado SSL y nosotros podemos insertarlas en nuestro sitio con HTTPS.
Algo sencillo que soluciona completamente el bloqueo de imágenes por contenido mezclado, que sufren miles de páginas de internet.
Este problema que afecta a infinidad de webs, se ha afectado después del lanzamiento de la versión 81 del navegador Google Chrome, que imposibilita totalmente que las paginas carguen contenido desde sitios inseguros (Load Mixed Content).
En este artículo explico cómo hacerlo con ejemplos prácticos.

Insertar imágenes desde un sitio HTTP

Es algo sencillo usar el proyecto de images.weserv.nl.
Para insertar una imagen externa en una página, solo debemos conocer lógicamente su dirección URL de origen.
A continuación usamos el parámetro necesario para definir como se deben cargar.
Un ejemplo.
La siguiente imagen se carga desde un sitio no seguro "meteoro.insmet.cu" que usa el protocolo HTTP.
Sin importar la dimensión original de la imagen, especifico que se muestre en esta página a 640 pixeles de ancho.
Para eso le agrego a la dirección URL de la imagen: w=680
Imagen cargada desde un sitio no seguro HTTP y cambiando su ancho

<img src="//images.weserv.nl/?url=meteoro.insmet.cu/Pronostico/tv06.jpg&w=680>

Puedes guardar la imagen anterior y comprobar que su ancho es de 680 pixeles. El ancho original es mucho mayor.
Lógicamente, podemos mostrar la imagen a su tamaño natural y también especificar su altura o calcularla para mantener su relación de aspecto o incluso transformarla.

Otros parámetros

Se pueden precisar varios parámetros, entre ellos el ancho, altura, recortar, rotar, invertir, fondo, añadir blur, brillo, contraste, cache-control, calidad y muchos otros, los que se pueden consultar en la página de Referencia rápida.
Otra imagen de ejemplo.
En el siguiente ejemplo inserto una imagen del servicio meteorológico "intellicast.com", que no provee SSL y para asegurar que se muestra la más reciente, uso el parámetro de Cache-level, para que se refresque cada día.
Para eso le agrego a la dirección URL de la imagen: maxage=1d
Foto de satélite que se refresca cada día usando Cache-level

<img src="//images.weserv.nl/?url=images.intellicast.com/WxImages/Satellite/hicbsat.gif&w=768&h=496&maxage=1d">

Más información en las FAQ o preguntas frecuentes.

Más información sobre el proyecto Weserv

En este artículo explico cómo usar el proyecto Weserv, instalado en el subdominio images.weserv.nl.
También tenemos la opción de instalar este proyecto en nuestro propio servidor, aprovechando que es software libre.
Los archivos con las instrucciones del proyecto podemos encontrarlo en Github.

Cargar imagen descargada previamente al servidor

Otro método más complejo consiste en descargar previamente con PHP la imagen a nuestro servidor desde el sitio no seguro y a continuación cargarla con el navegador web.
Se puede hacer de dos formas: con el método básico y mediante cURL (más seguro).
Código de los dos ejemplos

<?php   
$url = 'http://ruta-imagen.jpg';    
$img = 'imagen.jpg';    
file_put_contents($img, file_get_contents($url));  
?> 
<img src="imagen.jpg"><br>

<?php   
function file_get_contents_curl($url) { 
    $ch = curl_init();   
    curl_setopt($ch, CURLOPT_HEADER, 0); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
    curl_setopt($ch, CURLOPT_URL, $url);   
    $data = curl_exec($ch); 
    curl_close($ch);   
    return $data; 
}   
$data = file_get_contents_curl('http://ruta-imagen.jpg');   
$fp = 'imagen.jpg';   
file_put_contents( $fp, $data );   
?> 
<img src="imagen.jpg"><br>

Páginas relacionadas



Comparte

Sígueme en las redes sociales