miércoles, 27 de julio de 2016

Convertir nuestro blog de Blogger bajo HTTP en HTTPS y eliminar advertencias de contenido mixto

Este día me ha dado a la tarea de actualizar el sitio luego de algún tiempo de negligencia y hasta ahora me di cuenta que Blogger ofrece la posibilidad de hacer un upgrade de la conexión a HTTPS, lo que me puede traer muchos beneficios ante Google y otros sitios web.

Todos puede hacer este proceso, pero el problema llega cuando al hacer la conversión aparece una advertencia de que la conexión no es segura.

Si tratas de modificar la plantilla, aparecerá la siguiente advertencia:

La edición de la plantilla de manera que combine HTTP y HTTPS puede afectar la seguridad y la experiencia del usuario en tu blog cuando este se ve a través de una conexión HTTPS. 

Antes de ver el problema vamos a ver como hacemos la conversión.

Como convertir un blog HTTP a HTTPS
1. Vamos a Configuración - Básica:
2. En HTTPS cambiamos la casilla de No a Sí.
No sé cuanto tiempo tardará la redirección en los buscadores de Google, no debería existir un cambio perceptible de forma negativa en el cambio a HTTPS.

El resultado del cambio
Para el caso de Firefox, habrá tres íconos para advertir de una conexión insegura en la barra de direcciones, si no usamos HTTPS aparecerá un candado gris y una raya roja, el candado gris y verde con una advertencia dependiendo de la seguridad de tu web, el candado verde es de un sitio verificado, pero la advertencia anuncia contenido inseguro de clase HTTP, por ejemplo: Un script o una imagen con una dirección que empieza en HTTPS, si es gris el candado, hay un elemento dentro de la página inseguro, además de que no es una conexión segura.
El objetivo es que aparezca un candado verde sin ninguna advertencia:
Para lograrlo tenemos que seguir los siguientes pasos:

1. Vamos a Plantilla - Editar HTML:
2. Damos clic dentro de la caja de código y pulsamos las teclas CTRL+F para abrir la casilla de búsqueda de código (Esto lo hago desde Firefox), dentro de la casilla escribimos "http:" sin las comillas y pulsamos Entrar:
3. Cada que pulsemos la tecla Entrar nos llevará a un elemento de texto con un fragmento "HTTP:", así que primero deberemos reemplazar los elementos HTTP:  por HTTPS cuando sean imágenes y vínculos a páginas alojadas en Blogger y/o Google, porque automáticamente se transformaran en HTTPS, por ejemplo, el caso de fuentes:
Y lo cambiamos a:
Para una imagen almacenada en Blogger/Picasa/Google Photos:
Y lo cambiamos a:
Así lo hacemos con cualquier dirección dentro de la plantilla que apunte a un servidor de Google.
Advertencia, no use esto dentro de <!DOCTYPE> o las direcciones dentro de la etiqueta <html>.

Archivos de Javascripts
La parte más complicada es que no todos los scripts en nuestras plantillas estarán almacenadas en un servidor con soporte HTTPS, la manera de comprobar esto es por ejemplo; En la dirección http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js si la copiamos y pegamos en la barra de direcciones veremos que funcionará tanto en https como en http. Así que cambiarla a https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js no dará ningún problema.

Sin embargo, si no es posible obtener un archivo Javascript en un servidor HTTPS (Usa Google Drive) tendrán que retirar el script o insertarlo en el código fuente.

La manera de insertar javascript dentro de cualquier sección entre <head> y </head> es usar CDATA para que la API de Blogger no detecte la ejecución en plantilla:
<script type='text/javascript'>
  //<![CDATA[
Contenido del script.
  //]]>
</script>
Si utiliza el script de ShareThis, debe ir a la página web de Sharethis y tomar nuevamente el complemento que tiene la opción de HTTPS remover el viejo, insertar //<![CDATA[ y //]]>.
Una vez actualicemos todos estas direcciones pulsamo en Guardad Plantilla:
Actualizar Gadgets
Los Gadgets contienen Scripts, enlaces e imágenes que están fuera de la plantilla, si bien no es necesario actualizar los enlaces o vínculos, por fuerza deben modificar, actualizar o remover cualquier Script o imagen que no estén almacenados en una dirección https.

1. Vamos a Diseño y vamos a modificar todos los complementos con scripts e imágenes bajo https, si no hay alternativa y son de terceros, es mejor eliminar cualquier Script que no esté almacenado en una dirección HTTPS:
2. Pulsamos en Editar en el Gadget que sea de HTML/Javascript y de Texto, que son donde podemos meter contenido propio:
3. Como vemos aquí, el cambio no toma mucho y podemos fácilmente hacer que nuestro sitio sea seguro, una vez terminamos pulsamos en Guardar.
Si ustedes tienen servicios de contadores de visitas como Statcounter, les recomiendo sacar una versión actualizada del Script, si no, deberán eliminar el contador o la advertencia de seguridad seguirá activa.

Recuerden que en los Gadgets no es necesario usar CDATA para envolver el Script.

El resultado
Deberemos ver el candado verde sin advertencias en la barra de direcciones y esto debe comprobarse en los tres navegadores (Edge, Chrome y Firefox).
Al navegar por el sitio no deberán aparecer más advertencias, en ese momento su sitio será un sitio HTTPS seguro y certificado por Google Inc.

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com