Sanitizer: allowElement() Methode

Syntax

allowElement(element)

Parameter

element

Ein String, der den Namen des erlaubten Elements angibt oder ein Objekt mit den folgenden Eigenschaften:

name

Ein String, der den Namen des Elements enthält.

namespace Optional

Ein String, der den Namespace des Elements enthält. Der Standard-Namespace ist "http://www.w3.org/1999/xhtml".

attributes Optional

Ein Array, das die Attribute angibt, die für dieses (erlaubte) Element beim HTML-Sanitizing erlaubt sind.

Jedes Attribut kann durch seinen Namen (ein String) oder als Objekt mit den folgenden Eigenschaften angegeben werden:

name

Ein String, der den Namen des Attributs enthält.

namespace Optional

Ein String, der den Namespace des Attributs enthält, der standardmäßig auf null gesetzt ist.

removeAttributes Optional

Ein Array, das die Attribute angibt, die bei diesem (erlaubten) Element beim HTML-Sanitizing entfernt werden sollen.

Jedes Attribut kann durch seinen Namen (ein String) oder als Objekt mit den folgenden Eigenschaften angegeben werden:

name

Ein String, der den Namen des Attributs enthält.

namespace Optional

Ein String, der den Namespace des Attributs enthält, der standardmäßig auf null gesetzt ist.

Rückgabewert

Keiner (undefined).

Beispiele

Anleitung zum Zulassen von Elementen

Dieses Beispiel zeigt, wie allowElement() verwendet wird, um ein Element zur elements Konfiguration des Sanitizers (die Liste der erlaubten Elemente) hinzuzufügen.

<pre id="log"></pre>

#log {
  height: 400px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.textContent = text;
}

JavaScript

Der Code erstellt zunächst ein neues Sanitizer-Objekt, das zunächst <div> und <script> Elemente erlaubt. Dann wird allowElement() aufgerufen, um ein <p>-Element hinzuzufügen, das als String-Parameter angegeben ist, und dann erneut, um ein <span>-Element hinzuzufügen, das als Objekt angegeben ist. Wir erhalten und protokollieren dann die Konfiguration.

if ("Sanitizer" in window) {

// Create sanitizer using SanitizerConfig
const sanitizer = new Sanitizer({
  elements: ["div", "script"],
});

// Allow <p> specifying a string
sanitizer.allowElement("p");

// Allow <span> specifying an object
sanitizer.allowElement({ name: "span" });

let sanitizerConfig = sanitizer.get();
log(JSON.stringify(sanitizerConfig, null, 2));

} else {
  log("The HTML Sanitizer API is NOT supported in this browser.");
}

Ergebnisse

Die endgültige Konfiguration wird unten protokolliert. Dies beinhaltet die ursprünglichen Elemente (<div> und <script>) und die beiden mit allowElement() hinzugefügten (<p> und <span>).

Zulassen von bereits erlaubten oder entfernten Elementen

Dieses Beispiel zeigt die Wirkung der Verwendung von allowElement(), um Elemente hinzuzufügen, die bereits erlaubt sind oder in der Konfiguration als "zu entfernen" markiert sind.

<pre id="log"></pre>

#log {
  height: 400px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.textContent = text;
}

JavaScript

Der Code erstellt zunächst ein neues Sanitizer-Objekt, das zunächst <div>-Elemente erlaubt (mit Ausnahme von id-Attributen) und außerdem <span>-Elemente mit beliebigen Kind-Elementen ersetzt.

Dann wird allowElement() aufgerufen, zuerst um ein <div>-Element hinzuzufügen, das style-Attribute entfernt. Da das <div>-Element bereits erlaubt ist, wird es aus der elements Konfiguration entfernt und die <div>-Elementdefinition wird angehängt.

Ein <span>-Element wird dann zur Liste der erlaubten Elemente hinzugefügt, was es aus der replaceWithChildrenElements Konfigurationsliste entfernt.

if ("Sanitizer" in window) {

// Create sanitizer using SanitizerConfig
const sanitizer = new Sanitizer({
  elements: [{ name: "div", attributes: [{ name: "id" }] }],
  replaceWithChildrenElements: ["span"],
});

// Allow <div> elements.
// Allow id elements but strip their style attributes
sanitizer.allowElement({
  name: "div",
  removeAttributes: ["style"],
});

// Allow <span> elements
sanitizer.allowElement("span");

let sanitizerConfig = sanitizer.get();
log(JSON.stringify(sanitizerConfig, null, 2));

} else {
  log("The HTML Sanitizer API is NOT supported in this browser.");
}

Ergebnisse

Die endgültige Konfiguration wird protokolliert und unten angezeigt. Aus dem Protokoll können wir sehen, dass der ursprüngliche Filter für das <div>-Element entfernt und die neue Definition zur elements-Liste hinzugefügt wurde. Das Hinzufügen des <span>-Elements zur elements-Liste hat es aus der replaceWithChildrenElements-Liste entfernt.

Spezifikationen

Browser-Kompatibilität