HTTPS et Prestashop : En 2 clics sur les serveurs mutualisés OVH

passage prestashop https ovh

Activer le HTTPS sur Prestashop :

3 étapes pour sécuriser sa boutique grâce au trio : Prestashop + OVH + Letsencrypt

  • Activation du SSL : Back office > Paramètres > Générales 
  • Corriger les éventuels « Mixed Content« 
  • Vérifier la redirection HTTP vers HTTPS

 

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 SSL sur la boutique, un 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 :

 

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.

Vérification du passage au 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/


   12 Commentaires


  1. leblond
      2 février 2017

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

  2. Greg1234
      9 février 2017

    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

      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

        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

  3. Carole
      21 février 2017

    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.

  4. Stéphane
      21 mars 2017

    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

      Hello Stephane,

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

  5. Emma
      22 mars 2017

    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

      Hello Emma,

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

  6. Pierre
      22 juin 2017

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

Laisser un commentaire

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