Publié le 14 octobre 2021, modifié le 1 mai 2024 par Lucie Blanchard

Si vous créez ou gérez un site Web, il y a de fortes chances que vous deviez à un moment donné rediriger vos utilisateurs vers une nouvelle adresse. Par exemple, vous avez peut-être déménagé vers un nouveau domaine, acheté un deuxième ou déplacé une page existante vers une autre partie de votre site. Dans certains cas, cela se fait au niveau du serveur, avec des redirections HTTP via .htaccess ou Nginx . Les redirections côté serveur ont l’avantage d’utiliser les codes d’état HTTP 3xx. Ces codes d’état indiquent à l’agent utilisateur (comme les robots des moteurs de recherche) pourquoi la redirection a été configurée, ce qui peut être utile pour le référencement. Par exemple, une redirection HTTP 301 indique que la page en question a été déplacée définitivement vers un nouvel emplacement. En revanche, les redirections JavaScript sont côté client, ce qui signifie qu’elles indiquent au navigateur de récupérer le contenu à partir d’un emplacement différent. Vous pouvez utiliser une redirection côté client comme JavaScript si :

  • Les redirections sont couramment utilisées sur les sites web pour rediriger les utilisateurs vers une nouvelle adresse.
  • Les codes d'état HTTP 3xx indiquent à l'agent utilisateur la raison de la redirection, ce qui peut être utile pour le référencement.
  • Les redirections en JavaScript sont côté client et peuvent être utilisées lorsque l'accès au serveur ou au fichier .htaccess n'est pas possible.

  • Vous n’avez pas accès à la configuration de votre serveur ou au fichier .htaccess
  • Vous souhaitez lier la redirection à un événement ou à une action utilisateur spécifié
  • Vous effectuez un test A/B
  • Vous avez besoin de vérifications ou de validations supplémentaires avant de rediriger
  • Vous avez d’autres besoins qui ne peuvent pas être facilement traités en utilisant une redirection HTTP
  • Vous trouverez ci-dessous trois des manières les plus courantes de créer un lien de redirection en JavaScript à l’aide de l’objet de localisation, qui est une entité contenant des informations sur l’URL actuelle.

    Définir une nouvelle propriété window.location.href

    Le moyen le plus simple et le plus courant d’utiliser JavaScript pour rediriger vers une URL consiste à définir la propriété location sur une nouvelle URL à l’aide de window.location.href.Le code JavaScript ressemble à ceci :window.location.href = ‘https://ExampleURL .com/’;À lui seul, window.location.href est une propriété qui vous indique quelle URL est actuellement affichée. En définissant une nouvelle valeur (un signe égal, suivi de votre nouvelle URL cible entre guillemets simples), vous indiquez au navigateur de charger cette nouvelle URL, de la même manière que ce qui se produirait si un utilisateur cliquait sur un lien. L’utilisation de « window.location.href » pour rediriger ajoute une nouvelle entrée à l’historique de la session en cours, ce qui signifie que si l’utilisateur clique sur son bouton « retour », il peut toujours revenir à la page d’origine. Cette méthode a tendance à être un peu plus rapide que l’appel d’une fonction, ce qui se produit dans les deux autres méthodes décrites ci-dessous. Cependant, la vitesse peut varier en fonction du navigateur que vous utilisez pour tester. Il a également tendance à être pris en charge par plus de navigateurs, par rapport à d’autres méthodes. (Une « fonction » est un bloc de code en JavaScript qui achève une tâche désignée. En règle générale, cette tâche implique de prendre une entrée et de renvoyer une sortie.)Conseil de pro : Si vous utilisez la méthode « window.location.href », assurez-vous de ne pas configurer la redirection pour qu’elle s’exécute automatiquement, sinon l’utilisateur sera bloqué dans une boucle de redirection chaque fois qu’il essaiera de revenir à la page précédente. Au lieu de cela, envisagez de le lier à une action de l’utilisateur. Si vous ne voulez pas qu’ils puissent revenir en arrière, envisagez plutôt d’utiliser la fonction « window.location.replace ».

    Redirection à l’aide de la méthode location.assign()

    Du point de vue d’un utilisateur, une redirection utilisant « window.location.assign() » ressemble à la définition d’une nouvelle propriété href, comme dans l’exemple précédent. Ceci est dû au fait:

  • Ils créent tous deux une nouvelle entrée dans votre historique de session (similaire à un clic sur un lien)
  • Ils permettent tous deux aux utilisateurs de revenir en arrière et d’afficher la page précédente
  • Voici à quoi cela ressemble :window.location.assign(‘https://www.ExampleURL.com/’);Malgré les similitudes, « location.assign() » est différent de « location.href » dans quelques points importants façons. Location.assign() appelle une fonction pour afficher le document situé à l’URL spécifiée. Selon votre navigateur, cela peut être plus lent que de simplement définir une nouvelle propriété href. Cela peut également être considéré comme une option plus sûre que la définition d’une nouvelle propriété href, car si le lien cible est rompu ou n’est pas sécurisé, la fonction lancera une exception DOMException. En JavaScript, une DOMException est un message d’erreur qui peut se produire lors de l’appel d’une fonction ou de l’accès à une propriété.Conseil de pro : Si vous devez rediriger vers un domaine distinct à l’aide de location.assign(), vous devez utiliser HTTPS. Si vous ne le faites pas, votre redirection ne fonctionnera pas et lèvera à la place une exception pour une erreur de sécurité.

    Redirection à l’aide de la méthode location.replace()

    Comme « location.assign() », « window.location.replace() » appelle une fonction pour afficher un nouveau document situé à l’URL spécifiée. Cela ressemble à ceci : window.location.replace(‘https://www.ExampleURL.com/’ ); Contrairement à la définition d’une nouvelle propriété d’emplacement ou à l’utilisation de « location.assign() », la méthode de remplacement ne crée pas de nouvelle entrée dans l’historique de vos sessions. Au lieu de cela, il remplace l’entrée actuelle, ce qui signifie que les utilisateurs ne peuvent pas cliquer sur le bouton de retour et revenir à la page précédente de pré-redirection. En tant que telle, cette méthode est idéale si vous souhaitez utiliser JavaScript pour empêcher les utilisateurs d’afficher la page à partir de laquelle vous les éloignez. Cette méthode a des forces et des faiblesses similaires à location.assign(), en ce sens qu’elle :

  • Ne vous permet pas de rediriger vers des liens non sécurisés ou rompus, et lancera à la place une exception DOMException lorsque vous essayez d’en utiliser un
  • Peut être plus lent que la définition d’une nouvelle propriété window.location.href
  • Nécessite HTTPS si vous souhaitez rediriger vers un nouveau domaine
  • Conseil de pro : Contrairement aux redirections HTTP, JavaScript ne dit pas aux robots d’exploration pourquoi la redirection a été mise en place. Ainsi, si votre page a été déplacée de façon permanente, vous pouvez envisager une redirection en utilisant .htaccess ou la configuration de votre serveur, si possible.

    Utilisez l’audit de site pour identifier les problèmes de redirection

    Si vous implémentez des redirections sur votre site de quelque manière que ce soit, il est préférable d’auditer régulièrement votre site avec un outil tel que Site Audit. Bien que l’audit du site ne soit pas en mesure de rendre JavaScript, il peut identifier une variété de vérifications liées à la redirection, notamment :

  • Rediriger les chaînes et les boucles
  • Redirection manquante ou canonique vers la page d’accueil HTTPS à partir de la version HTTP
  • Redirections temporaires ou permanentes (qui ne sont pas nécessairement un problème si elles sont utilisées correctement)
  • Les redirections de toutes sortes peuvent être utiles pour votre site, mais il est important de les mettre en œuvre correctement afin d’éviter les problèmes techniques de référencement. Si vous débutez ou souhaitez pratiquer JavaScript, vous pouvez visiter un site Web comme W3Schools, qui propose un « TryIt Editor » interactif pour JavaScript, HTML, CSS, et plus :

    Réflexions finales : vérifiez toujours votre travail

    Utilisées efficacement, les redirections (JavaScript et autres) peuvent avoir un impact majeur sur l’expérience utilisateur sur votre site Web, guidant les utilisateurs vers le contenu le plus pertinent pour leurs besoins. Cependant, développer et maintenir un site Web est un processus compliqué et les erreurs peuvent être coûteuses. Si vous voulez que vos utilisateurs aient la meilleure expérience possible, il est crucial que vous vérifiiez votre travail de manière rigoureuse. L’audit de site peut faciliter ce processus en automatisant les vérifications de votre site, en identifiant les problèmes les plus critiques ayant une incidence sur les performances et l’expérience utilisateur de votre site, et en fournissant des conseils sur la façon de les résoudre.

    FAQ

    Quelle est la syntaxe pour créer une redirection en JavaScript ?

    Il existe différentes façons de créer une redirection en JavaScript. L'une des syntaxes couramment utilisées est la méthode "window.location", suivie du lien vers lequel vous souhaitez rediriger l'utilisateur.

    Il est également possible d'utiliser la fonction "replace()" pour remplacer l'URL actuelle par celle souhaitée. Enfin, il est important de se rappeler d'ajouter le préfixe "http://" ou "https://" pour que la redirection fonctionne correctement.

    Comment corriger le problème de redirection d'URL vers un site non sécurisé ('open redirect') avec Veracode fix en JavaScript ?

    Pour corriger le problème de redirection d'URL vers un site non sécurisé (également appelé "open redirect") avec Veracode fix en JavaScript, il est recommandé de mettre en place des validations supplémentaires avant toute redirection. Cela peut inclure la vérification de l'URL de destination pour s'assurer qu'elle appartient bien au même domaine que celui du site d'origine, ainsi que la mise en place de listes blanches pour les URL autorisées.

    L'utilisation d'une bibliothèque de validation telle que XSSDSL peut également aider à détecter et à bloquer les tentatives de redirection malveillantes. Enfin, il est important de garder à jour toutes les versions des composants utilisés dans le code afin de bénéficier des dernières mises à jour de sécurité et ainsi réduire les risques d'exploitation du problème.

    Est-il possible de faire une redirection URL en utilisant du code JavaScript ?

    Oui, il est tout à fait possible de faire une redirection URL en utilisant du code JavaScript. Cela peut se faire en utilisant la méthode "window.

    location.assign(nouvelleURL)" qui permettra de rediriger l'utilisateur vers la nouvelle adresse URL spécifiée. Il existe également d'autres fonctions en JavaScript telles que "window.location.replace(nouvelleURL)" ou "window.location.href = nouvelleURL" qui peuvent également être utilisées pour effectuer une redirection. L'utilisation de ces différentes méthodes dépendra des besoins spécifiques du développeur et des fonctionnalités qu'il souhaite implémenter sur son site web.

    Quels sont les différents moyens de faire une redirection en ligne ?

    Il existe deux principaux moyens de faire une redirection en ligne : la redirection 301 et la redirection 302. La redirection 301 est permanente et permet de diriger de manière définitive un utilisateur vers une nouvelle page. La redirection 302 est temporaire et redirige temporairement l'utilisateur vers une autre page.

    Il est également possible de faire une redirection via le fichier .htaccess ou en utilisant des plugins dédiés sur certaines plateformes web. Ces différentes méthodes offrent des solutions efficaces pour orienter les visiteurs vers le contenu souhaité lors d'une migration ou d'un renouvellement de site internet.

    Quelle est la méthode pour réaliser une redirection dans un fichier HTML ?

    Pour réaliser une redirection dans un fichier HTML, il faut utiliser la balise avec l'attribut "http-equiv" qui prendra la valeur "refresh" suivi de l'URL de destination. Cette méthode permettra d'automatiquement rediriger les utilisateurs vers une autre page après un certain délai.

    Il est également possible d'utiliser la balise avec l'attribut "href" pour rediriger directement vers une autre page en cliquant sur un lien. Enfin, il est important de vérifier que le code est correctement écrit et fonctionne avant de publier le fichier HTML en ligne.

    Categories: SEO

    Lucie Blanchard

    Lucie Blanchard

    S’abonner
    Notification pour
    guest

    Commentaires
    Commentaires en ligne
    Afficher tous les commentaires
    0
    Nous aimerions avoir votre avis, veuillez laisser un commentaire.x