Aller au contenu principal

Le Responsive Device Switcher ou Add CSS/JS ne fonctionne pas

Dernière mise à jour le 22 avr. 20261 min de lecture
Table des matières

Comment reconnaître l'erreur​

Si tu souhaites afficher et modifier ton site web de manière responsive ou ajouter du CSS/JavaScript dans ta variante, mais que ton site web ne se charge pas et affiche une erreur, cela est dû aux restrictions de framing.

Éditeur Varify en mode responsive montrant une connexion refusée ; la console indique que la frame a été refusée en raison de « X-Frame-Options: deny » Boîte de dialogue Varify « Add JS » dont le champ de code reste vide et affiche « Ce contenu est bloqué. Contactez le propriétaire du site pour résoudre le problème. »

Comment corriger l'erreur​

Solution 1 : Utilisation de l'extension Chrome Varify.io®​

Pour que tu puisses quand même créer tes variantes, tu as la possibilité de contourner cette restriction de framing avec l'extension Chrome Varify.io®.

  1. Télécharge l'extension Chrome Varify®
  2. Active-la dans ton navigateur et enregistre ton snippet de code Varify®
  3. Active le switch « Allow Responsive Device Switcher »
  4. Recharge la page - C'est prêt !

Maintenant, tout devrait fonctionner comme prévu.

Tu trouveras ici une explication plus détaillée de l'installation, de l'activation ainsi que d'autres fonctions : Extension de navigateur Chrome Varify®

Éditeur Varify avec le device switcher désactivé, affichant une page vide, et avec le device switcher activé, affichant la page rendue

Solution 2 : personnaliser les options X-Frame sur ton propre site web​

Si tu vois un message d'erreur comme dans la capture d'écran ci-dessus, une restriction de framing ne permet pas de charger la page dans le sélecteur d'appareil responsive.

La vue desktop normale de l'éditeur visuel n'est pas affectée par les restrictions de framing.

Si ta page est livrée avec l'en-tête de réponse X-Frame-Options ayant la valeur « deny », l'édition responsive ne peut pas être utilisée.

Une solution sensée dans ce cas serait d'assouplir la restriction à X-Frame-Options : « sameorigin ».

X-Frame-Options : « sameorigin » permet à tes pages d'être intégrées dans un frame depuis ton domaine, mais ne permet pas qu'elles soient intégrées depuis d'autres sites web.

Sur cette page