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 😉

Mixed content checker en 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/

Donne une note à ce post

32 thoughts on “HTTPS et Prestashop : Activation, Mixed-Content et Redirections”

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

    1. 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 😉

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

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

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

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

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

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

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

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

    1. 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 😉

Laisser un commentaire

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