Balises liées aux métadonnées

Cet article explique les balises liées aux métadonnées.

Il explique la balise <meta>, y compris des points liés au SEO, au design adaptatif et au Content-Security-Policy.

YouTube Video

Balises liées aux métadonnées

Balise <meta>

1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">

• La balise <meta> fournit des métadonnées pour le document HTML. Les métadonnées ne sont pas affichées sur la page mais sont utilisées par les moteurs de recherche et les navigateurs. La balise <meta> est utilisée pour les descriptions de page, les mots-clés, les informations sur l'auteur et les paramètres de conception responsive.

Balise <meta name="viewport">

1<meta name="viewport" content="width=device-width, initial-scale=1">

• La balise <meta name="viewport"> contrôle la mise en page et le redimensionnement des pages web sur différents appareils. Elle est couramment utilisée dans la conception responsive pour assurer un affichage correct sur les appareils mobiles.

Balise <meta name="description">

1<meta name="description" content="An example webpage">

• La balise <meta name="description"> est utilisée pour décrire brièvement le contenu d'une page web. Les moteurs de recherche utilisent cette description pour afficher un résumé de la page dans les résultats de recherche.

Balise <meta name="keywords">

1<meta name="keywords" content="HTML, CSS, JavaScript">

• La balise <meta name="keywords"> fournit une liste de mots-clés pertinents pour le contenu de la page. Les moteurs de recherche utilisent ces mots-clés pour mieux comprendre le contenu de la page.

Balise <meta name="author">

1<meta name="author" content="John Doe">

• La balise <meta name="author"> spécifie l'auteur de la page Web. Cette information est principalement utilisée par les moteurs de recherche et les outils pour identifier précisément l'auteur de la page.

Balise <meta http-equiv="refresh">

1<meta http-equiv="refresh" content="5; url=https://example.com">

• La balise <meta http-equiv="refresh"> est utilisée pour actualiser automatiquement la page ou rediriger vers une autre URL après un certain temps. Elle est utile pour recharger la page ou rediriger l'utilisateur.

Balise <meta http-equiv="cache-control">

1<meta http-equiv="cache-control" content="no-cache">

• La balise <meta http-equiv="cache-control"> est utilisée pour contrôler le comportement du cache de la page Web. Elle peut spécifier s'il faut mettre en cache la page ou la revalider lors des accès ultérieurs.

Balise <meta http-equiv="expires">

1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">

• La balise <meta http-equiv="expires"> définit une date d'expiration pour le contenu de la page. Une fois la date spécifiée passée, le contenu devient obsolète et le navigateur est incité à récupérer une nouvelle version.

Balise <meta http-equiv="X-UA-Compatible">

1<meta http-equiv="X-UA-Compatible" content="IE=edge">

• La balise <meta http-equiv="X-UA-Compatible"> est utilisée pour spécifier le mode de compatibilité pour Internet Explorer. Cette balise garantit que le navigateur utilise la version appropriée du moteur de rendu pour afficher la page.

Balise <meta http-equiv="content-security-policy">

L'attribut http-equiv="content-security-policy" dans une balise HTML meta est une fonction permettant d'appliquer des règles de sécurité spécifiques dans le navigateur pour renforcer la sécurité de la page web. En utilisant cet attribut, les développeurs de sites web peuvent définir des politiques concernant le chargement des ressources et l'exécution des scripts afin de prévenir des attaques comme le XSS (Cross-Site Scripting) et les injections de données.

Qu'est-ce que le Content-Security-Policy ?

Content-Security-Policy (CSP) est une sorte d'en-tête HTTP utilisée pour contrôler quelles ressources externes (images, scripts, feuilles de style, etc.) une page web peut charger et quels types de code peuvent être exécutés. Il est généralement envoyé en tant qu'en-tête HTTP mais peut également être défini dans le HTML à l'aide d'une balise meta. Cette méthode permet de spécifier le CSP côté client au lieu de configurer les en-têtes côté serveur.

