JavaScript:element.setAttributeしたときの、HTMLはどうなっているか？

本投稿の要約

setAttribute を使用することで、HTML 構造の破壊を防ぐことはできますが、危険な値そのものが入り込むことは防ぐことはできません。

別途、危険な値が入り込まないような仕組み(そもそも設定しない、値のエスケープ処理等)を実装する必要があります。

イントロダクション

JavaScript にて、「DOM Based XSS」の脆弱性を埋め込むのを防ぐためには、document.write や element.innerHTML などを使うのではなく、以下のように DOM 操作用メソッドを使用すると良いとされています。

入力されたテキストをブラウザに表示されているドキュメントの要素の属性に設定：

element.setAttribute(attribute, input_text);

attribute : 設定する属性の名前

input_text : 入力されたテキスト

element : 属性を設定する要素(element オブジェクト)

このとき、入力されたテキストを属性値として設定した要素の HTML が、入力されたテキストによってどうなるのか気になりませんか？

そこで、実際に JavaScript でコードを作成して試してみました。

JavaScript:document.createTextNodeをappendChildしたときの、HTMLはどうなっているか？

イントロダクション

JavaScript にて、「DOM Based XSS」の脆弱性を埋め込むのを防ぐためには、document.write や element.innerHTML などを使うのではなく、以下のように DOM 操作用メソッドを使用すると良いとされています。

入力されたテキストをブラウザのドキュメントに表示：
element.appendChild(document.createTextNode(input_text));

input_text : 入力されたテキスト
element : テキストを追加する親要素(element オブジェクト)


このとき、テキストを追加した親要素の HTML が、入力されたテキストによってどうなるのか気になりませんか？

そこで、実際に JavaScript でコードを作成して試してみました。

セキュリティ対策：JavaScriptでHTML操作をする人は必読！IPAテクニカルウォッチ 『DOM Based XSS』に関するレポート

イントロダクション

誰でも手軽に使えて便利な JavaScript ですが、書き方を間違えると重大なセキュリティ上の問題（脆弱性）を引き起こしてしまいます。

そんな JavaScript を使ったプログラムの脆弱性の中でも、うっかり作りこんでしまいがちなのが、「DOM Based XSS」ではないでしょうか？