Mis proyectos: Como cambiar un iframe de http a https

Continuando con la temática de Wordpress, muestro ahora un truco muy simple, que si bien no es de Wordpress, bien lo podemos usar en este gestor de sitios web o en algún desarrollo propio. Uno de los mayores problemas que encontramos en Internet es que, un sitio web montado en un servidor típico (HTTP) puede incrustar contenido seguro desde otro servidor (HTTPS), pero no al revés, si lo intentamos, por razones de seguridad el navegador web bloquea el contenido del iframe, la solución es: o los dos son HTTP o los dos son HTTPS. Pero hoy te voy a mostrar un truco para superar ese problema, nota: solo funciona si en tu servidor tienes soporte para HTTPS y si el iframe a cargar está en tu servidor.

El protocolo de transferencia segura de hipertexto (HTTPS) según Wikipedia es el siguiente paso de HTTP, bajo HTTP la información que se transmite hacia un servidor web no va encriptada, por lo que es vulnerable a ser interceptada, HTTPS por su parte encripta la información de manera que si hay "alguien" por ahí husmeando no se entere de lo que estamos enviando.¹

HTTPS es ideal entonces para tiendas online, el problema es que si estamos bajo HTTPS y tenemos la necesidad de cargar un iframe bajo HTTP pues no vamos a poder, el truco es entonces "forzar" a que ese iframe se cargue como HTTPS siempre y cuando la conexión halla cambiado de HTTP a HTTPS.

En la parte final de nuestro archivo colocaremos el siguiente código fuente:

//thanks to https://stackoverflow.com/questions/1452678/count-of-all-iframe-tags-in-a-page
for(i=0; i<document.getElementsByTagName("iframe").length; i++)
if(document.getElementsByTagName("iframe")[i].src != "" && document.getElementsByTagName("iframe")[i].src != "undefined")
    if(location.href.toLowerCase().indexOf("https://") >= 0)
      document.getElementsByTagName("iframe")[i].src = document.getElementsByTagName("iframe")[i].src.replace("http://", "https://");

</script>

El funcionamiento es muy simple, recorremos con un ciclo For todos los iframes de nuestro documento, cuando encontremos uno y si estamos bajo una conexión HTTPS (detectado por location.href.toLowerCase().indexOf("https://") le cambiamos al iframe en cuestión la ruta por HTTPS y lo recargamos, listo. Ahora ya se ve bajo nuestra web HTTPS.

Espero les sea de mucha utilidad.

Procedencia de las imágenes:

File: Logo base de datos
URL: https://www.returngis.net/wp-content/uploads/2013/05/HTML-logo.jpg
Licencia: Creative Commons

Referencias:

1.- HTTPS: así funciona

¿Te gustó este post?, entonces si lo deseas puedes apoyarnos para continuar con nuestra labor, gracias.