Sanitizer: removeUnsafe() method

The removeUnsafe() method of the {{domxref("Sanitizer")}} interface configures the sanitizer so that it will remove all elements and attributes that are considered XSS-unsafe by the browser.

The method can be called to make any Sanitizer XSS-safe.

Syntax

js-nolint

removeUnsafe()

Parameters

None.

Return value

true if the operation removed any elements, attributes, or event handler content attributes that are considered XSS-unsafe, and false if no elements or attributes were removed.

Description

The removeUnsafe() method configures the sanitizer so that it will remove all elements and attributes that are considered XSS-unsafe by the browser. This includes the elements {{htmlelement("embed")}}, {{htmlelement("frame")}}, {{htmlelement("iframe")}}, {{htmlelement("object")}}, {{htmlelement("script")}}, and {{SVGElement("use")}}, and the event handler content attributes such as onafterprint, onbeforeinput, and so on.

Note that if you're using the sanitizer with one of the "safe" HTML setters, such as {{domxref("Element.setHTML()")}} and {{domxref("ShadowRoot.setHTML()")}}, you do not need to call this method to make the sanitizer safe. When used in these setters the same elements and attributes are removed from the input, without modifying the Sanitizer instance that is passed.

Examples

Basic usage

The following code shows how removeUnsafe() is used.

// Create sanitizer.
const sanitizer = new Sanitizer(/* Some configuration */);

// Make the configuration XSS-safe
sanitizer.removeUnsafe();

Making a sanitizer configuration safe

This example demonstrates how calling removeUnsafe() makes the sanitizer configuration XSS-safe.

html

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

css

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

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

JavaScript

The code first creates a new Sanitizer object that allows the safe element {{htmlelement("p")}}, the unsafe elements {{htmlelement("script")}} and {{htmlelement("iframe")}}, and the unsafe onwebkitanimationend event handler attribute.

The code then calls removeUnsafe() on the sanitizer and logs its configuration.

if ("Sanitizer" in window) {

// Create sanitizer that allows
const sanitizer = new Sanitizer({
  elements: ["p", "script"],
  attributes: ["onwebkitanimationend"],
  replaceWithChildrenElements: ["iframe"],
});

// Make the sanitizer safe!
sanitizer.removeUnsafe();

// Log the sanitizer configuration
const sanitizerConfig = sanitizer.get();
log(JSON.stringify(sanitizerConfig, null, 2));

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

Results

The resulting configuration is shown below. Note how the unsafe elements and attributes have been removed from the "allow" lists to the corresponding "remove" lists. In this case we still have {{htmlelement("p")}} in the allowed elements, so only <p> elements in the input will be imported when the sanitizer is used.

{{EmbedLiveSample("Making a sanitizer configuration safe","100","480px")}}