JavaScript Element setHTMLUnsafe() Method

What You’ll Learn

Element.setHTMLUnsafe() is an instance method that parses HTML into a DocumentFragment and replaces the element’s subtree. Unlike innerHTML, it parses declarative shadow roots. Learn MDN’s injection-sink warnings, TrustedHTML + Trusted Types, optional Sanitizer configs, when to prefer setHTML(), and five try-it labs aligned with MDN.

Introduction

Sometimes you need to inject HTML from a string — CMS output, server-rendered fragments, or components with declarative shadow DOM. The familiar element.innerHTML = html approach does not parse declarative shadow roots and offers no built-in sanitization.

element.setHTMLUnsafe(input, options) parses the string into a DocumentFragment, optionally filters it with a Sanitizer, and replaces the element’s subtree (MDN). Declarative shadow roots in the input are parsed into real ShadowRoot nodes — something innerHTML cannot do.

This page is part of JavaScript Element. Pair with setHTML() (XSS-safe alternative), getHTML() (serialize out), and shadowRoot (imperative shadow DOM).

Understanding the setHTMLUnsafe() Method

Calling el.setHTMLUnsafe(input, options) parses input and replaces the element’s contents with the resulting subtree (MDN).

• It is an instance method on Element.
• input — TrustedHTML instance or HTML string (MDN).
• options.sanitizer — optional Sanitizer, SanitizerConfig, or "default" (XSS-safe default config). If omitted, no sanitizer runs (MDN).
• Returns undefined.
• Parses declarative shadow roots; only the first per host is created (MDN).
• Drops elements invalid in the current element’s context (e.g. tr outside table) (MDN).
• Throws TypeError for invalid sanitizer config (MDN).
• Safe alternative for user HTML: setHTML() (MDN).

📝 Syntax

General form of Element.setHTMLUnsafe (MDN):

setHTMLUnsafe(input)
setHTMLUnsafe(input, options)

Parameters

• input — TrustedHTML or HTML string to parse and inject (MDN).
• options.sanitizer (optional) — Sanitizer, SanitizerConfig, or "default". If omitted, no sanitizer is used (MDN).

Return value

undefined (MDN).

Exceptions

• TypeError — invalid SanitizerConfig, invalid string for sanitizer, or non-Sanitizer value (MDN).

Common patterns

const target = document.getElementById("target");
const html = '<p>Hello</p><script>alert(1)</script>';

// No sanitizer — all entities injected (MDN: injection sink!)
target.setHTMLUnsafe(html);

// Default XSS-safe sanitizer config (MDN)
target.setHTMLUnsafe(html, { sanitizer: "default" });

// TrustedHTML — no sanitizer needed when policy already sanitized
const trusted = policy.createHTML(html);
target.setHTMLUnsafe(trusted);

// Custom sanitizer — can allow script unlike setHTML() (MDN)
const sanitizer = new Sanitizer({ elements: ["div", "p", "script"] });
target.setHTMLUnsafe(html, { sanitizer });

Examples Gallery

Examples follow MDN Element.setHTMLUnsafe() patterns. Use View Output or Try It Yourself for each case. Feature-detect setHTMLUnsafe and Sanitizer in supporting browsers.

const html = '<p>Hello</p><strong>Trusted markup</strong>';
const target = document.getElementById("target");

// No sanitizer — everything in the string is injected (MDN)
target.setHTMLUnsafe(html);

console.log(target.innerHTML);

<p>Hello</p><strong>Trusted markup</strong>

// Tinyfill when trustedTypes is missing (MDN pattern)
if (typeof trustedTypes === "undefined") {
  trustedTypes = { createPolicy: (n, rules) => rules };
}

const policy = trustedTypes.createPolicy("my-policy", {
  createHTML: (input) => DOMPurify.sanitize(input)
});

const untrusted = 'abc <script>alert(1)</script> def';
const trustedHTML = policy.createHTML(untrusted);
const target = document.getElementById("target");

// TrustedHTML already sanitized — no sanitizer param (MDN)
target.setHTMLUnsafe(trustedHTML);

console.log(target.innerHTML);

abc  def

const untrusted = 'abc <script>alert(1)</script> def';
const target = document.getElementById("target");

target.setHTMLUnsafe(untrusted, { sanitizer: "default" });

console.log(target.innerHTML); // script removed

abc  def

const html = '<div><p>Hi</p><script>console.log("injected")</script></div>';
const target = document.getElementById("target");

const sanitizer = new Sanitizer({
  elements: ["div", "p", "script"] // script allowed with setHTMLUnsafe (MDN)
});

target.setHTMLUnsafe(html, { sanitizer });

console.log(target.innerHTML);

<div><p>Hi</p><script>...</script></div>

const input = '<img src=x onclick=alert(1) onerror=alert(2)>';
const target = document.querySelector("#target");

// Safe — strips onclick/onerror (MDN)
target.setHTML(input);
console.log("setHTML:", target.innerHTML);

// Unsafe — keeps event handler attributes (MDN)
target.setHTMLUnsafe(input);
console.log("setHTMLUnsafe:", target.innerHTML);

// Same as setHTMLUnsafe for handlers (MDN)
// target.innerHTML = input;

setHTML: <img src="x">
setHTMLUnsafe: <img src="x" onclick="alert(1)" onerror="alert(2)">

🚀 Common Use Cases

• Injecting HTML that contains declarative shadow roots (MDN).
• Trusted server-rendered fragments where sanitization happened upstream.
• Using TrustedHTML + Trusted Types at injection sinks (MDN).
• Applying sanitizer: "default" when setHTML() is unavailable.
• Edge cases requiring specific unsafe elements via a controlled Sanitizer.
• Pairing with setHTML() for user-facing content.

📝 Notes

• Baseline 2025 on MDN — newly available since September 2025. Feature-detect on older browsers.
• Not Deprecated, Experimental, or Non-standard — defined in the HTML specification.
• Injection sink: no sanitizer by default; potentially less safe than innerHTML for scripts (MDN).
• MDN: almost always prefer setHTML() when available for user-provided HTML.
• Use TrustedHTML + Trusted Types CSP to audit sanitization at few central points (MDN).
• Related: setHTML(), getHTML(), innerHTML, shadowRoot, JavaScript hub.

💡 Best Practices