Chasser le Contenu Mixte sur Blogger suite au passage en HTTPS

Suite au passage d’un Blog Blogger en https, il n’est pas à exclure de devoir mettre à jour certaines données afin d’éviter du Contenu Mixte, à savoir du contenu en http:// alors que le reste du contenu est bien en https. Comme indiqué dans le précédent article portant sur la bascule de http vers https pour Blogger publié, l’éventuel Contenu Mixte se trouve principalement dans le code Html ou dans le code javascript d’un blog. Il convient donc afin d’harmoniser son contenu, de partir à la recherche des éléments encore en http pour ensuite les modifier.

Alors comment trouver ce contenu mixte et surtout comment le mettre à jour dans Blogger afin d’avoir un blog optimisé et dont le contenu sera uniquement en Https ? Voici la réponse ci-dessous ;)

Qu’est-ce que le Contenu Mixte ?

Avant que votre blog soit en https, l’intégralité de son contenu était logiquement uniquement composé d’adresses internes en Http, qu’il s’agisse de liens vers les photos ou de liens vers des pages internes. Alors au moment du passage en Https, il se peut que certains liens n’aient pas changé et qu’il faille donc les modifier de façon à ce qu’idéalement, tous ces liens deviennent en https.

Sur la plateforme Blogger, la plupart des éléments qui peuvent rester en Http:// après un passage en https, sont le plus souvent présents dans le code Html des articles ou pages ou dans les éventuels codes javascripts additionnels. Enfin, il est également courant d’en trouver dans les widgets faisant appels à des services externes (comme les widgets permettant d’afficher différentes infos relatives aux comptes de réseaux sociaux).

Bref ! Une fois qu’on sait ce qu’est le contenu mixte et qu’on souhaite savoir si son blog Blogger en contient, il faut donc partir à la chasse des éléments incriminés !

Rechercher le Contenu Mixte sur Blogger suite au passage en Https

Tout d’abord, rassurez-vous. Il se peut que votre blog Blogger contienne du contenu mixte, cependant il est également très probable que vous ayez très peu de liens à modifier. Donc pas de panique quant à la masse de boulot à faire. D’où l’importance de cette étape de recherche. Dans le meilleur des cas, vous n’aurez qu’une dizaine de liens à mettre à jour ;)

Entrons dans le vif du sujet.

Recherche de contenu mixte via Console Javascript

Afin de traquer les éventuels éléments en http:// de votre blog, lancez le navigateur Chrome dans sa toute dernière version. Puis rendez-vous sur votre blog Blogger en Https://.

Bien entendu, la manipulation pourra être faite avec le navigateur de votre choix, sachant que la plupart des navigateurs répandus disposent aussi d’une fonction de développement. Avec IE (Internet Explorer), on pourra par exemple appuyer sur F12 pour ouvrir l’interface dédiée aux développeurs. Si vous souhaitez effectuer vos recherches avec un autre navigateur que Chrome, vous retrouverez via ce lien précieux les raccourcis divers permettant d’accéder à la Console Javascript de la plupart des navigateurs web.

Bref ! Une fois la console javascript ouverte que vous trouverez en faisant F12 en raccourci pour Chrome, puis en cliquant sur l’onglet Console, vous obtiendrez sensiblement ce qui suit :

Il faut bien avouer que quand la console s’ouvre, on peut avoir comme un coup de chaud quand on aperçoit les message d’erreurs en rouge. Cependant, ce qui nous intéresser, c’est la partie du bas, avec le petit panneau stop et le fond beige foncé.

Quand on regarde ce que dit le message, on voit Mixed Content. Et c’est justement le but de la manoeuvre : Que la console nous dise ce qui relève du Contenu Mixte qu’il va falloir modifier !

Dans l’exemple en capture ci-dessus, on comprend donc que l’adresse du champ de recherche pointe vers une adresse en http. En anglais, la console nous indique alors que ce lien devrait être mis à jour et être remplacé par un lien sécurisé, à savoir donc un lien en Https !

