### Query Sanitizer Configuration with get()

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Use `get()` to inspect the effective configuration of a Sanitizer instance, showing allowed elements and attributes in their canonical form. Note that elements disallowed in safe contexts, like 'script', may be omitted.

```js
const a_simple_config = new Sanitizer({ elements: [ "div", "p", "span", "script" ] });

a_simple_config.get();
```

```json
{
  elements: [
    { "name": "div", "namespace": "http://www.w3.org/1999/xhtml" },
    { "name": "p", "namespace": "http://www.w3.org/1999/xhtml" },
    { "name": "span", "namespace": "http://www.w3.org/1999/xhtml" }
  ],
  attributes: [
    { "name": "href", "namespace": "" },
    { "name": "class, "namespace": "" },
    { "name": "id", "namespace": "" },
    // ... many more
  ]
}
```

--------------------------------

### Mixing Allow and Replace-with-Children Lists

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Combining allow-lists and replace-with-children-lists in a configuration is permissible. This example shows retaining simple styling elements while replacing others with their children.

```javascript
// Mixing allow and replace with children lists works.
const config_that_retains_simple_styling_but_most_text = new Sanitizer({
  elements: ["p", "b", "i"],
  replaceWithChildrenElements: ["div", "span", "em", "u", "s", "li"],
});
const styled_text = "<p>Some <span style='color: blue'>colourful</span> <u>styled</u> <b>text</b>";

// <div><p>Some colourful styled <b>text</b></p></div>
element.setHTML(styled_text, {sanitizer: config_that_retains_simple_styling_but_most_text});
```

--------------------------------

### Query Sanitizer Configuration with remove-lists

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

When querying a Sanitizer configured with `removeElements` or `removeAttributes`, the `get()` method returns the effective allow-list equivalents based on built-in defaults.

```js
new Sanitizer({
  removeElements: [ "span" ],
  removeAttributes: ["id", "class"]
}).get();
```

```json
{
  elements: [
    { "name": "div", "namespace": "http://www.w3.org/1999/xhtml" },
    { "name": "p", "namespace": "http://www.w3.org/1999/xhtml" },
    // ... many more. But no span.
  ],
  attributes: [
    { "name": "href", "namespace": "" },
    // ... many more. But no id or class.
  ]
}
```

--------------------------------

### Safe HTML Sanitization Example

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Demonstrates the 'safe' methods of the Sanitizer API, which remove script-related content and attributes like `onclick` and `onload`, while allowing other attributes and elements to pass through.

```javascript
element.setHTML(`<a href=about:blank onclick=alert(1) onload=alert(2) id=myid class=something><script>alert(3);</script>`);
// <div><a href="about:blank" id="myid" class="something"></a></div>
```

--------------------------------

### Local and Global Attribute Configuration

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Listing an attribute in both the global 'attributes' list and an element-specific 'removeAttributes' list is allowed. The element-specific action takes precedence. This example shows 'class' being globally allowed but removed from 'b' elements.

```javascript
const config_with_local_and_global_attributes = new Sanitizer({
  elements: [ "span", { name: "b", removeAttributes: [ "class" ] } ],
  attributes: ["class"]
});

// <div><span class="a">abc</span> <b>def</b></div>
element.setHTML("<span class='a'>abc</span> <b class='b'>def</b>",
                {sanitizer: config_with_local_and_global_attributes});
```

--------------------------------

### Combining Element Filtering and Child Preservation

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Combine 'elements' and 'replaceWithChildrenElements' to allow specific elements while preserving the children of others. This example allows 'b' and 'i' tags and replaces 'span' tags with their children.

```javascript
const config_replace_spans = new Sanitizer({
  elements: ["b", "i"],
  replaceWithChildrenElements: ["span"]
});

// <div>Fancy text with <b>pizzazz</b>.</div>
element.setHTML(
  "Fancy <span style='color:blue'>text with <b>pizzazz</b></span>.",
  { sanitizer: config_replace_spans}
);
```

--------------------------------

### Removing Specific Attributes from an Element

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Use 'removeAttributes' within an element's configuration to remove specific attributes from that element type. This example removes 'src' attributes from 'input' elements.

```javascript
const remove_src_attribute_from_input = new Sanitizer({
  elements: [{ name: "input", removeAttributes: ["src"]}],
});
```

--------------------------------

### Using Configuration Dictionary Directly vs. Sanitizer Object

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Shows two equivalent ways to apply a configuration: directly passing a dictionary to setHTML, or creating a Sanitizer object with the dictionary and passing that. Using a Sanitizer object is recommended for performance when the configuration is reused.

