home Glamenv-Septzen(ぐらめぬ・ぜぷつぇん)(archive)

JavaScript/各種DOM操作におけるHTMLタグのエスケープメモ

作成日: 2011-06-26 12:43:07   /   last updated at: 2011-06-26 13:17:51
カテゴリ: HTML JavaScript 

日記/2011/06/26/jQueryとXSSの勉強(1)関連メモ。

JavaScriptのDOM操作で文字列をDOM要素として出力する方法について、HTMLタグをエスケープしてくれるか調べてみた。
HTMLタグが混ざっている文字列をDOMのText要素として出力するということは、それ自体が違和感がある。
HTMLタグを使っているのならば、それぞれのタグに応じた要素を一つずつ組み立てる必要があるのでは？
そうではなく、あくまでも「文字列」としてHTMLタグを出力したい時、どうなるか、という実験。

結果：

HTMLタグのエスケープ無し
  • HTML要素のinnerHTMLへの代入
HTMLタグのエスケープ有り
  • Text要素のnodeValueへの代入
  • document.createTextNode()
  • jQuery.text()

検証環境： 

OS : Win7Pro SP1 32bit 日本語版
ブラウザ：
 Firefox 5.0
 Chrome 12.0.742.100
 IE 9.0.1

検証コード： 

<html>
<head>
<title>jQuery XSS Test</title>
<script type="text/javascript" src="./jquery-1.6.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
function add_html_danger(msg)
{
    var p1 = document.getElementById("p1");
    p1.innerHTML = msg;
}
function add_html_safe1(msg)
{
    var p2 = document.getElementById("p2");
    p2.firstChild.nodeValue = msg;
}
function add_html_safe2(msg)
{
    var p2 = document.getElementById("p2");
    var t = document.createTextNode(msg);
    var c = p2.firstChild;
    p2.replaceChild(t, c);
}
function add_html_safe3(msg)
{
    $("#p2").text(msg);
}
</script>
 
<input type="button" value="innerHTML : danger" onClick="add_html_danger('<b>hello</b>');" /><br />
<input type="button" value="nodeValue : safe" onClick="add_html_safe1('<b>hello</b>');" /><br />
<input type="button" value="createTextNode and replaceChild : safe" onClick="add_html_safe2('<b>hello2</b>');" /><br />
<input type="button" value="jQuery.text() : safe" onClick="add_html_safe3('<b>hello3</b>');" /><br />
<hr />
result:<br />
<p id="p1">foobar</p>
<p id="p2">barbaz</p>
<hr />
<a href="#foo<b>bar</b>">hash!</a><br />
<hr />
after "hash!" link click:<br />
<input type="button" value="innerHTML : danger" onClick="add_html_danger(location.hash);" /><br />
</body>
</html>

innerTextは未検証。

original url: https://www.glamenv-septzen.net/view/990