TrustedHTML

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

メモ: この機能はウェブワーカー内で利用可能です。

TrustedHTML は信頼型 API のインターフェイスで、開発者が注入先に挿入して HTML としてレンダリングできる文字列を表します。これらのオブジェクトは TrustedTypePolicy.createHTML() によって作成されるため、コンストラクターはありません。

TrustedHTML オブジェクトの値は、オブジェクトの作成時に設定され、公開されたセッターが存在しないため、JavaScript によって変更することはできません。

インスタンスメソッド

TrustedHTML.toJSON(): 格納されているデータの JSON 表現を返します。
TrustedHTML.toString(): 文字列で、無害化された HTML です。

例

以下の例では、 TrustedTypePolicyFactory.createPolicy() を使用して TrustedHTML オブジェクトを作成するポリシーを作成します。その後、 TrustedTypePolicy.createHTML() を使用して、文書に挿入する無害化された HTML 文字列を作成できます。

その後、この無害化された値を Element.innerHTML で使用することで、新たな HTML 要素が挿入されることを確実に防止できます。

html

<div id="myDiv"></div>

const escapeHTMLPolicy = trustedTypes.createPolicy("myEscapePolicy", {
  createHTML: (string) => string.replace(/</g, "&lt;"),
});

let el = document.getElementById("myDiv");
const escaped = escapeHTMLPolicy.createHTML("<img src=x onerror=alert(1)>");
console.log(escaped instanceof TrustedHTML); // true
el.innerHTML = escaped;