SVGScriptElement: href-Eigenschaft

Wert

Ein SVGAnimatedString-Objekt.

Beschreibung

Die href-Eigenschaft gibt das Attribut href oder xlink:href Veraltet des angegebenen <script>-Elements wieder. Das Attribut kann geändert werden, indem href.baseVal festgelegt wird (href.animVal ist schreibgeschützt und spiegelt den Wert von baseVal wider).

Sicherheitsüberlegungen

Die href.baseVal-Eigenschaft wird verwendet, um externe Skripte zu laden und auszuführen. Wenn das SVG inline deklariert ist, wird das abgerufene Skript im Kontext der aktuellen Seite ausgeführt und kann daher alles tun, was Ihr eigener Website-Code tun kann (selbst wenn die URL nicht aus derselben Herkunft wie Ihre Site stammt). Wenn die Eingabe von einem Benutzer bereitgestellt wird, ist dies ein möglicher 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 ausgeführt werden dürfen, indem sie eine Content Security Policy (CSP) mit der script-src-Direktive (oder einem Rückfall definiert in default-src) verwendet. Dies kann Skripte auf diejenigen vom aktuellen Ursprung oder einer spezifischen Menge von Ursprüngen oder sogar bestimmten Dateien beschränken.

Wenn Sie diese Eigenschaft verwenden und vertrauenswürdige Typen erzwingen (unter Verwendung der require-trusted-types-for CSP-Direktive), müssen Sie immer TrustedScriptURL-Objekte anstelle von Zeichenfolgen zuweisen. Dies stellt sicher, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die die Möglichkeit hat, die URL abzulehnen oder zu ändern, bevor die Ressource abgerufen wird.

Beispiele

Zugriff auf die href-Eigenschaft

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <script id="myScript" href="script.js"></script>
</svg>

const scriptElement = document.getElementById("myScript");

// Access the href property
console.log(scriptElement.href.baseVal); // Output: "script.js"

Festlegen der href.baseVal-Eigenschaft

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

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

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

Als Nächstes erstellen wir eine TrustedTypePolicy, die eine createScriptURL()-Methode definiert, um Eingabezeichenfolgen 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 möchten und alle anderen Skripte protokollieren.

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 definieren wir ein ähnliches SVG und Skript-Element wie im vorherigen Beispiel und erhalten das Element, in das wir die URL injizieren wollen.

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <script id="aScriptElement" href="example.js"></script>
</svg>

// Get the script element we're injecting the URL into
const scriptElement = document.getElementById("aScriptElement");

Dann verwenden wir das policy-Objekt, um ein trustedScriptURL-Objekt aus der potenziell unsicheren Eingabezeichenfolge zu erstellen und das Ergebnis der href.baseVal-Eigenschaft des Elements zuzuweisen:

// The potentially malicious string
// We won't be including untrustedScript 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)
scriptElement.href.baseVal = trustedScriptURL;

Spezifikationen

Browser-Kompatibilität