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

id: 990 所有者: msakamoto-sf 作成日: 2011-06-26 12:43:07
カテゴリ: HTML JavaScript

[ Prev ]
[ Next ]
[ 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>