L’utilisation de la console Javascript ne permet donc pas de modifier les éventuels contenus mixtes. Elle sert à les repérer. Ainsi, si vous utilisez cette méthode pour trouver des liens à modifier, notez quelque part tout ce que l’outil vous remonte.

S’agissant de modifier les urls dans le code javascript en dur, cela sera abordé au détour d’une prochaine publication à venir très vite :)

Chercher le contenu Mixte dans le code du design Blogger

Si depuis toujours votre blog dispose d’un des templates par défaut de Blogger, il est probable que vous n’ayez pas ou que très peu de modifs à réaliser. So Enjoy ! Le cas échéant, quoi qu’il arrive, une fois connecté(e)(s) sur l’espace dédié au Templating Blogger, la plateforme vous rappellera en quoi tout éventuel contenu mixte est problématique pour l’internaute :

Avant toute recherche ou modification dans le code html de votre template Blogger et pour éviter toute déconvenue, comme on le conseillerait pour WordPress.org, faîtes une sauvegarde de votre template Blogger.  Une fois la sauvegarde effectuée, et ce uniquement si vous avez bien une version xml de votre design bien au chaud quelque part, alors vous pourrez passer à la suite ;)

Pour vous assurer que vous n’avez pas de contenu mixte dans votre design Blogger, rendez-vous dans le menu dédié, d’abord via Thème :

Enfin, une fois la page de la rubrique Thème affichée, cliquez sur le bouton nommé Modifier le code HTML comme suit :

Cette action ouvrira la page du template Blogger au format Html dans laquelle il suffira donc de chercher les éventuels liens restés en http.

Positionnez le curseur de la souris tout en haut du code Html puis sur votre clavier, faîtes simultanément Ctrl + F de manière à ouvrir un champ de recherche en haut à droite de l’espace dédié au code Html, comme suit dans la capture suivante où on saisit la séquence http:// que l’on va rechercher :

Vous l’aurez compris, via ce champ de recherche dans lequel il faut saisir ceci : http:// nous allons partir à la recherche de tous les éléments en Http. Cependant, il ne faudra pas pour autant tout modifier et remplacer par du Https. En effet, en tête du code Html, de nombreux liens pointent vers l’extérieur du Blog et ne sont pas en https. Mais on s’en fiche vu que ça ne pointe pas en interne vers le contenu du blog. Exemple ici pour des liens pointant vers les Polices d’écriture Google :

Bref, tout ce qui ne concerne pas le blog et son design, on ne modifie pas. Idem pour ce qui relève des liens vers d’autres services externes comme suit par exemple :
– Lien(s) vers le site de l’auteur du template/design Blogger.
– Liens vers les comptes de réseaux sociaux.

En revanche, dans le cas suivant d’un lien qui justement n’est pas en https, on va effectuer la modification. Dans ce morceau de code CSS, l’url concernée est une image puisque l’on voit que l’adresse pointe vers le fichier menu-bg2.png. Le CSS servant à configurer une grande partie de l’affichage des éléments du design, on en déduit donc que ce lien sert à appeler une image de fond du menu du template concerné. Il faut donc modifier l’adresse du fichier afin qu’elle devienne sécurisée en https.

Idem avec tout autre élément propre au design du Blog Blogger comme dans cet autre exemple qui appelle là aussi dans le code CSS, une image dont l’url n’est pas passée en https :

Si lors de votre recherche de liens en HTTP vous réalisez qu’il y en a très peu, vous pouvez alors très bien les modifier au fil de l’eau. La modification est relativement simple puisqu’il suffit de rajouter un S à tous les liens du blog Blogger qui sont encore en http.

