HTMLScriptElement : proprit src

Valeur

La lecture de la proprit retourne une chane contenant l'URI du script de l'lment.

L'affectation de la proprit accepte soit un objet TrustedScriptURL soit une chane de caractres.

Exceptions

TypeError

Leve si la proprit est affecte avec une chane de caractres lorsque les types de confiance sont appliqus par une CSP et qu'aucune politique par dfaut n'est dfinie. Elle est galement leve si l'URL rcupre ne peut pas tre analyse correctement comme le type indiqu, par exemple un module ou un importmap.

Description

La proprit src reprsente l'URL d'un script externe. Si elle est dfinie, les scripts fournis via les proprits de texte text, textContent ou innerText sont ignors.

Considrations de scurit

La proprit src est utilise pour charger et excuter des scripts externes. Le script rcupr s'excute dans le contexte de la page courante et peut donc faire tout ce que peut faire le code de votre site (mme si l'URL n'est pas de la mme origine que votre site). Si l'entre est fournie par une utilisateurice, cela constitue un vecteur possible d'attaques de cross-site scripting (XSS).

Il est extrmement risqu d'accepter et d'excuter des URL arbitraires provenant d'origines non fiables. Un site Web doit contrler les scripts autoriss s'excuter en dfinissant une Politique de scurit du contenu (CSP) avec la directive script-src (ou un repli dfini dans default-src). Cela permet de restreindre les scripts ceux provenant de l'origine courante, d'un ensemble spcifique d'origines, ou mme de fichiers particuliers.

Si vous utilisez cette proprit et que vous appliquez les types de confiance (en utilisant la directive CSP require-trusted-types-for), vous devrez toujours affecter des objets TrustedScriptURL plutt que des chanes. Cela garantit que la valeur passe par une fonction de transformation, qui a la possibilit de rejeter ou de modifier l'URL avant son injection.

Mme si la ressource est approuve par votre site, elle peut toujours tre compromise lors d'une attaque contre la chane d'approvisionnement. Pour vous protger contre ce type d'attaque, vous devez utiliser la fonctionnalit subresource integrity.

Exemples

Utiliser TrustedScriptURL

Pour attnuer le risque d'XSS, vous devez toujours affecter des instances de TrustedScriptURL la proprit src. Vous devez galement le faire si vous appliquez les types de confiance pour d'autres raisons et que vous souhaitez autoriser certaines sources de scripts qui ont t permises (par CSP: script-src).

Les types de confiance ne sont pas encore pris en charge par tous les navigateurs, donc dfinissons d'abord le tinyfill des types de confiance. Cela agit comme un remplacement transparent de l'API JavaScript des types de confiance :

if (typeof trustedTypes === "undefined")
  trustedTypes = { createPolicy: (n, rules) => rules };

Ensuite, nous crons une TrustedTypePolicy qui dfinit une mthode createScriptURL() pour transformer des chanes de caractres en instances de TrustedScriptURL.

Dans cet exemple, supposons que vous souhaitiez autoriser un ensemble prdfini d'URL dans le tableau scriptAllowList et consigner les autres scripts.

const scriptAllowList = [
  // Liste d'URL autorises
];
const policy = trustedTypes.createPolicy("script-url-policy", {
  createScriptURL(input) {
    if (scriptAllowList.includes(input)) {
      return input; // autorise le script
    }
    console.log(`Script pas prsent dans scriptAllowList : ${input}`);
    return ""; // Bloque le script
  },
});

Ensuite, crez l'lment script auquel vous assignerez la valeur et obtenez une rfrence cet lment.

<script id="el"></script>

// Rcupre l'lment script dans lequel nous injectons le code
const el = document.getElementById("el");

Ensuite, nous utilisons l'objet policy pour crer une instance de trustedScriptURL partir de la chane de caractres potentiellement non scurise, puis nous assignons le rsultat l'lment :

// Chane potentiellement malveillante
// Nous n'inclurons pas untrustedScriptURL dans notre tableau scriptAllowList
const untrustedScriptURL = "https://evil.example.com/naughty.js";

// Create a TrustedScriptURL instance using the policy
const trustedScriptURL = policy.createScriptURL(untrustedScriptURL);

// Injecte le TrustedScriptURL (qui contient une URL approuve)
el.src = trustedScriptURL;

Lire la proprit src

Supposons que le code s'excute sur un site dont l'URL est  https://example.com .

<script id="script-with-src" type="module" src="/main.js"></script>
<script id="script-without-src" type="module"></script>

const script_with_src = document.getElementById("script-with-src");
console.log(script_with_src.src); // Affiche : "https://example.com/main.js"
const script_without_src = document.getElementById("script-without-src");
console.log(script_without_src.src); // Affiche : ""

Spcifications

Compatibilit des navigateurs