<script>

<script>

<script> permet :
  • d’ajouter du code javascript à la page HTML en cours
  • d’importer un fichier javascript
Code
Aperçu dans le navigateur
<script> utilise les attributs globaux

src

  • Définit le lien vers un fichier javascript externe
  • Très utile pour charger le même code javascript sur plusieurs pages
L'intérieur de la balise <script> doit rester vide en cas d'utilisation de cet attribut
<script src="url">
Valeur Description Infos
url
  • L'url, le lien pointant vers un fichier javacript (format js)
  • En valeur absolu vers une ressource externe
  • Ou en valeur relative pour un élément interne
  • MDN Web Docs
  • HTML Living Standard
<script src="url"></script>

async

Indique que le fichier saisie dans l'attribut src doit être téléchargé en parallèle de l'affichage de la page et exécuté aussitôt
Ne fonctionne qu'avec l'attribut src
<script src="url" async>
Valeur Description Infos
Booléen async a la valeur false par défaut. Le fait de placer async à l'intérieur de la balise le rendra à true
  • MDN Web Docs
  • HTML Living Standard
  • Can i use
<script src="url" async></script>

defer

Indique que le fichier saisie dans l'attribut src doit être téléchargé en parallèle de l'affichage de la page et exécuté dès que la page sera entièrement chargé
Ne fonctionne qu'avec l'attribut src
<script src="url" defer>
Valeur Description Infos
Booléen defer a la valeur false par défaut, le fait de placer defer à l'intérieur de la balise le rendra à true
  • MDN Web Docs
  • HTML Living Standard
  • Can i use
<script src="url" defer></script>

crossorigin

Une demande cross-origin est une requête pour une ressource (feuilles de style, images, polices ou scripts...) située sur un autre serveur, un autre domaine.
Cette demande est gérée par CORS (Cross-Origin Resource Sharing) qui détermine si le navigateur est autorisé ou non à charger le contenu externe.
N'utilisez pas cet attribut si tous vos fichiers se situent sur votre serveur, votre domaine.
<script src="url" crossorigin="valeur">
Valeur Description Infos
anonymous
  • La demande cross-origin est envoyée sans identification et effectue une authentification HTTP de base
  • Valeur par défaut
  • MDN Web Docs
  • HTML Living Standard
  • Can i use
<script src="url" crossorigin="anonymous"></script>
use-credentials Demande d'origine croisée sera envoyée avec les informations d'identification, les cookies et le certificat
  • MDN Web Docs
  • HTML Living Standard
  • Can i use
<script src="url" crossorigin="use-credentials"></script>

referrerpolicy

Indique les informations à envoyer lors du chargement du fichier spécifié dans l'attribut src
Fonctionne uniquement avec l'attribut src
  • L'en-tête Referer contient l'adresse de la page web précédente.
    Elle est définie suite au clique d'un lien qui aboutit à la page courante. Cela permet de suivre la provenance des internautes et d'en tirer des informations à analyser
  • L'origine est définie par le protocole, l'hôte et le port (si indiqué) de la page courante.
    Par exemple : https://www.monsiteweb.com:443
    Le protocole est https
    L'hôte est www.monsiteweb.com
    Le port est 443
<script src="url" referrerpolicy="valeur"></script>
Valeur Description Infos
no-referrer-when-downgrade
  • Valeur par défaut
  • Indique que les informations d'en-tête Referer ne seront envoyée que si le fichier spécifié dans l'attribut src provient d'un site sécurisé équivalent ou plus élevé (https)
  • MDN Web Docs
  • Can i use
<script src="url" referrerpolicy="no-referrer-when-downgrade"></script>
no-referrer Signifie qu'aucune information d'en-tête Referer ne sera envoyée
  • MDN Web Docs
  • Can i use
<script src="url" referrerpolicy="no-referrer"></script>
origin Envoi les informations d'origine du fichier saisi dans l'attribut src comme en-tête Referer
  • MDN Web Docs
  • Can i use
<script src="url" referrerpolicy="origin"></script>
same-origin Envoi les informations d'origine du fichier saisi dans l'attribut src comme en-tête Referer s'il a la même origine
  • MDN Web Docs
  • Can i use
<script src="url" referrerpolicy="same-origin"></script>
origin-when-cross-origin Envoi les informations d'origine du fichier saisi dans l'attribut src comme en-tête Referer lorsqu'il n'a pas la même origine, sinon envoi l'url complète
  • MDN Web Docs
  • Can i use
<script src="url" referrerpolicy="origin"></script>
strict-origin Envoi les informations d'origine du fichier saisi dans l'attribut src comme en-tête Referer lorsque le protocole est le même
  • MDN Web Docs
  • Can i use
<script src="url" referrerpolicy="strict-origin"></script>
strict-origin-when-cross-origin Envoi les informations d'origine du fichier saisi dans l'attribut src comme en-tête Referer lorsqu'il n'a pas la même origine, sinon envoi l'url compléte si le protocole est le même
  • MDN Web Docs
  • Can i use
<script src="url" referrerpolicy="strict-origin-when-cross-origin"></script>
unsafe-url
  • Envoi les informations d'en-tête Referer du fichier indiqué dans l'attribut src dans tout les cas
  • ATTENTION : cette valeur présente un grand risque de sécurité
  • MDN Web Docs
  • Can i use
<script src="url" referrerpolicy="unsafe-url"></script>

type

  • L'attribut type indique le type du fichier lié par l'attribut src
  • Il sert à identifier également le script inséré entre <script> et </script>
<script type="valeur"></script>
Valeur Description Infos
type de document
  • La liste des types est disponible sur IANA Media Types list
  • La valeur la plus fréquente est : text/javascript pour un l'insertion d'un script javascript
  • MDN Web Docs
  • HTML Living Standard
  • Can i use
<script type="valeur"></script>
  • MDN Web Docs
  • HTML Living Standard
  • Can i use