Par exemple, vous pouvez définir le CSP dans la balise meta HTML comme suit :.

1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">

Dans cet exemple, les politiques suivantes sont définies :

• default-src 'self' : En gros, toutes les ressources ne sont chargées que depuis la même origine (elle-même).
• img-src https://example.com : Les images ne sont chargées que depuis https://example.com.
• script-src 'self' https://apis.google.com : Les scripts ne peuvent être exécutés que depuis la même origine ou depuis https://apis.google.com.

Différences entre http-equiv et les en-têtes HTTP

Généralement, Content-Security-Policy est envoyé du serveur au client en tant qu'en-tête HTTP. Cependant, si vous le configurez côté client à l'aide de la balise meta, il peut être écrit directement dans le HTML.

Cependant, il existe quelques différences importantes entre le définir en tant qu'en-tête HTTP et le spécifier avec une balise meta :

1. Priorité : Un CSP envoyé via des en-têtes HTTP a priorité sur celui spécifié dans une balise meta. Cela signifie que si un CSP est configuré côté serveur, il ne sera pas remplacé par un CSP spécifié dans une balise meta utilisée côté client.

2. Moment d'application : Un CSP spécifié via des en-têtes HTTP est appliqué avant que la page ne soit chargée. En revanche, un CSP spécifié via une balise meta est appliqué lorsque le HTML est analysé, donc des ressources peuvent déjà être chargées.

Directives disponibles dans le CSP

Dans un CSP, diverses directives sont utilisées pour spécifier des politiques qui autorisent ou interdisent le chargement et l'exécution de certains types de ressources. Les directives typiques incluent les suivantes :.

• default-src : Spécifie la politique de source par défaut pour toutes les ressources. Elle s'applique aux ressources non spécifiées par d'autres directives.
• script-src : Spécifie la source pour le JavaScript. Pour prévenir les attaques XSS, vous pouvez restreindre le chargement des scripts à partir de sites externes.
• style-src : Spécifie la source pour les fichiers CSS. En restreignant le chargement des feuilles de style à partir de sources externes, vous pouvez prévenir les attaques sur les styles de votre site.
• img-src : Spécifie la source pour les images. Vous pouvez restreindre le chargement des images à partir de sources externes.
• connect-src : Spécifie les URL autorisées pour les XMLHttpRequests et les connexions WebSocket. Cela garantit la sécurité des communications API externes et WebSocket.

En combinant ces directives, vous pouvez élaborer des politiques détaillées pour les ressources de votre page web.

Paramètres CSP pratiques pour renforcer la sécurité

Voici un exemple de paramètres CSP pour améliorer la sécurité de votre site web. Cela peut réduire le risque d'attaques XSS et de fuites de données.

1<meta http-equiv="Content-Security-Policy"
2    content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">

Les politiques suivantes sont appliquées avec cette configuration :

• default-src 'self' : Toutes les ressources sont chargées uniquement depuis la même origine.
• script-src 'self' https://trusted-cdn.com : Les scripts sont chargés uniquement depuis la même origine ou un CDN de confiance.
• object-src 'none' : La balise object n'est pas utilisée. Cela vise à prévenir les attaques basées sur Flash ou des plugins.
• style-src 'self': Les feuilles de style ne sont chargées que depuis l'origine elle-même.
• base-uri 'self': La base URL définie par la balise <base> est limitée à l'origine elle-même.
• form-action 'self': La destination de soumission du formulaire est limitée à l'origine elle-même. Cela réduit le risque que des données de formulaire soient envoyées vers des sites externes.

Conclusion

En utilisant http-equiv="content-security-policy" pour définir le CSP dans le HTML, il est possible d'améliorer la sécurité de la page web. Un CSP correctement configuré est un outil puissant qui réduit le risque d'attaques XSS et de fuites de données et protège votre site web.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video