HTMLScriptElement : proprit textContent

Valeur

La lecture de la proprit retourne une chane de caractres contenant le texte du script.

L'affectation de la proprit accepte soit un objet TrustedScript 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.

Description

La proprit textContent de l'interface HTMLScriptElement reprsente le contenu textuel l'intrieur de l'lment <script>.

Pour un script excutable (c'est--dire un script dont type indique qu'il s'agit d'un module ou d'un script classique), ce texte est du code excutable en ligne. Pour d'autres types, il peut s'agir d'une carte d'imports, de rgles de spculation ou d'un autre type de bloc de donnes.

Notez que si la proprit src est dfinie, le contenu de la proprit textContent est ignor.

La proprit textContent est galement dfinie sur Node et peut donc tre utilise avec d'autres nuds (et lments). Lorsqu'elle est utilise avec d'autres lments, la proprit n'attend pas et n'impose pas l'affectation d'un objet TrustedScript.

Considrations de scurit

La proprit textContent ainsi que les proprits identiques text et innerText peut constituer un vecteur d'attaques de cross-site scripting (XSS), o des chanes de caractres potentiellement non scurises fournies par une utilisateurice sont excutes. Par exemple, l'exemple suivant suppose que scriptElement est un lment <script> excutable, et que untrustedCode a t fourni par une utilisateurice :

const untrustedCode = "alert('Code potentiellement malveillant !');";
scriptElement.textContent = untrustedCode; // affiche l'alerte

Vous pouvez attnuer ces problmes en affectant systmatiquement des objets TrustedScript plutt que des chanes de caractres, et en appliquant les types de confiance l'aide de la directive CSP require-trusted-types-for. Cela garantit que la valeur passe par une fonction de transformation, qui a la possibilit de nettoyer ou de rejeter le texte avant son injection.

Le comportement de la fonction de transformation dpendra du cas d'utilisation spcifique ncessitant un script fourni par une utilisateurice. Si possible, vous devez restreindre les scripts autoriss exactement au code que vous souhaitez excuter. Si cela n'est pas possible, vous pouvez autoriser ou bloquer l'utilisation de certaines fonctions dans la chane de caractres fournie.

Exemples

Utiliser TrustedScript

Pour attnuer le risque d'XSS, vous devez toujours affecter des instances de TrustedScript la proprit textContent.

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 Trusted Types :

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

Ensuite, nous crons une TrustedTypePolicy qui dfinit une mthode createScript() pour transformer des chanes de caractres en instances de TrustedScript. Pour cet exemple, nous n'autoriserons que le script exact dont nous avons besoin.

const policy = trustedTypes.createPolicy("inline-script-policy", {
  createScript(input) {
    // Ici, dfinissez les scripts autoriss
    if (input === "const num = 10;\nconsole.log(num)") {
      return input; // autorise ce script exact
    }
    throw new TypeError(`Script non approuv bloqu : ${input}`);
  },
});

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, utilisez l'objet policy pour crer un objet trustedScript partir de la chane de caractres potentiellement non scurise, puis assignez le rsultat l'lment :

// Chane potentiellement malveillante
const untrustedScriptOne = "const num = 10;\nconsole.log(num)";

// Cre une instance de TrustedScript en utilisant la politique
const trustedScript = policy.createScript(untrustedScriptOne);

// Injecte le TrustedScript (qui contient une chane de caractres approuve)
el.textContent = trustedScript;

Comparaison entre textContent, text et innerText

Cet exemple montre qu'affecter un script chacune des proprits textuelles, comme textContent, donne la mme valeur lue depuis toutes les proprits textuelles.

Notez que dans ce cas, nous n'utilisons pas la politique pour crer des scripts approuvs (par souci de concision, nous supposerons que les chanes fournies sont approuves).

// Affecte la proprit textContent
el.textContent = "console.log(10);";

console.log(`textContent: ${el.textContent}`);
// "textContent: console.log(10);"

console.log(`text: ${el.text}`);
// "text: console.log(10);"

console.log(`innerText: ${el.innerText}`);
// "innerText: console.log(10);"

// Affecte la proprit text
el.text = "const num = 10;\nconsole.log(num)";

console.log(`textContent: ${el.textContent}`);
// textContent: const num = 10; console.log(num)"

console.log(`text: ${el.text}`);
// "text: const num = 10; console.log(num)"

console.log(`innerText: ${el.innerText}`);
// "innerText: const num = 10; console.log(num)"

// Affecte la proprit innerText
el.innerText = "const num = 10;alert('Aide')";

console.log(`textContent: ${el.textContent}`);
// textContent: const num = 10;alert('Aide')"

console.log(`text: ${el.text}`);
// "text: const num = 10;alert('Aide')"

console.log(`innerText: ${el.innerText}`);
// "innerText: const num = 10;alert('Aide')"

Spcifications

Compatibilit des navigateurs

Voir aussi

• La proprit text
• La proprit innerText