【JavaScript】JavaScript で DOM を操作する

DOM を変更する

innerHTML

getter よりはむしろ、settert としてよく使用される。
以下のようにすると、body 要素の全ての子要素を右辺の文字列で書かれた HTML タグに置き換える。

document.body.innerHTML = "<h1>Hello!</h1><p>I am Tom.</p>";

insertAdjacentHTML

置き換えるのではなく、追加したい場合は insertAdjacentHTML を使用する。

document.body.insertAdjacentHTML("afterend", "<p>I am 30 years old.</p>");

セキュリティ上の懸念

innerHTML や insertAdjacentHTML を使用しており、その引数にユーザーの操作によって生成された値を渡していた場合に XSS の懸念がある。

XSSの詳細
https://www.hitachi-solutions.co.jp/security/sp/words/xss.html

例えば、ユーザーが投稿したものを表示する例があるとする。

const userComment = "new post!";

document.body.innerHTML = userComment;

// 悪意のあるコードを埋め込む
const userComment2 = "new post!!<img src='' onerror='alert(`悪質`)'/>";

document.body.innerHTML = userComment2;

また、他にもクエリパラメータで受けとったものを表示する時なんかも、クエリパラメータにタグを仕込むと実行されてしまう。

このようにタグを埋め込むことができるので innerHTML や insertAdjacentHTML を使用する際は注意する必要がある。

textContent

innerHTML や insertAdjacentHTML は、前述したようなセキュリティ上の懸念があるため、textContent を使用する方が安全。
textContent の右辺にタグを埋め込んでもテキストとして表示されるためである。

document.body.textContent = "hello";

createElement

要素を作成し、append などで DOM ツリーに挿入できる。
append はタグを文字列として入れても、「文字列」として表示されるため安全。

// 要素を作成
const p = document.createElement("p");
p.textContent = "HOGE";

// DOMツリーに挿入
document.body.append(p);