Element: setHTMLUnsafe() メソッド

setHTMLUnsafe(input)
setHTMLUnsafe(input, options)

const target = document.querySelector("#target");

const input = "<img src=x onclick=alert('onclick') onerror=alert('onerror')>";

// 安全 — XSS に対して安全でないエンティティをすべて除去する
target.setHTML(input);

// イベントハンドラー属性を除去しない
target.setHTMLUnsafe(input);
target.innerHTML = input;

// 安全 — XSS に対して安全でないエンティティをすべて除去する
const configSafe = new Sanitizer();
target.setHTMLUnsafe(input, { sanitizer: configSafe });

// `onclick` 以外の XSS に対して安全でないエンティティをすべて除去する
const configLessSafe = new Sanitizer();
configLessSafe.allowAttribute("onclick");
target.setHTMLUnsafe(input, { sanitizer: configLessSafe });

if (typeof trustedTypes === "undefined")
  trustedTypes = { createPolicy: (n, rules) => rules };

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

// 悪意のある可能性がある文字列
const untrustedString = "abc <script>alert(1)<" + "/script> def";
// ポリシーを使って TrustedHTML インスタンスを作成
const trustedHTML = policy.createHTML(untrustedString);

// id が "target" の対象 Element を取得
const target = document.getElementById("target");

// サニタイザーなしで setHTMLUnsafe() を実行
target.setHTMLUnsafe(trustedHTML);

// 悪意のある可能性がある文字列
const untrustedString = "abc <script>alert(1)<" + "/script> def";

// id が "target" の対象 Element を取得
const target = document.getElementById("target");

// 独自の Sanitizer を定義して setHTMLUnsafe() で使用
// div、p、button、script 要素のみを許可する
const sanitizer1 = new Sanitizer({
  elements: ["div", "p", "button", "script"],
});
target.setHTMLUnsafe(untrustedString, { sanitizer: sanitizer1 });

// 独自の SanitizerConfig を setHTMLUnsafe() 内で定義
// <script> 要素を除去するが、その他の安全でない可能性のあるエンティティは許可する
target.setHTMLUnsafe(untrustedString, {
  sanitizer: { removeElements: ["script"] },
});

<button id="buttonNoSanitizer" type="button">なし</button>
<button id="buttonAllowScript" type="button">allowScript</button>

<button id="reload" type="button">再読み込み</button>
<div id="target">対象要素の元のコンテンツ</div>

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

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

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

if ("Sanitizer" in window) {

// 安全でない HTML 文字列を定義
const unsanitizedString = `
  <div>
    <p>シャドウ DOM に挿入する段落。
      <button onclick="alert('ボタンをクリックしました！')">クリックしてください</button>
    </p>
    <script src="path/to/a/module.js" type="module"><\/script>
    <p data-id="123"><code>data-</code> 属性を含む段落</p>
  </div>
`;

const reload = document.querySelector("#reload");
reload.addEventListener("click", () => document.location.reload());

const buttonNoSanitizer = document.querySelector("#buttonNoSanitizer");
buttonNoSanitizer.addEventListener("click", () => {
  // サニタイザーを指定せずに安全でない HTML を設定
  target.setHTMLUnsafe(unsanitizedString);

  // 無害化前と挿入後の HTML をログ出力
  logElement.textContent =
    "サニタイザーなし: 文字列はフィルタリングされずに挿入されるはずです\n\n";
  log(`\n無害化されていない文字列: ${unsanitizedString}`);
  log(`\n\n挿入後: ${target.innerHTML}`);
});

const allowScriptButton = document.querySelector("#buttonAllowScript");
allowScriptButton.addEventListener("click", () => {
  // 独自のサニタイザーを使用して要素のコンテンツを設定
  const sanitizer1 = new Sanitizer({
    elements: ["div", "p", "script"],
  });
  target.setHTMLUnsafe(unsanitizedString, { sanitizer: sanitizer1 });

  // 無害化前と挿入後の HTML をログ出力
  logElement.textContent = "サニタイザー: {elements: ['div', 'p', 'script']}\n";
  log(`\n無害化されていない文字列: ${unsanitizedString}`);
  log(`\n\n挿入後: ${target.innerHTML}`);
});

} else {
  log("このブラウザーは HTML サニタイザー API に対応していません。");
  // フォールバックまたは代替動作を指定
}