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 Namensraum des Elements enthält. Der Standardnamensraum ist "http://www.w3.org/1999/xhtml".

attributes Optional

Ein Array, das die Attribute angibt, die bei der Bereinigung von HTML für dieses (erlaubte) Element erlaubt sind.

Jedes Attribut kann nach 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 Namensraum des Attributs enthält, der standardmäßig auf null gesetzt ist.

removeAttributes Optional

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

Jedes Attribut kann nach 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 Namensraum des Attributs enthält, der standardmäßig auf null gesetzt ist.

Keine (undefined).

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

<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 zuerst ein neues Sanitizer-Objekt, das initial <div> und <script> Elemente erlaubt. Anschließend wird allowElement() aufgerufen, um ein <p> Element hinzuzufügen, das als String-Parameter spezifiziert ist, und dann erneut, um ein <span> Element hinzuzufügen, das als Objekt spezifiziert ist. Anschließend holen wir die Konfiguration und protokollieren sie.

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 finale Konfiguration wird unten protokolliert. Diese beinhaltet die ursprünglichen Elemente (<div> und <script>) und die beiden mit allowElement() hinzugefügten (<p> und <span>).

Dieses Beispiel zeigt die Auswirkung der Verwendung von allowElement(), um Elemente hinzuzufügen, die bereits erlaubt sind oder die in der Konfiguration als "zu entfernen" gekennzeichnet 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 zuerst ein neues Sanitizer-Objekt, das anfänglich <div> Elemente erlaubt (wobei andere Attribute als id entfernt werden) und auch <span> Elemente mit beliebigen Kindelementen ersetzt.

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

Ein <span> Element wird dann zur Erlaubnisliste 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 finale Konfiguration wird protokolliert und unten angezeigt. Aus dem Protokoll sehen wir, 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.