Protocolo HTTPS en Blogger: cómo activar la conexión segura ¡ya!

Cómo habilitar el protocolo HTTPS en los blogs de Blogger y forzar que las conexiones se hagan de forma segura y privada ya.

Protocolo HTTPS en Blogger: cómo activar la conexión segura ¡ya!

Por Kseso ✎ 6
Protocolo HTTPS en Blogger: cómo activar la conexión segura

Ayer mismo se inundaron los lugares habituales de los usuarios de Blogger con el anuncio de que los chicos del código habían habilitado la opción Disponibilidad de HTTPS en sus blogs.

Pero... (sí, siempre hay algún pero) aunque piques y digas bien alto Sí, lo quiero de momento no se activará la conexión segura ni aparecerá el tan ansiado candado en la barra de direcciones junto a la url de tu blog.

Pero como uno es y hace gala de ser un enredique (y no sólo de Css) no pude evitar la tentación de jugar con este nuevo regalito y activarlo.

Porque pese a que la conexión no se haga bajo este protocolo sí que está ahí agazapada y disponible. Si tú también activaste la opción en el panel de control del blog (Configuración → Lo básico → Configuración de HTTPS) puedes verificando escribiendo la url con este protocolo: https://tublog.blogspot.com

Activando la conexión Https en Blogger

Antes de tocar el código ¡haz copia de seguridad!
Si tocas algo de tu código será bajo tu entera y única responsabilidad. No se admiten reclamaciones si haces algo de lo que aquí expongo y te toca la china.

Si quieres que también te aparezca el candadito así lo hice yo:

El blog servido bajo conexión segura

En primer lugar

  1. Me aseguré que los recursos que cargo se realicen con bajo el mismo protocolo https. Especialmente imágenes y scripts:
    • Con las imágenes de portada de los asides (las pequeñas) son cargadas mediante los scripts que generan al azar los enlaces. Están alojadas en servicios de Google. Así que en dichos scripts añadí un replace() para arreglarlo: .replace("http,https")
    • La mayoría de códigos js utilizados están en el propio template, así que por ese lado nada que hacer.
  2. A continuación busque cualquier otro recurso (favicones, alguna imagen, algún js de terceros como el de codepen...) y vi si la página dispone de conexión privada (https). Si lo tiene lo modifiqué y si no prescindí del protocolo, dejando su destino sin él. Esto lo amplió al final.

Una vez asegurado que que los recursos de terceros los cargaba bajo el protocolo HTTPS (o sin él) lo siguiente fue forzar el que Blogger siva el blog sólo bajo este tipo de conexión segura.

Como desde hace tiempo tengo en el head un pequeño script para evitar los redireccionamientos por país de conexión lo aproveché para incluir en ese mismo script una función que fuerce (reemplaza) un protocolo por otro. Quedó tal que así:

//<![CDATA[ (function(){ // Evito la redirección por país var URL = document.URL, reg = /\.blogspot\.(com\...|..)\// if( URL.match( reg ) ){ window.location = URL.replace( reg, ".blogspot.com\/ncr\/" ); } // Cambio al protocolo https if (window.location.protocol == "http:") { var urlSegura = window.location.href.substr(5); window.location = "https:" + urlSegura; } })() //]]>

Los que me conocéis ya sabéis de mi ignorancia en js. Así que dichos códigos no son creación propia. Creo recordar que el el primero es de Emilio Cobos y el segundo buceando en Stackoverflow.

Evita errores por recursos vía HTTP

Hay veces que no hay otra que cargar un recurso de un dominio que no cuenta con conexión segura. Así que su dirección se resuelve siempre e ineludiblemente bajo Http.

En estos casos lo mínimo que puede ocurrir es que tengas una advertencia y el candado aparezca con el aviso de contenido no cifrado en el mejor de los casos o que directamente dicho contenido sea bloqueado por el navegador.

