passage prestashop https ovh

1 – Activer le HTTPS sur Prestashop :

Voici la façon de passer votre boutique en HTTPS en détail,

  1. Activation du SSL : Back office > Paramètres > Générales 
  2. Corriger les éventuels « Mixed Content« 
  3. Vérifier la redirection HTTP vers HTTPS (redirection 301 via htaccess ou nginx)

 

Grâce à au partenariat d’OVH et LetsEncrypt, tous les clients de serveurs OVH bénéficient petit à petit du déploiement des certificats SSL sur leurs machines. Mais le HTTPS ne s’active pas tout seul sur votre site, notamment sur Prestashop ou il faut l’activer dans le back-office pour rediriger la boutique sur le bon protocol.

Dans le back-office > Paramètres > Générales

Et là, un lien: Activez le HTTPS sur la boutiqueun clic et hop :

Activer le HTTPS sur prestashop

Un switch apparait :

prestashop-activer-https-step2

OUI…

prestashop-https-active

Activer en cochant la case OUI

prestashop-forcer-https

Le site est désormais en HTTPS, mais pour éviter des soucis avec des modules ou thèmes Prestashop pas forcément bien développé, je conseille d’activer la deuxième option : Forcer le HTTPS

Le tout en vidéo :

 

2 – Détecter les mixed-content :

HTTPS activé mais pas de cadenas vert…

Je suis certain que tu es dans ce cas… pourtant, tu as bien activé le SSL et forcé le HTTPS. Mais rien n’a faire, tu as bien le https dans l’URL mais pas de cadenas vert, ni de « sécurisé » (Fraichement ajouté à google chrome).

 

Le cas des mixed-content :

La raison de ce genre de problème, est souvent lié au fait que la page charge des composants (images/scripts/styles…) encore en HTTP. Du coup, chrome t’informe que la liaison est faite en HTTPS mais que certain des éléments sont chargés en HTTP et que ça peut poser des soucis de sécurité.

A la recherche des contenus HTTP :

Maintenant, le but du jeu est de rechercher ces éléments chargés en HTTP pour les faire charger en HTTPS.

Pour découvrir le nom des coupables, il te suffit de cliquer sur l’icone (i) au début de la barre d’adresse :

detecter-mixed-content-chrome

Le fait de cliquer sur « Détails« , ouvre les outils de développement de google chrome, dans l’onglet « Sécurité ». Tu auras toutes les informations concernant la connexion SSL, mais là, ce qui nous intéresse, c’est les contenus mixtes.

detecter-mixed-content

En cliquant sur « View request in Network Panel« , Tu verras les éléments qui sont chargés en HTTP et qui génère du contenu mixte. Si tu ne vois rien, rafraîchit ta page. Vérifie que le filtre suivant est bien activé :

mixed-content:displayed

detecter-mixed-content-image

Maintenant, que les coupables sont trouvés (le en l’occurence). Il faut le trouver et modifier sont URL (changement du protocole http > https).

Cherche dans le code source (clic droit > Afficher le code source de la page), recherche le nom de l’image, ou du script/style qui pose soucis.. ça te donnera des indices pour savoir où tu dois chercher dans ton back-office ou code source.

Très généralement, ces éléments sont des images : Elles sont ajoutés au bloc cms info, bloc contact… parfois dans les paramètres du thème, une image dans un fiche produit…

