HTMLScriptElement: src-Eigenschaft

Wert

Das Abrufen der Eigenschaft gibt einen String zurück, der die Skript-URI des Elements enthält.

Beim Setzen der Eigenschaft wird entweder ein TrustedScriptURL-Objekt oder ein String akzeptiert.

Ausnahmen

TypeError

Wird ausgelöst, wenn die Eigenschaft mit einem String gesetzt wird, während Trusted Types durch eine CSP erzwungen werden und keine Standard-Richtlinie definiert ist. Dies wird auch ausgelöst, wenn die abgerufene URL nicht erfolgreich als ihr angegebener Typ, wie zum Beispiel ein Modul oder Importmap, geparst werden kann.

Beschreibung

Die src-Eigenschaft repräsentiert die URL eines externen Skripts. Wenn gesetzt, werden Skripte, die über die Texteigenschaften text, textContent oder innerText bereitgestellt werden, ignoriert.

Sicherheitsüberlegungen

Die src-Eigenschaft wird verwendet, um externe Skripte zu laden und auszuführen. Das abgerufene Skript wird im Kontext der aktuellen Seite ausgeführt und kann daher alles tun, was der eigene Website-Code tun kann (selbst wenn die URL nicht aus dem gleichen Ursprung wie Ihre Seite stammt). Wenn die Eingabe von einem Benutzer bereitgestellt wird, ist dies ein potenzieller Vektor für Cross-Site-Scripting (XSS)-Angriffe.

Es ist äußerst riskant, willkürliche URLs von nicht vertrauenswürdigen Ursprüngen zu akzeptieren und auszuführen. Eine Website sollte durch eine Content Security Policy (CSP) mit der script-src-Direktive (oder einem Fallback definiert in default-src) kontrollieren, welche Skripte ausgeführt werden dürfen. Dies kann Skripte darauf beschränken, nur von dem aktuellen Ursprung oder einer bestimmten Menge von Ursprüngen oder sogar von bestimmten Dateien zu stammen.

Wenn Sie diese Eigenschaft verwenden und vertrauenswürdige Typen durchsetzen (mithilfe der require-trusted-types-for-CSP-Direktive), müssen Sie immer TrustedScriptURL-Objekte anstelle von Strings zuweisen. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Chance hat, die URL abzulehnen oder zu modifizieren, bevor sie injiziert wird.

Selbst wenn die Ressource von Ihrer Website als vertrauenswürdig angesehen wird, kann sie dennoch bei einem Supply-Chain-Angriff kompromittiert werden. Um gegen diese Art von Angriffen zu schützen, sollten Sie das Subresource Integrity-Feature verwenden.

Beispiele

Verwendung von TrustedScriptURL

Um das Risiko von XSS zu mindern, sollten wir immer TrustedScriptURL-Instanzen der src-Eigenschaft zuweisen. Wir müssen dies auch tun, wenn wir aus anderen Gründen vertrauenswürdige Typen durchsetzen und einige Skriptquellen zulassen möchten, die erlaubt wurden (durch CSP: script-src).

Vertrauenswürdige Typen werden noch nicht in allen Browsern unterstützt, daher definieren wir zuerst das trusted types tinyfill. Dies fungiert als transparenter Ersatz für die vertrauenswürdige Typen JavaScript-API:

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

Als Nächstes erstellen wir eine TrustedTypePolicy, die eine createScriptURL()-Methode zur Transformation von Eingabestrings in TrustedScriptURL-Instanzen definiert.

Für dieses Beispiel nehmen wir an, dass wir eine vordefinierte Menge von URLs im scriptAllowList-Array zulassen und alle anderen Skripte protokollieren möchten.

const scriptAllowList = [
  // Some list of allowed URLs
];
const policy = trustedTypes.createPolicy("script-url-policy", {
  createScriptURL(input) {
    if (scriptAllowList.includes(input)) {
      return input; // allow the script
    }
    console.log(`Script not in scriptAllowList: ${input}`);
    return ""; // Block the script
  },
});

Als Nächstes erstellen wir das Skriptelement, dem wir den Wert zuweisen, und erhalten einen Handle auf das Element.

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

// Get the script element we're injecting the code into
const el = document.getElementById("el");

Dann verwenden wir das policy-Objekt, um ein trustedScript-Objekt aus dem potenziell unsicheren Eingabestring zu erstellen und das Ergebnis dem Element zuzuweisen:

// The potentially malicious string
// We won't be including untrustedScript in our scriptAllowList array
const untrustedScript = "https://evil.example.com/naughty.js";

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

// Inject the TrustedScriptURL (which contains a trusted URL)
el.src = trustedScriptURL;

Lesen der src-Eigenschaft

Dieses Beispiel zeigt, wie Sie die src-Eigenschaft für die beiden unten stehenden Skriptelemente lesen können, wobei die Seiten-URL https://example.com ist.

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

Der Code liest jedes der Skriptelemente und protokolliert die Ausgabe der src-Eigenschaft.

const scriptWithSrc = document.getElementById("script-with-src");
console.log(scriptWithSrc.src); // Output: "https://example.com/main.js"
const scriptWithoutSrc = document.getElementById("script-without-src");
console.log(scriptWithoutSrc.src); // Output: ""

Spezifikationen

Browser-Kompatibilität