Obfuscation de liens PrestaShop : Smarty + JavaScript vanilla pour le SEO

Implémentation Smarty dans les templates PrestaShop

Liens simples (variables Smarty existantes)

Pour les URLs déjà disponibles dans les variables Smarty ($urls.pages.*), l'implémentation est directe :

{* Lien contact obfusqué *}
<span class="l-obf" data-o="{$urls.pages.contact|base64_encode}">
  {l s='Contact Us' d='Shop.Theme.Global'}
</span>

{* Lien mon compte obfusqué *}
<span class="l-obf" data-o="{$urls.pages.my_account|base64_encode}">
  {l s='Mon compte' d='Shop.Theme.Customeraccount'}
</span>

Liens générés via `{url entity=...}`

Le tag {url} de PrestaShop 1.7+ ne peut pas être directement pipé dans un modifier Smarty. La solution est d'utiliser {assign} pour capturer l'URL dans une variable intermédiaire :

{* Capturer l'URL dans une variable *}
{assign var=linkHome value={url entity='index' controller='index' id_lang=$language.id_lang id_shop=1}}

{* Utiliser la variable avec le modifier base64_encode *}
<span data-o="{$linkHome|base64_encode}" class="l-obf dropdown-item">
  {$language.name_simple}
</span>

Cette astuce via {assign} est indispensable car Smarty ne permet pas de chaîner un modifier directement sur la sortie d'un tag de fonction. C'est une subtilité qui piège régulièrement les développeurs.

Liens produit dynamiques

Pour les fiches produit générées dans une boucle, on utilise la classe Link de PrestaShop :

{foreach from=$products item=product}
  <span 
    data-o="{$link->getProductLink($product.id, null, $product.id_category, null, $language.id_lang)|base64_encode}" 
    class="l-obf product-link"
  >
    {$product.name}
  </span>
{/foreach}

PrestaShop 8.x : La classe Link et le modifier base64_encode fonctionnent de manière identique. En revanche, si vous migrez vers un thème basé sur Hummingbird (le nouveau thème par défaut de PS 8), vérifiez que vos overrides de templates sont bien dans le bon répertoire (themes/votre-theme/templates/).

JavaScript vanilla pour la navigation obfusquée

L'approche moderne se passe complètement de jQuery — une librairie qui n'a plus lieu d'être depuis l'adoption de Bootstrap 5 dans PrestaShop 8.x.

Version de base

// Obfuscation de liens — navigation au clic
document.querySelectorAll('.l-obf').forEach(function(el) {
  el.style.cursor = 'pointer';
  el.addEventListener('click', function() {
    window.location.href = atob(this.dataset.o);
  });
});

Version robuste avec support UTF-8

Les URLs contenant des caractères accentués ou spéciaux (fréquent avec les slugs français) nécessitent un décodage supplémentaire. En effet, atob() ne gère pas nativement l'UTF-8 — il faut passer par escape() puis decodeURIComponent() :

// Obfuscation de liens — support complet UTF-8
document.querySelectorAll('.l-obf').forEach(function(el) {
  el.style.cursor = 'pointer';
  
  el.addEventListener('click', function(e) {
    e.preventDefault();
    try {
      var decoded = atob(this.dataset.o);
      // Décodage UTF-8 pour les URLs avec accents
      window.location.href = decodeURIComponent(escape(decoded));
    } catch (err) {
      console.error('Erreur décodage lien obfusqué:', err);
    }
  });
});

Version moderne ES6+ (PrestaShop 8.x)

Sur PrestaShop 8.x, le support navigateur permet d'utiliser une syntaxe moderne plus concise :

// Obfuscation de liens — ES6+
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.l-obf').forEach(el => {
    el.style.cursor = 'pointer';
    el.setAttribute('role', 'link');
    
    el.addEventListener('click', () => {
      try {
        const decoded = atob(el.dataset.o);
        window.location.href = decodeURIComponent(escape(decoded));
      } catch (e) {
        console.warn('[obf] URL invalide:', e.message);
      }
    });

    // Support clavier pour l'accessibilité
    el.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        el.click();
      }
    });

    el.setAttribute('tabindex', '0');
  });
});

Styling CSS pour les liens obfusqués

Les obfusqués doivent rester visuellement identiques aux liens classiques pour ne pas dégrader l'expérience utilisateur :

.l-obf {
  cursor: pointer;
  color: var(--link-color, #2563eb);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.l-obf:hover {
  color: var(--link-hover-color, #1d4ed8);
}

.l-obf:focus-visible {
  outline: 2px solid var(--focus-color, #3b82f6);
  outline-offset: 2px;
  border-radius: 2px;
}

Bonnes pratiques et pièges à éviter

Ce qu'il faut obfusquer

• Sélecteurs de langue et de devise
• Liens de connexion / inscription / panier
• Mentions légales, CGV, politique de confidentialité
• Liens de pagination (dans certains cas)
• Liens vers les réseaux sociaux dans le footer

Ce qu'il ne faut PAS obfusquer

• Liens de navigation principale (catégories, sous-catégories)
• Liens vers les fiches produit depuis les listings
• Liens du fil d'Ariane (breadcrumb)
• Liens internes dans le contenu éditorial (articles, descriptions)

Pièges courants