Para evitarlo sólo tienes que escribir la ruta a dicho recurso sin el http inicial. Tal que así:

<!-- marca error --> <img src='http://dominio.ext/pic-jpg' alt /> <!-- evita el error --> <img src='//dominio.ext/pic-jpg' alt />

Cómo saber qué elementos no cargan bajo Https

Si usas Chrome y su inpsector de código es muy fácil saber qué recursos chocan con tu conexión segura por estar en un dominio que no usa este protocolo: lo tienes en la pestaña console

Amplía información

Recomendable que antes de hacer nada leas la información oficial sobre el particular:

Un favor

Y para poner punto final a esta entrada sólo me resta pedirte que me digas en un comentario si adviertes algún fallo, error o comportamiento no deseado del blog tras haber habilitado el cifrado o conexión segura.

Tuve un pequeño susto con los pens de Codepen insertados. Creo que debido a la actualización del sitio que realizaron hoy. Pero ya pasó y en estos momentos creo que vuelven a cargarse y visualizarse sin mayor problema.

Antes de tocar el código ¡haz copia de seguridad!
Si tocas algo de tu código será bajo tu entera y única responsabilidad. No se admiten reclamaciones si haces algo de lo que aquí expongo y te toca la china.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 6

  1. Hola Don Kseso,
    Enhorabuena, oficialmente se ha convertido en un mejor ciudadano de la Web ;) También veo que tiene un nuevo diseño en blog! Algo me hace pensar que a alguien por ahí el gusta la cervecita...¿o no?

    Tu blog carga bien, los widgets te funcionan todos y las imágenes las veo todas.

    da gusto conocer tu experiencia en el proceso de la migración. Voy a recomendar tu entrada.

    Hay una serie de consideraciones importantes como las que mencionas sobre usar la URIs relativas. Se me viene en mente aquellos usuarios que utilizan jQuery en el blog, y utilicen una versión no cifrada, habrá problemas con esa inconsistencia y habrá que corregirla.

    Lo dejo por si a alguien le sirve. Si usas jQuery hay que usar la versión segura "https" o mejor todavía usar la URL relativa, es decir sin "http" o "https":

    <script src="//ajax.googleapis.com/ajax/libs/jquery/x.y.z/jquery.min.js" />

    Me intrigaba si iba a ser necesario hacer redireccionamientos 301 en los casos de aquellos enlaces que apunten al blog con la URL anterior. Pero parece que no es necesario.

    Este video lo recomiendo ámpliamente. Sobre todo a aquellos que estén reacios en usar protocolo HTTPS en su blog por que lo consideren innecesario. A mi me aclaró muchas cosas y me motivo/inspiro:

    https://youtu.be/cBhZ6S0PFCY


    Estoy viendo la forma de usar migrar el blog de HTTP a HTTPS sin que ésto represente un costo alto. Así que ando viendo lo del alojamiento.

    Un abrazo Don Kseso.

    ResponderEliminar
    Respuestas
    1. Perdón por la "d" minúscula...Fue error de "dedo" xD

      Eliminar
    2. Gracias Karla
      Si el compartir mi experiencia puede ayudar a alguien, perfecto. Ese es el fin de este blog.

      Lo de la cerverza sólo es un "guiño" a la licencia del Blog: Beerware.

      Un saludo y espero que podáis disponer cuanto antes del protocolo https también en los blogs con url propia.

      Eliminar
    3. por : Karla Castañeda.
      «Perdón por la "d" minúscula...Fue error de "dedo" xD»

      [offtopic] Amo a la gente que se preocupa hasta por esos detalles. Pero no insisto mucho con esto porque alguien se puede poner celoso. :-) . [/offtopic]

      Eliminar
  2. Funciona perfecto, tanto la anulación de la redirección geográfica como el force https, muchas gracias :D

    ResponderEliminar
    Respuestas
    1. Un placer, Ignacio, si te resultó de ayuda.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap