innerHTMLの代わりにElement#setHTMLUnsafe()

Chrome 105からのExperimentalな機能としてElement#setHTML()が提供された。

※2025-01-06現在は、Element#setHTMLUnsafe()に変わっている。

昨今、ReactやVueなどのJavaScriptライブラリ/フレームワークを使う事が多いので、文字列をそのままHTMLとして扱うことはほとんどないと思う。ただし、レガシーなシステムでは今でも危険な実装が残っているかもしれないため、注意が必要だ。

innerHTMLでXSSを踏んじゃうコード

const input = `<p><script>alert('xss')</scritp></p>`
document.querySelector('...').innerHTML = input

setHTMLでサニタイズ

2025-01-06現在は、Element#setHTMLUnsafe()としてサポートされたため、setHTML()は使えない。

const input = `<p><script>alert('xss')</scritp></p>`
const sanitizer = new Sanitizer()

document.querySelector('...').setHTML(input, sanitizer)

• ref: 「サニタイズ言うなキャンペーン」から技術書の正しい書き方を理解する

Element#setHTMLUnsafe()を使う

const input = `<p><script>alert('xss')</scritp></p>`

document.querySelector('...').setHTMLUnsafe(input)