Images en HTTP au lieu de HTTPS sur PrestaShop : diagnostic et solutions

Le problème du contenu mixte sur PrestaShop

Vous avez activé le SSL sur votre boutique PrestaShop, votre URL affiche bien le cadenas HTTPS… mais certaines images persistent à se charger en HTTP. Le navigateur bloque alors ces ressources ou affiche un avertissement "contenu mixte" (mixed content), cassant votre cadenas sécurisé et dégradant la confiance de vos visiteurs.

Ce problème est l'un des plus fréquents après une migration vers HTTPS. Il touche aussi bien les images produits que les éléments personnalisés ajoutés dans les templates Smarty. Voici un guide complet pour diagnostiquer et corriger définitivement ce problème.

Comprendre le contenu mixte (mixed content)

Lorsqu'une page servie en HTTPS charge des ressources (images, scripts, CSS) via HTTP, le navigateur considère cela comme du contenu mixte. Il existe deux types :

• **Mixed content passif** (images, vidéos, audio) : le navigateur peut les charger avec un avertissement, mais le cadenas passe en mode dégradé
• **Mixed content actif** (scripts, CSS, iframes) : le navigateur bloque purement et simplement la ressource

Dans les deux cas, Google Chrome et Firefox signalent le problème dans la console développeur (F12 → Console), avec des messages du type :

Mixed Content: The page at 'https://example.com/produit' was loaded over HTTPS,
but requested an insecure image 'http://example.com/themes/mon-theme/img/enstock.jpg'.

Étape 1 : Vérifier la configuration SSL dans PrestaShop

Avant de toucher au moindre template, assurez-vous que la configuration SSL est complète dans le back-office.

Sur PrestaShop 1.6

Rendez-vous dans Préférences → Général et vérifiez que les deux options sont activées :

• **Activer le SSL** : Oui
• **Activer le SSL sur toutes les pages** : Oui

Sur PrestaShop 1.7 et 8.x

Le chemin a changé : Paramètres de la boutique → Général. Les mêmes deux options doivent être sur "Oui".

Attention : Si vous activez le SSL sur toutes les pages, assurez-vous que votre certificat SSL est bien installé et valide sur le serveur. Sans cela, votre boutique deviendra inaccessible.

Vérifiez également dans la base de données que les URLs sont cohérentes :

SELECT * FROM ps_configuration
WHERE name IN ('PS_SSL_ENABLED', 'PS_SSL_ENABLED_EVERYWHERE', 'PS_SHOP_DOMAIN', 'PS_SHOP_DOMAIN_SSL');

Les valeurs PS_SHOP_DOMAIN et PS_SHOP_DOMAIN_SSL doivent être identiques (votre nom de domaine sans protocole).

Étape 2 : Identifier les images fautives dans les templates

Le problème vient souvent d'URLs codées en dur dans les fichiers .tpl (Smarty) de votre thème. C'est typiquement le cas lorsque vous avez ajouté des images personnalisées — par exemple, des icônes de disponibilité stock — directement dans le template produit.

Un code comme celui-ci est problématique :

{* ❌ URL absolue en dur — provoque du contenu mixte *}
<img src="http://monsite.com/themes/mon-theme/img/enstock.jpg" alt="En stock" />

Méthodologie de diagnostic

1. **Identifiez le bon fichier template** : commentez le bloc suspect pour confirmer que vous éditez le bon fichier.

{* Commentaire temporaire pour test *}
{*
<img src="http://monsite.com/themes/mon-theme/img/enstock.jpg" alt="En stock" />
*}

1. **Videz le cache des templates** : dans le back-office, allez dans **Paramètres avancés → Performances** et cliquez sur "Vider le cache". Vérifiez aussi que la **recompilation des templates** est activée ("Forcer la compilation" en développement).
1. **Vérifiez les caches serveur** : si vous utilisez un cache serveur (Varnish, OPcache, cache Nginx), purgez-le également. Un cache persistant peut continuer à servir l'ancienne version du template pendant des heures.
1. **Confirmez le thème actif** : cela peut sembler évident, mais vérifiez que le thème actif dans le back-office est bien celui dont vous modifiez les fichiers. Un thème enfant peut surcharger le template que vous éditez dans le thème parent.

Étape 3 : Corriger les URLs dans les templates

Solution 1 : Utiliser des URLs relatives au protocole

La correction la plus simple consiste à utiliser des chemins relatifs à la racine du serveur :

{* ✅ Chemin relatif — fonctionne en HTTP comme en HTTPS *}
<img src="/themes/mon-theme/img/enstock.jpg" alt="En stock" />

En supprimant le protocole et le domaine, le navigateur utilisera automatiquement le même protocole que la page.

Solution 2 : Utiliser les variables Smarty de PrestaShop

C'est la méthode recommandée. PrestaShop expose des variables Smarty qui pointent vers les bons répertoires :

