Protocolo HTTPS en Blogger: cómo activar la conexión segura ¡ya! 1.10.15
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!
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:
En primer lugar
- 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.
- 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
- 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:
- Proteger un sitio con el protocolo HTTPS de support.google
- Blogger lanza de forma gradual soporte para HTTPS por Jesús EV en los foros de Google.
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.
Kseso
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
Hola Don Kseso,
ResponderEliminarEnhorabuena, 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.
Perdón por la "d" minúscula...Fue error de "dedo" xD
EliminarGracias Karla
EliminarSi 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.
por : Karla Castañeda.
Eliminar«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]
Funciona perfecto, tanto la anulación de la redirección geográfica como el force https, muchas gracias :D
ResponderEliminarUn placer, Ignacio, si te resultó de ayuda.
EliminarUn saludo
Si señor, gracias a esta entrada he podido solucionar un error en el certificado... Después de comerme tanto al cabeza, resulta que era una imagen de un widget de "Entradas Recientes" que estaba alojado mediante "http" y no "https". Subo la imagen a Google y solucionado el error... Respecto al código de forzar que expones, he de decir que en mi caso me bloquea los anuncios de adsense. He optado por quitar dicho código y se mantiene el certificado seguro.
ResponderEliminarGracias por todo. Menudo blog y diseño macho, que pasada.