2021年10月06日 更新

innerHTMLとtextContent

どうも、クラゲジュニアです。

両方とも参照することでテキストを取得したり更新したりすることができます。

何が違うのでしょう？
以下のコードで実験してみましょう。

<div id="trg">
    <p>こんにちは</p>
    <p>Hello</p>
</div>

<script>
    const trg = document.getElementById('trg');
    console.log(trg.innerHTML);
    console.log(trg.textContent);
</script>

コンソールには、以下の様に表示されます。

    <p>こんにちは</p>
    <p>Hello</p>

    こんにちは
    Hello

この結果だけ見ると、臨機応変に使い分ければいいじゃん。と思うかもしれません。

本当にそうでしょうか？
次は以下のコードを実行してみましょう。
入力ボックスに入力した値が表示されるなんの変哲もないHTMLです。

<form>
    <input id="input">
    <button id="btn" type="button">Click</button>
</form>
<p id="result"></p>

<script>
    const btn = document.getElementById('btn');
    const result = document.getElementById('result');
    const input = document.getElementById('input');
    btn.addEventListener('click', () => {
        alert(0);
        result.innerHTML =  input.value;
    });
</script>

しかし、以下の文字列を入力し追加された要素をクリックするとalertが表示されます。

<div onclick="alert('Attack!!!!!!!')">hogehoge</div>

悪意のある入力者がスクリプトを仕込んだ場合、意図しないスクリプトが実行されてしまいます。
この脆弱性をXSSと呼びます。

XSSを防ぐためにもtextContentを使用する様にしましょう！！