```javascript
const config_dict = {
  elements: [ "div", "p", "em", "b", "span" ],
  attributes: [ "class", "style" ]
};

// These two should be the same:
const some_html_string = "...";
div.setHTML(some_html_string, {sanitizer: config_dict});
div.setHTML(some_html_string, {sanitizer: new Sanitizer(config_dict)});
```

--------------------------------

### Basic Sanitizer Configuration with Unsafe HTML

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Demonstrates creating a Sanitizer with a configuration that includes 'script' elements and using it with both setHTML (which ignores unsafe configurations) and setHTMLUnsafe (which allows them).

```javascript
const an_unsafe_config = new Sanitizer({ 'elements': [ { name: 'script' } ] });
element.setHTML("<script>", { sanitizer: an_unsafe_config });  // <div></div>
element.setHTMLUnsafe("<script>", { sanitizer: an_unsafe_config });  // You now have a script. Congrats.
```

--------------------------------

### Performance Comparison: Dictionary vs. Sanitizer Object for Reused Configurations

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Compares the performance of repeatedly calling setHTML with a configuration dictionary versus using a pre-instantiated Sanitizer object. The Sanitizer object is expected to perform better due to amortized normalization work.

```javascript
// These should have the same results, but likely different performance:
const huge_array_of_strings = [ "...", ... ];

for (const str of huge_array_of_strings) {
  div.setHTML(str, {sanitizer: config_dict});
}

const sanitizer = new Sanitizer(config_dict);
for (const str of huge_array_of_strings) {
  div.setHTML(str, {sanitizer: sanitizer});
}
```

--------------------------------

### Sanitizer Configuration with Namespaces

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Illustrates configuring a Sanitizer to include elements and attributes across different namespaces, such as HTML, SVG, and xlink.

```javascript
const config_with_namespaces = new Sanitizer({
  elements: [
    'a',  // The HTML anchor element.
    { name: 'a' },  // Also the HTML anchor element.
    { name: 'a', namespace: 'http://www.w3.org/1999/xhtml' },  // Another one.
    { name: 'a', namespace: 'http://www.w3.org/2000/svg' }  // SVG's anchor element
  ],
  attributes: [
    'href',  // An href attribute. The one you'd expect on an HTML anchor.
    { name: 'href' },  // The very same.
    { name: 'href', namespace: '' },  // There it is again.
    { name: 'href', namespace: 'http://www.w3.org/1999/xlink' },  // xlink:href. SVG sometimes uses this.
    { name: 'href', namespace: 'http://www.w3.org/1999/xhtml' }  // This isn't a thing.
        // It won't match any HTML-defined href attributes. Probably the config
        // author made an error.
  ]
});
```

--------------------------------

### Query Sanitizer Configuration with getUnsafe()

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Use `getUnsafe()` to retrieve the configuration as it would be processed by the unsafe version of the API. This includes elements that might be disallowed in safe contexts, such as 'script'.

```js
a_simple_config.getUnsafe();
```

```json
{
  elements: [
    { "name": "div", "namespace": "http://www.w3.org/1999/xhtml" },
    { "name": "p", "namespace": "http://www.w3.org/1999/xhtml" },
    { "name": "span", "namespace": "http://www.w3.org/1999/xhtml" }
    { "name": "script", "namespace": "http://www.w3.org/1999/xhtml" }
  ],
  attributes: [
    // ... many more. Should be the same list as above.
  ]
}
```

--------------------------------

### Modify Sanitizer Configuration

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Demonstrates adding an element, removing an element, and retrieving the modified configuration.

```javascript
const s = new Sanitizer({ elements: ["div", "p", "b"] });
s.allowElement("span");
s.removeElement("b");
s.get();  // { elements: ["div", "p", "span"], removeElements: ["b"] }
          // Really, all these entries will be dictionaries with name and
          // namespace entries.
```

--------------------------------

### Configure Element-Specific Attributes

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Shows how to allow specific attributes for an element and how subsequent calls can overwrite attribute configurations.

```javascript
const s = new Sanitizer();
s.allowElement({name: "div", attributes: ["id", "class"]});
s.allowElement({name: "div", attributes: ["style"]});
// s now allows <div style="bla">, but will drop the id= from <div id="bla">
```

--------------------------------

### Allowing Specific Elements and Attributes

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Use 'elements' and 'attributes' to define what is permitted. This configuration allows only a predefined set of elements and attributes.

```javascript
const config_allow_some_formatting = new Sanitizer({
  elements: [ "div", "p", "em", "b", "img" ],  // Allows only 5 elements.
  attributes: [ "class" ]  // Allows only class attributes.
      // Output with "safe" and "unsafe" methods are the same for this config.
});
```