Rien ne vous empêche d’ailleurs d’embarquer le code dans votre éditeur de texte favori, comme par exemple Notepad ou encore Notepad++ et de faire un rechercher & remplacer. Attention cependant à ne pas faire de modifs sur des liens appelant des services externes comme l’appel de Police ou images étant hébergées à l’extérieur du blog. Sinon, cela cassera le lien et les éléments ne s’afficheront plus : Les polices n’apparaîtront pas et celle par défaut sera utilisée, tandis que faute d’images appelées, certains éléments du design pourront avoir l’air vides ou incomplets.

Recherche de contenu mixte dans les articles et pages Blogger

Hélas, même si vous modifiez des liens http en les passants en https dans le javascript ainsi que dans le design du thème, vous n’êtes pas à l’abri de devoir le faire aussi dans vos pages d’articles ainsi que sur vos pages. Même si un lien en http renverra l’internaute vers l’article ou page interne en https, il reste plus propre d’effectuer la modification du lien.

Contrainte : L’opération devra être faite dans chaque article et page du Blog. Le passage vers https ne met pas à jour les liens inline saisis à la main dans le corps des contenus de type articles et pages. Hélas ! Je vous l’accorde volontiers :(

Quoi qu’il en soit, pour modifier les liens dans vos articles et pages, il faudra donc aller sur chaque article et chaque page, cliquer sur l’onglet HTML puis rechercher toujours via le raccourci Ctrl+F, saisir « http:// » afin de tomber sur les liens à mettre à jour.

Grosso modo, la procédure de recherche et de modif est la même que celle présentée plus haut pour le design Blogger. Ne seront concernés par le passage en https, que les liens en http pointant vers d’autres articles ou pages de votre blog. Exemple ici en image avec un lien saisi à la main, volontairement saisi en http et pointant vers un autre article du Blog Blogger de test :

Une fois le lien http repéré, il me suffit donc de rajouter la lettre S de manière à ce qu’il pointe vers la version sécurisée du Blog.

Astuce : Pour les articles courts ou ne contenant qu’un ou peu de lien, on peut envisager de se contenter du mode de saisie ‘Rédiger‘ et survoler les liens dans le corps du texte. Au clic sur le lien, on peut alors voir le lien brut et visualiser si besoin de le modifier ou non. Si pas besoin, Ô joie on se casse fissa avec un big Smile non dissimulé !! :

Si besoin de le modifier pour rajouter le S manquant, alors on cliquera sur le lien Modifier comme ci-dessous, on rajoutera le S, on enregistrera sa modif et là aussi, on fera TAYO ! :

Enfin, on validera l’opération via le bouton OK puis on mettra à jour son article ou page histoire de ne pas avoir bossé pour rien ;)

L’opération pourra être fastidieuse si vous ajoutez beaucoup de photos dans vos articles. Si c’est le cas, utilisez surtout l’onglet html ainsi que la recherche via raccourci clavier Ctrl+F. Cela devrait hautement vous simplifier les manipulations. Lors des tests effectués, les images et photos ajoutées après le passage en https, contiennent bien des liens en https. Auquel cas, pas besoin de mettre à jour les liens images/médias.

Attention, il faudra à chaque cas qui se présentera, répéter l’opération pour tout fichier média hébergé sur le blog, effectuer la modif du lien si le lien est en http. Cela concerne donc les vidéos ou encore les fichiers audios…

Bref, la recherche de contenu mixte et la modification peut-être relativement rapide ou à l’inverse, prendre beaucoup plus de temps. Tout dépend si le design est un template personnalisé ou un template par défaut de Blogger. Tout dépend aussi du volume d’articles/pages et donc dans une certaines mesure, de l’ancienneté du Blog.

Il ne faut donc pas hésiter en cas de gros ménage à faire, à y aller par étapes. Sachant que du point de vue de l’internaute, la plupart des liens qui seront encore en http, ne seront pas un problème. En effet, l’internaute sera automatiquement redirigé vers la version sécurisée du Blog pour chaque lien interne du Blog. Autant dire que même si tout n’est pas passé en https lors de la modification presque automatique de Blogger, on peut tout de même remercier la plateforme pour faire une grosse partie du job :)