soy Kseso y esto EsCSS

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

avatar del Editor del blog

the obCSServer ᛯ 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 Kseso