Pourquoi les démonstrations sur Addons ne fonctionnent plus sur Safari et Chrome ?

Si vous ne vendez pas de produit sur la place de marché officielle de PrestaShop, vous ne serez pas réellement intéressé par l'astuce que je vais vous offrir ici, mais si vous êtes acheteurs sur cette place de marché vous pourrez transmettre le lien de l'article au vendeur, si vous n'arrivez pas à profiter de ses démonstrations sur Addons.

Le souci

Depuis plusieurs mois, certains clients me contactent sur Addons pour me faire part de l'impossibilité d'utiliser mes démonstrations de module.

Lorsque j'effectue des tests directement sur mes sites de démonstration de mes modules, aucun problème quel que soit le navigateur utilisé.

L'analyse

En discutant avec des collègues comme Yann - développeur du fabuleux module d'affiliation All in One Rewards -  nous avons identifié que le souci venait du fait que nos démonstrations étaient affichées dans des iframe.

Si vous ne connaissez pas le principe des iframe, je vais vous l'expliquer simplement.

L'iframe permet d'afficher une page web ou tout élément externe directement dans un espace dédié sur une page d'un autre site.

Dans notre cas, Addons affiche une page de son site avec un bandeau présentant le produit et le moyen d'y accéder, puis en dessous on retrouve le site de démonstration du module ou du template.

La découverte

L'iframe provoque un effet de bord dans les navigateurs Chrome et Safari car ces 2 navigateurs ont décidé de sécuriser les données en interdisant, de base, l'enregistrement des cookies tiers, soit les cookies ne correspondant pas au domaine affiché actuellement dans le navigateur.

Ainsi, avec l'iframe le visiteur des démonstrations ne peut pas se connecter aux backoffice puisque le cookie ne peut pas s'enregistrer.

La solution

Nous ne pouvons pas demander à Addons de ne plus utiliser d'iframe pour afficher nos démonstrations.

Nous devons donc trouver une solution pour faire comprendre au navigateur qu'il doit accepter les cookies de notre démonstration même si ce cookie ne provient pas du même nom de domaine.

J'ai donc regardé toutes les solutions disponibles et il en existe plusieurs qui demande de toucher directement au code source des versions de PrestaShop utilisées pour ces sites de démonstration, ce qui n'est pas très simple à maintenir.

J'ai donc décidé de retenir la solution qui me semble la plus simple et qui fonctionne parfaitement sur mes démonstrations, une intervention dans le htaccess du serveur.

Simple, efficace avec un tout petit bout de code :

<IfModule mod_headers.c>
    Header edit Set-Cookie ^(.*)$ $1;Secure;SameSite=None 
</IfModule>

Et voilà le souci est corrigé :-)

Mise à jour du 26/11/2020

Pour mes démonstrations sur O2switch j'ai du adapter le code ainsi :

<IfModule mod_headers.c>
    Header always edit Set-Cookie ^(.*)$ $1;Secure;SameSite=None 
</IfModule>

Le petit plus

Je me suis demandé une chose toute bête.

Si j'ai un hébergement sur lequel j'ai plusieurs démonstrations, si je dépose ce code dans le htaccess à la racine de toutes ces démonstrations, est ce que cela se propage sur tous les sous répertoires ?

Je vous laisse répondre dans les commentaires, car j'ai déjà ma petite idée, mais il faut bien que vous participiez aussi de temps en temps.