--------------------------------

### DOMPurify Profile Options

Source: https://github.com/wicg/sanitizer-api/blob/main/comparison.md

DOMPurify offers predefined profile options that enable multiple configuration settings at once, simplifying common sanitization scenarios.

```javascript
USE_PROFILES
```

--------------------------------

### Basic HTML Manipulation with Sanitizer API

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Demonstrates the basic usage of `setHTML` and `setHTMLUnsafe` for modifying DOM elements, and `parseHTML` and `parseHTMLUnsafe` for parsing HTML strings into Document instances. Use `setHTML` and `parseHTML` for safe operations, and their `Unsafe` counterparts when full fidelity is required.

```javascript
const example = `<b onclick="alert(1)">hello world</b>`;
const element = document.createElement("div");

// Modify element:
element.setHTML(example);  // <div><b>hello world</b></div>
element.setHTMLUnsafe(example);  // <div><b onclick="alert(1)">hello world</b></div>

// Return a Document instance:
Document.parseHTML(example);  // <html><head></head><body><b>hello world</b></body></html>
Document.parseHTMLUnsafe(example);  // <html><head></head><body><b onclick="alert(1)">hello world</b></body></html>
```

--------------------------------

### Mixing Allow and Block Lists

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Mixing allow-lists and remove-lists in the same configuration for elements will result in a TypeError. Ensure a configuration uses either an allow-list or a remove-list, but not both.

```javascript
// Mixing allow and block lists throws.
const config_that_mixes_allow_and_block_lists = new Sanitizer({
    elements: ["i", "u"],
    removeElements: ["u", "s"],
});
element.setHTML("bla", {sanitizer: config_that_mixes_allow_and_block_lists}); // throws
```

--------------------------------

### HTML Parsing Context Sensitivity

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Illustrates how `setHTML` and `parseHTML` observe the context of the element they are applied to. Parsing into a `<table>` element results in a more complete DOM structure compared to parsing into a generic `<div>` or a `Document`.

```javascript
const example_tr = `<tr><td>A table row.</td></tr>`;
const table = document.createElement("table");

element.setHTML(example_tr);  // <div>A table row.</div>
table.setHTML(example_tr);  // <table><tbody><tr><td>A table row.</td></tr></tbody></table>
Document.parseHTML(example_tr);  // <html><head></head><body>A table row.</body></html>
```

--------------------------------

### Removing Specific Elements and Attributes

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Use 'removeElements' and 'removeAttributes' to exclude specific items from the default set. This configuration removes <style> elements and 'class'/'style' attributes.

```javascript
const config_disallow_style_definitions = new Sanitizer({
  removeElements: [ "style" ],  // Allows the defaults, but without <style>.
  removeAttributes: [ "class", "style" ]  // No style or class attribute either.
      // And not XSS-y stuff, either, if used with a "safe" method.
      // Output with "safe" and "unsafe" methods might be quite different.
});
```

--------------------------------

### Configuring Attributes Per Element

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Specify attributes for individual elements using an object within the 'elements' array. This allows fine-grained control over attribute permissions on a per-element basis.

```javascript
const config_with_element_specific_attributes = new Sanitizer({
  elements: [
    "div", "p","em", "b",
    { name: "img", attributes: [ "src" ] }
  ],
  attributes: ["class"],
});
```

--------------------------------

### Duplicate Element Entries

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Configurations with duplicate element names, even across different forms (e.g., string name vs. object with namespace), will throw a TypeError. Ensure each element name is specified only once.

```javascript
// Duplicate entries throw.
const config_with_dupes = new Sanitizer({
  elements: [ "div", { name: "div", namespace: "http://www.w3.org/1999/xhtml" } ]
});
element.setHTML("bla", {sanitizer: config_with_dupes});  // throws.
```

```javascript
const config_with_dupes2 = new Sanitizer({
  elements: [
    { name: "div", attributes: ["class"] },
    { name: "div", attributes: ["style"] }
  ] });
element.setHTML("bla", config_with_dupes2);  // throws.
```

--------------------------------

### DOMPurify Miscellaneous Options

Source: https://github.com/wicg/sanitizer-api/blob/main/comparison.md

These miscellaneous options in DOMPurify control aspects like document handling, in-place modification, and content preservation during sanitization.

```javascript
WHOLE_DOCUMENT
SANITIZE_DOM
FORCE_BODY
KEEP_CONTENT
IN_PLACE
```

--------------------------------

### Handling Script Elements Safely

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Illustrates how `setHTMLUnsafe` can inject content into a script element, while `setHTML` on a script element acts as a no-op to prevent script injection. This ensures that script content is only modified when explicitly intended via `setHTMLUnsafe`.