Avec l’éditeur WYSIWYG de Prestashop, il peut être utile de passer via le code source (icone <>) pour modifier les adresses des images HTTP par HTTPS ou (//)

prestashop-changer-url-http-vers-https

 

Sinon, il se peut que les images soient chargés dans un fichiers CSS (background-image), via le FTP, tu peux modifier le fichier en question et mettre le chemin relatif ou HTTPS://url_de_limage.

Plus d’information au sujet des « mixed-content » : (merci @marck)

Mixed-content.info recense les informations générales et pratiques à propos du mixed-content. 

Il intègre un outil pour vérifier le présence du mixed-content sur toutes les pages du site. Il fourni l’url des ressources qui posent problème en quelques minutes (temps variable selon le nombre d’URL à analyser). L’outil est pour le moment en version beta mais fonctionne 😉

https://mixed-content.info/mixed-content-checker-ligne/

3 – Redirections 301 du HTTP vers le HTTPS :

Il est important de vérifier si la redirection HTTP vers HTTPS est bien mise en place. On en à pas parlé, normalement, c’est géré du côté d’OVH.

Ce qu’il faut vérifier, c’est que les personnes qui arrive sur http://tonsite.fr sont bien redirigé vers httpS://tonsite.fr. Sinon, c’est comme ci, tu avais deux sites (contenu dupliqué..)

Plusieurs moyens de vérifier :

http://www.redirect-checker.org/index.php

Tu rentres ton adresse en HTTP, et les résultats apparaissent plus bas du genre :

Result

http://tonsite.fr/
301 Moved Permanently
https://tonsite.fr/
200 OK

 

Dans notre cas, une redirection 301 est bien faite vers le HTTPS 🙂

Tu peux aussi vérifier avec google chrome, clic droit > Inspecter. Tu as pleins d’onglets qui apparaissent, dans Network (si rien n’apparait rafraîchit ta page), les requêtes sont classés dans l’ordre d’arrivée, tu devrais avoir : http://tonsite.fr et ensuite https://tonsite.fr (Si tu regardes dans les headers, la redirections devrait être de type 301)

 

Dans le cas, ou la redirection n’existe pas :

Pour pallier à ce soucis, il suffit de modifier le fichier .htaccess à la racine de ton serveur mutualisé.

et d’ajouter ces lignes :

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.votredomaine.fr/$1 [R=301,L]

(plus d’information : https://www.ovh.com/tn/g1594.les_certificats_ssl_sur_les_hebergements_web

Je crois qu’on à fait le tour, maintenant, tu dois avoir une boutique sécurisée avec HTTPS 🙂

Ah oui, j’ai failli oublier, il faut penser à créer un nouveau site dans google webmaster tools et faire du site en HTTPS le domaine favori entre les deux. J’ai pas non plus évoqué la partie SEO, qu’il ne faut pas prendre à la légère mais j’imagine que si tu es là, c’est que tu connais cette problématique 🙂

 

A bientôt o/

HTTPS et Prestashop : Activation, Mixed-Content et Redirections
4.5 (90.67%) 15 votes
Catégories : prestashop

32 commentaires

leblond · 2 février 2017 à 21 h 46 min

Merci pour cet article qui m’a permis de régler les problèmes de contenus mixtes. Très clair!

Greg1234 · 9 février 2017 à 23 h 24 min

Merci pour ton article qui m’en apprend un peu plus sur cette delicate operation.
J’ai quelques questions a ce sujet.
Concernant les images, il s’agirait uniquement des images annexes donc hors fiche produit qui pourrait etre affecté par le mix content?
Ca semble long si on a beaucoup d’images a faire manuellement.. est ce Qu’il y a une possibilite de le faire automatiquement?
Surtout ce que j’ai peur c’est niveau referencement car a present l’image n’aura plus la meme adresse donc google va penser qu’elle a ete supprime… comment pallier a cela notamment niveau image?
Si je ne force pas toutes les urls en https, alors il y aurait seulement la page de commande en https? ( ca pourrait m’interesser)
Merci pour tes reponses !
Ton article est sympa a lire

    Vincent · 26 février 2017 à 16 h 01 min

    Hello Greg,

    Désolé pour la réponse un brin tardive (vacances) ^^

    Oui le mixed content concerne les images connexes, il faut retrouver dans le BackOffice (via le theme, le CMS…) et changer le http vers https.
    Normalement, en terme de référencement il y a pas de soucis : Si le HTTP est redirigé vers le HTTPS

    Une fois modifier, essaie de charger l’url de l’image en HTTP et normalement tu dois être redirigé vers le HTTPS sans rien faire, si c’est le cas… google va comprendre et mettre à jour l’url 😉

    Tiens moi au jus 😉

      Gregory · 7 mai 2017 à 14 h 09 min

      Merci Vincent pour ta reponse, je m’y a-t-elle cet été pour être sur qu’il n’y aura pas trop de perte de trafic!
      Juste une question encore. Tu dis : verifier sur GWT que le https est le site favori.. ? Concrètement, il faut faire quoi pour cela?

      Merci

Carole · 21 février 2017 à 14 h 18 min

Bonjour,
Merci pour ce tuto qui est très bien expliqué.
J’ai ce fameux problème d’images se trouvant dans mes fiches produit, slider, etc…
Du coup, mon site est bien en https mais pas de cadenas vert.
Je ne peux pas entrer dans chaque fiche produit pour tout changer manuellement ; il y a surement une astuce via le ftp pour dire que chaque image doit passer en https….
Savez-vous comment faire ? J’ai regardé sur le net mais rien trouvé à ce sujet.
Merci de votre retour.

Stéphane · 21 mars 2017 à 13 h 11 min

Bonjour,

Merci pour ces explications Vincent.

Il n’y aurais pas une requête SQL qui permettrais de changer toutes les urls des images dans le contenue directement?

    Vincent · 21 mars 2017 à 13 h 12 min

    Hello Stephane,

    Je n’ai pas testé encore mais certainement avec REPLACE() sur la table cms

Emma · 22 mars 2017 à 17 h 02 min

Bonjour,

Merci. Par contre, Je bloque à la première étape, Presta ne me permet pas de cocher oui, c est entièrement grisé même après avoir clique sur le lien comme sur la vidéo.

Merci.

Emma

    Vincent · 22 mars 2017 à 17 h 46 min

    Hello Emma,

    Quelle version de prestashop ? As tu installé le multi-boutique ?

Patrice · 16 mai 2017 à 13 h 31 min

Bonjour
merci pour cet article et ces explications, tout a été fait dans les règles. Même le fichier access chez OVH, mais j’ai toujours pas mon cadenas vert.
Après vérification les liens n’étant pas en HTTPS passent par un module :
exemple : http://www.lartisanbijoutier.fr/modules/leobtslider/images/99d3664477d014a3adc130636435e9f9.png
Serait il possible que les modules ne soient pas compatibles avec le https ?
Il faut dire aussi que Je suis novice sous presta !
Merci de vos conseils.
Patrice

Version : 1.5.6.1
URL du site concerné : https://www.lartisanbijoutier.fr/
thème utilisé: leojewe
Hébergement : OVH
Version de PHP : 5.6.30
Version de MySQL: 5.5.55-0+deb7u1-log
Navigateur(s) concerné(s) : TOUS

Xavier · 2 juin 2017 à 9 h 25 min

Bonjour!

J’ai aussi un magasin, et c’était un peu trop compliqué pour moi, je ne suis pas techniquement.

Je viens d’installer ce module: https://addons.prestashop.com/fr/securite-access/26745-one-click-ssl-lets-encrypt.html

Une bonne alternative, fonctionne sur tous les sites d’hébergement

Pierre · 22 juin 2017 à 17 h 59 min

Merci pour cet article, il m’a bien servit !

Julien · 13 juillet 2017 à 10 h 16 min

Bonjour,

Merci pour cette article qui m’aide bien 😉

Petite question, j’ai l’impression que le https n’aime pas ma police d’écriture, que puis-je faire pour remédier à sa?

Merci d’avance.

    Vincent · 13 juillet 2017 à 10 h 21 min

    Hello Julien,

    Vérifie bien que ta police soit chargé en HTTPS et non en HTTP.

    Tu peux voir ça : Clic droit > Inspecter > Console.

    Tu devrais avoir un message jaune avec le lien de ta police, essai de retrouver la ligne qui appel la police et remplace le HTTP par HTTPS

      Julien · 13 juillet 2017 à 13 h 48 min

      J’ai changé le lien pour que la font google soit chargé en https mais sa ne fonctionne pas…

      On dirait qu’il continue à charger en http.

      ma ligne de code :

      Si vous voulez tester, il vous suffit d’aller sur la page connexion de mon site :

      http://www.les2versants.fr

      Merci de votre aide.

        Vincent · 13 juillet 2017 à 13 h 58 min

        De mon côté, pas de message !

          Vincent · 13 juillet 2017 à 14 h 01 min

          Vide bien tes caches (ou test sur un autre navigateur)

          Julien · 13 juillet 2017 à 15 h 24 min

          Vous êtes en connexion sécurisé sans aucun blocage?

Julien · 13 juillet 2017 à 15 h 31 min

Perso, même après avoir vider le cache (j’ai testé sur 2 PC et sur chrome et firefox) j’ai toujours un blocage sur la font de google :

Blocage du chargement du contenu mixte actif (mixed active content) « http://fonts.googleapis.com/css?family=Montserrat|Open+Sans »

une idée?

Merci.

Vincent · 13 juillet 2017 à 20 h 54 min

Ah oui, bizarre google charge les fonts en HTTP :

http://fonts.googleapis.com/css?family=Open+Sans:300,600

bizarre :O

Recharge via google-font les bonnes URLs ?

    Julien · 14 juillet 2017 à 12 h 26 min

    Problème résolu 😉

    J’avais une url (en http) dans le fichier global.css que j’ai changé et le problème est résolu.

    Merci pour votre aide.

Pierro · 27 juillet 2017 à 15 h 27 min

Bonjour,

Je me joins à tous pour dire merci à Vincent pour l’article.

Alors moi c’est bien passé, ou presque. J’ai 823 produits, j’ai des images en dur dans les descriptions de certains produits. Du coup la page l’indique comme non-sécurisé 🙁

Auriez-vous une solution pour forcer le https des images concernées ? Je ne me vois pas passer les 823 produits 1 par 1…

D’avance merci.

    Vincent · 27 juillet 2017 à 15 h 41 min

    Merci Pierro,

    La seul solution que je vois est de faire une requête SQL pour remplacer les HTTP:// -> HTTPS://
    Exemple :

    UPDATE ps_product_lang
    SET description_short = REPLACE(description_short, 'http://tentes4saisons', 'https://tentes4saisons')

    Si tu as un environnement de développement, je te conseil de l’utiliser pour tester 😉

      Vincent · 27 juillet 2017 à 15 h 42 min

      Il faut bien vérifier le format des urls stockés (leurs adresses…)

    Vincent · 27 juillet 2017 à 15 h 55 min

    Pour ta page catégorie, change l’URL de ton image :
    http://www.tentes4saisons.com/images/fournisseurs/western-mountaineering/western-mountaineering-logo.png

    et produit :
    http://www.tentes4saisons.com/img/cms/Sac%20de%20couchage/SummerLite/summerlite.png
    UPDATE ps_product_lang
    SET description_short = REPLACE(description_short, 'http://www.tentes4saisons.com', '//tentes4saisons')

      Pierro · 27 juillet 2017 à 16 h 36 min

      Merci Vincent ?
      Après je suis pas trop à l’aise avec le SQL. Je regarde si j’y arrive et reviens vers toi.

      Encore merci.

        Pierro · 27 juillet 2017 à 16 h 44 min

        Tu connais peut-être un module qui pourrait gérer cette problématique ?

          Vincent · 27 juillet 2017 à 16 h 55 min

          Non je connais pas de module qui fasse ça mais je peux réfléchir à une solution à intégrer à Super SEO ICI

Marck · 8 août 2017 à 21 h 55 min

J’ai découvert un tool pour vérifier la présence de mixed-content sur un site internet :
https://mixed-content.info/mixed-content-checker-ligne/

Très pratique pour trouver assez rapidement les images, script ou style qui posent soucis.

cyril · 2 octobre 2017 à 18 h 40 min

Merci pour ton article,il m’a vraiment bien servit ! de façon claire, nette et précise avec un grand soin de rédaction

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *