HTMLScriptElement: src-Eigenschaft

Wert

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

Das Setzen der Eigenschaft akzeptiert entweder ein TrustedScriptURL-Objekt oder einen String.

Ausnahmen

TypeError

Wird ausgelöst, wenn die Eigenschaft mit einem String gesetzt wird, während Trusted Types durch eine CSP durchgesetzt werden und keine Standardrichtlinie definiert ist. Dies wird auch ausgelöst, wenn die abgerufene URL nicht erfolgreich als ihr angegebener Typ, wie 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 auch der eigene Website-Code tun kann (selbst wenn die URL nicht von derselben Origin 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 kontrollieren, welche Skripte mit einer Content Security Policy (CSP) mit der script-src-Direktive (oder einem Fallback, das in default-src definiert ist) ausgeführt werden dürfen. Dies kann Skripte auf solche vom aktuellen Ursprung oder einen spezifischen Satz von Ursprüngen oder sogar auf bestimmte Dateien beschränken.

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

Selbst wenn die Ressource von Ihrer Website vertrauenswürdig ist, kann sie in einem Supply-Chain-Angriff kompromittiert werden. Um sich gegen diese Art von Angriffen zu schützen, sollten Sie die Subresource Integrity verwenden.

Beispiele

Verwendung von TrustedScriptURL

Um das Risiko von XSS zu mindern, sollten Sie 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 JavaScript-API der vertrauenswürdigen Typen:

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

Als Nächstes erstellen wir eine TrustedTypePolicy, die eine createScriptURL()-Methode definiert, um Eingabestrings in TrustedScriptURL-Instanzen zu transformieren.

Für den Zweck dieses Beispiels 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 werden, und erhalten einen Zugriff 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 eine trustedScriptURL-Instanz aus dem potenziell unsicheren Eingabestring zu erstellen und das Ergebnis dem Element zuzuweisen:

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

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

// 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 angenommen wird, dass die Seiten-URL https://example.com lautet.

<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