```javascript
const sneaky = document.createElement("script");
sneaky.setHTMLUnsafe("alert('Surprise!');");
// <script>alert('Surprise!');</script>

sneaky.setHTMLUnsafe("boring();");  // <script>boring();</script>
sneaky.setHTML("alert('Surprise!');");  // <script>boring();</script>
```

--------------------------------

### XML Document Parsing with Sanitizer API

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Shows how parsing in XML documents adheres to HTML parsing rules, contrasting with `innerHTML`. `setHTML` on an element within an XHTML document correctly handles case and closing elements, while direct assignment to `innerHTML` might throw errors.

```javascript
const element_xml = new DOMParser().parseFromString("<html xmlns='http://www.w3.org/1999/xhtml'><body><div/></body></html>", "application/xhtml+xml").getElementsByTagName("div")[0];
const example_not_xml = "<bLoCkQuOtE>bla";

element_xml.getRootNode().contentType;  // application/xhtml+xml
element_xml.innerHTML = example_not_xml;  // Throws.
element_xml.setHTML(example_not_xml);  // <div xmlns="http://www.w3.org/1999/xhtml"><blockquote>bla</blockquote></div>
                                       // Note case and closing elements.
element.setHTML(example_not_xml);  // Same as above.
```

--------------------------------

### DOMPurify Hooks

Source: https://github.com/wicg/sanitizer-api/blob/main/comparison.md

DOMPurify provides a hook system for intercepting and modifying the sanitization process at various stages, offering fine-grained control.

```javascript
beforeSanitizeElements
uponSanitizeElement
afterSanitizeElements
beforeSanitizeAttributes
uponSanitizeAttribute
afterSanitizeAttributes
beforeSanitizeShadowDOM
uponSanitizeShadowNode
afterSanitizeShadowDOM
```

--------------------------------

### Allowing HTML Comments

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Enable the handling of HTML comment nodes by setting the 'comments' option to true. This allows comments to be preserved in the sanitized output.

```javascript
const config_comments: new Sanitizer({ comments: true });
element.setHTML("XXX<!-- Hello world! -->XXX", {sanitizer: config_comments});
// <div>XXX<!-- Hello world! -->XXX</div>
```

--------------------------------

### Add Contributor to Pull Request

Source: https://github.com/wicg/sanitizer-api/blob/main/CONTRIBUTING.md

Use this syntax to add a GitHub username as a contributor to a pull request, with one username per line.

```markdown
+@github_username
```

--------------------------------

### DOMPurify Return Value Types

Source: https://github.com/wicg/sanitizer-api/blob/main/comparison.md

DOMPurify supports various return types for sanitized content, influencing allowed tags. Use these constants to specify the desired output format.

```javascript
RETURN_DOM
RETURN_DOM_FRAGMENT
RETURN_DOM_IMPORT
RETURN_TRUSTED_TYPE
```

--------------------------------

### DOMPurify Content Filtering Options

Source: https://github.com/wicg/sanitizer-api/blob/main/comparison.md

Configure DOMPurify to control which HTML tags, attributes, and protocols are allowed or forbidden. These options help define the sanitization scope.

```javascript
ALLOWED_TAGS
ALLOWED_ATTR
FORBID_TAGS
FORBID_ATTR
ADD_TAGS
ADD_ATTR
ALLOW_DATA_ATTR
ALLOW_UNKNOWN_PROTOCOLS
ALLOWED_URI_REGEXP
ADD_URI_SAFE_ATTR
ALLOW_ARIA_ATTR
SAFE_FOR_TEMPLATES
SAFE_FOR_JQUERY
```

--------------------------------

### Replacing Elements While Preserving Children

Source: https://github.com/wicg/sanitizer-api/blob/main/explainer.md

Utilize 'replaceWithChildrenElements' to remove specified elements but keep their child content. This is useful for stripping formatting while retaining text.

```javascript
const config_that_removes_elements_but_preserves_their_children = new Sanitizer({
 replaceWithChildrenElements: ["span", "em", "u", "s", "i", "b"]
});

element.setHTML(
  "Fancy <b>text</b> with <span style='color:blue'>pizzazz</span>.",
  { sanitizer: config_that_removes_elements_but_preserves_their_children });
  // <div>Fancy text with pizzazz.</div>
```

--------------------------------

### Remove Contributor from Pull Request

Source: https://github.com/wicg/sanitizer-api/blob/main/CONTRIBUTING.md

Use this syntax to remove a GitHub username from a pull request, typically to correct an accidental addition or to remove yourself if you had no part in designing the feature.

```markdown
-@github_username
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.