この記事を作った動機

　最近ちょっとした JavaScript のツールを作って使おうとしたところ、直接 HTML の文字列を innerHTML として渡すことができないことが分かった。

　今の私の理解だと XSS(Cross Site Scripting) 対策のためにテキストデータとして紛れた悪意のある CSS や JavaScript コードなどを実行(反映)しないようにするために、追加された仕組みに引っかかったという認識である。“ポリシー"なるものを定義して、innerHTMLとかに設定されるテキストデータであったHTMLの文字列などを、事前に任意に定義した createHTML などの関数を通して、テキストデータの HTML化などを承認？するような動作を実装する必要があるというイメージである。

エラー内容

function setStyle(){
    let style = document.createElement("style")
    style.innerHTML = `
    .positive{
        background: red;
        text-decoration: underline;
    }
    
    .negative{
        background: blue;
        text-decoration: underline;
    }
    `
    document.body.appendChild(style)
}
setStyle()
// This document requires 'TrustedHTML' assignment. The action has been blocked.

暫定的な対処

　以下はとにかく、自分で書いたスクリプトをすぐ動かしたい場合で、動作検証やプライベート目的で、理解したうえで利用することを想定したコード例であり、実用ではセキュリティの問題になるので真面目に悪意のあるコードが実行されないように createHTML などの定義を書く必要がある。

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

function setStyle(){
    let style = document.createElement("style")
    style.innerHTML = policy.createHTML(`
    .positive{
        background: red;
        text-decoration: underline;
    }
    
    .negative{
        background: blue;
        text-decoration: underline;
    }
    `)
    document.body.appendChild(style)
}
setStyle()

参考にしたサイトとか