{* ✅ PrestaShop 1.6 — variable Smarty native *}
<img src="{$img_dir}enstock.jpg" alt="En stock" />

{* ✅ PrestaShop 1.7+ — utiliser l'asset du thème *}
<img src="{$urls.img_url}enstock.jpg" alt="En stock" />

Sur PrestaShop 8.x, la syntaxe reste la même qu'en 1.7 pour les templates Smarty classiques. Si vous utilisez un thème Symfony/Twig (ce qui reste rare), la syntaxe sera différente :

{# PrestaShop 8.x avec Twig #}
<img src="{{ asset('themes/mon-theme/assets/img/enstock.jpg') }}" alt="En stock" />

Solution 3 : Utiliser des URLs protocol-relative

Bien que cette technique soit de moins en moins recommandée (car tout devrait être en HTTPS aujourd'hui), elle fonctionne encore :

{* ⚠️ Protocol-relative — héritera du protocole de la page *}
<img src="//monsite.com/themes/mon-theme/img/enstock.jpg" alt="En stock" />

Étape 4 : La meilleure solution — remplacer les images par des icônes

Pour des indicateurs visuels comme la disponibilité en stock, l'approche la plus performante est d'abandonner les images au profit d'icônes vectorielles. Vous y gagnez en performance (pas de requête HTTP supplémentaire), en flexibilité (taille et couleur modifiables en CSS) et vous éliminez définitivement le problème de contenu mixte.

Avec Font Awesome (PrestaShop 1.6)

PrestaShop 1.6 inclut Font Awesome nativement. Attention cependant : les noms de classes ont changé entre les versions de Font Awesome. Si fa-check ou fa-close ne fonctionnent pas, vérifiez dans le fichier global.css de votre thème quelle version est chargée.

<label>En stock :</label>
{if $product->quantity <= 0}
    <i class="fa fa-times" style="color: #e74c3c;" aria-hidden="true"></i>
    <span class="sr-only">Rupture de stock</span>
{else}
    <i class="fa fa-check" style="color: #27ae60;" aria-hidden="true"></i>
    <span class="sr-only">Disponible</span>
{/if}

Note : fa-close a été renommé fa-times dans Font Awesome 4.x. Vérifiez votre version si l'icône ne s'affiche pas.

Avec Material Icons ou SVG inline (PrestaShop 1.7 / 8.x)

Sur les versions modernes, préférez les SVG inline pour un contrôle total et zéro dépendance externe :

{* PrestaShop 1.7 / 8.x — SVG inline *}
<span class="stock-indicator">
{if $product.quantity <= 0}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
         fill="none" stroke="#e74c3c" stroke-width="2" stroke-linecap="round">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
    <span>Rupture de stock</span>
{else}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
         fill="none" stroke="#27ae60" stroke-width="2" stroke-linecap="round">
        <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    <span>En stock</span>
{/if}
</span>

Vérification globale : traquer tout le contenu mixte

Au-delà des templates, d'autres sources peuvent provoquer du contenu mixte :

Dans la base de données

Les descriptions produits, pages CMS et contenus éditoriaux peuvent contenir des URLs en HTTP :

-- Trouver les images HTTP dans les descriptions produits
SELECT id_product, description
FROM ps_product_lang
WHERE description LIKE '%src="http:%'
   OR description LIKE '%src=\"http:%';

-- Corriger en masse (ATTENTION : faites un backup avant !)
UPDATE ps_product_lang
SET description = REPLACE(description, 'http://monsite.com', 'https://monsite.com')
WHERE description LIKE '%http://monsite.com%';

Dans les modules

Certains modules tiers injectent leurs propres assets en HTTP. Vérifiez dans la console navigateur quelles ressources sont bloquées et identifiez le module responsable.

Forcer HTTPS au niveau serveur

En complément des corrections PrestaShop, ajoutez une redirection HTTPS systématique dans votre .htaccess :

# Forcer HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Ou via Nginx :

server {
    listen 80;
    server_name monsite.com www.monsite.com;
    return 301 https://$host$request_uri;
}

Header CSP pour détecter les fuites

Pour monitorer le contenu mixte sans casser votre site, utilisez le header Content-Security-Policy en mode rapport uniquement :

Header set Content-Security-Policy-Report-Only "default-src https:; report-uri /csp-report"

Checklist de migration HTTPS complète

1. ☑ Certificat SSL installé et valide
2. ☑ SSL activé dans le back-office PrestaShop (les deux options)
3. ☑ URLs de la boutique en HTTPS dans la configuration
4. ☑ Templates vérifiés (aucune URL HTTP en dur)
5. ☑ Base de données nettoyée (descriptions, CMS, modules)
6. ☑ Redirection 301 HTTP → HTTPS au niveau serveur
7. ☑ Cache vidé (PrestaShop + serveur)
8. ☑ Google Search Console mise à jour avec la propriété HTTPS
9. ☑ Sitemap régénéré avec des URLs HTTPS