Lorsqu’on ajoute un lien dans une page de site web (pour donner une source par exemple), on utilise souvent l’attribut hypertexte
target="_blank", qui permet d’ouvrir ce lien dans un nouvel onglet de navigateur.
L’avantage ? Garder le lecteur sur son propre site, en lui donnant la possibilité de lire d’autres sources en parallèle. Nous allons voir dans cet article comment bien utiliser l’attribut hypertexte
target=" _blank" en assurant la sécurité et la performance de votre site.
L’attribut hypertexte target="_blank" sur les liens d’un site
L’attribut hypertexte
target="_blank" est à utiliser avec parcimonie et surtout à combiner avec d’autres attributs qui vont garantir la sécurité de votre propre site web ainsi que sa performance. En effet, il a été démontré qu’il est possible pour un hacker de procéder à la redirection d’un internaute vers un autre site web lors du clique sur un lien composé uniquement de l’attribut
target="_blank".
Et attention, ce n’est pas le lien ouvert qui est redirigé, c’est l’onglet d’origine (en d’autres termes, votre site), sans que cela ne se voit forcément. C’est une méthode très utilisée pour les tentatives de phishing notamment.
L’attribut hypertexte
target="_blank" peut aussi impacter la performance de votre site. En effet, sur la majorité des navigateurs actuels, lorsque vous faites un lien ouvrant une nouvelle fenêtre ou un nouvel onglet de navigateur, les deux fenêtres (celle de votre site web et celle contenant l’URL d’un autre site), fonctionnent sur le même processus système. Cela signifie que si le site vers lequel vous souhaitez envoyer l’internaute charge beaucoup de Javascript par exemple, les performances de votre site peuvent être impactées.
Pour palier à ces problèmes de sécurité et de performance, il existe deux attributs complémentaires à l’attribut hypertexte
target="_blank" :
rel="noopener" et
rel="noreferrer".
Les attributs rel="noopener" et rel="noreferrer" pour optimiser la sécurité et la performance des liens d’un site
Si vous utilisez l’attribut hypertexte
target="_blank" sur un lien afin de l’ouvrir dans un nouvel onglet ou une nouvelle fenêtre de navigateur, il est recommandé d’y ajouter les attributs
rel="noopener" et/ou
rel="noreferrer" , qui auront pour effet les actions suivantes :
- L'attribut
rel="noopener"bloque l’accès à la propriétéwindow.openerutilisée par les hackers pour rediriger un lien et fait en sorte que la page ouverte fonctionne sur un autre processus système. - L’attribut
rel="noreferrer"aura la même utilité mais empêchera aussi le changement de page sur le site référent.
Pour avoir une visibilité sur la sécurité et la performance de vos liens, vous pouvez utiliser l’outil Google Lighthouse. Il référence l’intégralité des liens composés de l’attribut hypertexte
target="_blank" qui ne contiennent pas les attributs cités précédemment sur une URL donnée.
Sources :