Signatur
Beschreibung
Die Methode setAttribute() des Element-Interface setzt den Wert eines Attributs auf dem angegebenen Element. Existiert das Attribut bereits, wird der Wert aktualisiert; andernfalls wird ein neues Attribut mit dem angegebenen Namen und Wert hinzugefügt.
Wenn Sie mit dem Attr-Node arbeiten müssen (etwa um ihn von einem anderen Element zu klonen), bevor Sie ihn hinzufügen, können Sie stattdessen die Methode setAttributeNode() verwenden.
setAttribute() setzt den Wert eines Attributs auf dem angegebenen Element. Existiert das Attribut bereits, wird der Wert aktualisiert; andernfalls wird ein neues Attribut mit dem angegebenen Namen und Wert hinzugefügt.
Um den Wert eines Boolean-Attributes wie disabled zu setzen, können Sie einen beliebigen Wert angeben. Es spielt keine Rolle, welchen Wert Sie verwenden; ist das Attribut vorhanden, gilt sein Wert als true. Per Konvention aktiviert man Boolean-Attribute, indem man ihren Wert entweder auf den Namen des Attributs oder auf den leeren String ("") setzt. Das Fehlen eines Boolean-Attributs bedeutet, dass sein Wert false ist; um die Wirkung der Aktivierung eines Boolean-Attributs rückgängig zu machen, müssen Sie Element.removeAttribute() aufrufen.
Um den aktuellen Wert eines Attributs abzufragen, verwenden Sie getAttribute(); um ein Attribut zu entfernen, rufen Sie removeAttribute() auf.
Sicherheitshinweise: Einige Attribute können als Vektor für Cross-Site-Scripting-Angriffe (XSS) verwendet werden, wenn potenziell unsichere, von einem Benutzer bereitgestellte Strings ohne vorherige Bereinigung in den DOM eingefügt werden oder Skripte ausgeführt werden, die möglicherweise Schadcode enthalten.
Sie können diese Probleme mindern, indem Sie stets das passende trusted-type-Objekt (TrustedHTML, TrustedScript oder TrustedScriptURL) statt Strings zuweisen und Trusted Types mit der CSP-Direktive require-trusted-types-for erzwingen. Dadurch wird sichergestellt, dass die Eingabe durch eine Transformationsfunktion geleitet wird, die beispielsweise potenziell gefährliches Markup aus HTML entfernt, bevor es eingefügt wird.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $qualifiedName Pflicht | string | — | Ein String, der den qualifizierten Namen des Attributs enthält, dessen Wert gesetzt werden soll. Der Attributname wird automatisch in Kleinbuchstaben umgewandelt, wenn setAttribute() auf einem HTML-Element in einem HTML-Dokument aufgerufen wird. Das Format des qualifizierten Namens ist prefix:localName oder localName. |
| $value Pflicht | string | TrustedHTML | TrustedScript | TrustedScriptURL | — | Ein trusted type oder String mit dem Wert, der dem Attribut zugewiesen werden soll. Für Event-Handler-Content-Attribute (z.B. onclick, onload) ist ein TrustedScript erforderlich; HTMLIFrameElement.srcdoc erfordert TrustedHTML; HTMLScriptElement.src und SVGScriptElement.href erfordern TrustedScriptURL, sofern Trusted Types erzwungen werden. Für andere Attribute werden Trusted Types nicht erzwungen. Ein Nicht-String-Wert wird automatisch in einen String umgewandelt. Boolean-Attribute gelten als true, sobald sie am Element vorhanden sind; setzen Sie value auf den leeren String oder den Namen des Attributs. |
Rückgabewert
Beispiele
Sichere Attribute setzen — name-Attribut
const helloButton = document.querySelector("#hello_button");
helloButton.setAttribute("name", "helloButton");
// Setze den Button-Text auf name, um die Attributänderung zu zeigen
helloButton.innerText = helloButton.getAttribute("name");Reset-Button
const reloadButton = document.querySelector("#reset");
reloadButton.addEventListener("click", () => document.location.reload());Boolean-Attribut disabled umschalten
const toggleDisabledButton = document.querySelector("#toggle_disabled");
toggleDisabledButton.addEventListener("click", () => {
if (helloButton.disabled) {
// Button ist deaktiviert. Aktivieren durch Entfernen des Attributs
helloButton.removeAttribute("disabled");
} else {
// Button aktiviert. Deaktivieren durch Setzen eines beliebigen Werts
// (normalerweise "" oder "disabled")
helloButton.setAttribute("disabled", "disabled");
}
});Unsicheres Setzen — potenzieller XSS-Vektor
const button = document.querySelector("button");
const potentiallyUnsafeString = "alert(1)";
button.setAttribute("onclick", potentiallyUnsafeString);Trusted Types Tinyfill
if (typeof trustedTypes === "undefined")
trustedTypes = { createPolicy: (n, rules) => rules };TrustedTypePolicy mit DOMPurify anlegen
const policy = trustedTypes.createPolicy("my-policy", {
createHTML: (input) => DOMPurify.sanitize(input),
});TrustedHTML für srcdoc verwenden
// Der potenziell schädliche String
const untrustedString = "<p>I might be XSS</p><img src='x' onerror='alert(1)'>";
// TrustedHTML-Instanz mit der Policy erzeugen
const trustedHTML = policy.createHTML(untrustedString);
// Das TrustedHTML einfügen (enthält einen vertrauenswürdigen String)
const iframeElement = document.querySelector("#an_iframe");
iframeElement.setAttribute("srcdoc", trustedHTML);