SVGScriptElement: href-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Warnung: Die href.baseVal Eigenschaft repräsentiert die URL eines externen Skripts, das in das SVG-Skript-Element geladen wird. Solche APIs sind als Injection Sinks bekannt und stellen potenziell einen Vektor für Cross-Site-Scripting (XSS)-Angriffe dar.

Sie können dieses Risiko mindern, indem Sie eine Content Security Policy (CSP) verwenden, die die Orte einschränkt, von denen Skripts geladen werden können. Verwenden Sie außerdem immer TrustedScriptURL-Objekte anstelle von Zeichenfolgen und erzwingen Sie vertrauenswürdige Typen. Siehe Sicherheitsüberlegungen für weitere Informationen.

Die href-Eigenschaft der SVGScriptElement Schnittstelle gibt das Attribut href oder xlink:href des angegebenen <script>-Elements wieder.

In diesem Artikel

Wert

Ein SVGAnimatedString-Objekt.

Beschreibung

Die href-Eigenschaft gibt das Attribut href oder xlink:href 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

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

js
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:

js
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.

js
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.

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

js
// 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:

js
// 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

Spezifikation

Scalable Vector Graphics (SVG) 2
# __svg__SVGURIReference__href

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden