Sanitizer: allowElement() Methode

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 Standardnamespace ist "http://www.w3.org/1999/xhtml".

attributes Optional

Ein Array, das die Attribute angibt, die bei diesem (erlaubten) Element beim Bereinigen von HTML erlaubt sind.

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

name

Ein String mit dem Namen des Attributs.

namespace Optional

Ein String mit dem Namespace des Attributs, der standardmäßig null ist.

removeAttributes Optional

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

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

name

Ein String mit dem Namen des Attributs.

namespace Optional

Ein String mit dem Namespace des Attributs, der standardmäßig null ist.

None (undefined).

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 anfänglich <div> und <script> Elemente erlaubt. Anschließend 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 ermitteln dann die Konfiguration und geben sie aus.

if ("Sanitizer" in window) {

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

// Allow <p> specifying an 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. Diese umfasst die ursprünglichen Elemente (<div> und <script>) sowie die beiden mit allowElement() hinzugefügten (<p> und <span>).

Dieses Beispiel zeigt die Wirkung der Verwendung von allowElement(), um Elemente hinzuzufügen, die bereits erlaubt sind, oder die 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 anfänglich <div> Elemente erlaubt (andere Attribute als id werden entfernt) und ersetzt auch <span> Elemente durch beliebige Kindelemente.

Anschließend wird allowElement() aufgerufen, um zunächst 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 angefügt.

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

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 ist unten dargestellt. 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.