LightSwitchのHTMLClientのサンプルのほとんどでXSSの脆弱性ありそうな気がするんですが…

最近LightSwitchのHTMLClientのサンプルとかコードを色々あさってるんですが、JavaScriptで出力のカスタマイズ自由自在だぜ！！ってところになると以下のような感じのコードをよく見かけます。

/// <reference path="../GeneratedArtifacts/viewModel.js" />

myapp.Browse.ScreenContent_render = function (element, contentItem) {
    // 仮のデータ
    var dummyData = { value: 'hoge' };
    $('<h2>' + dummyData.value + '</h2>').appendTo($(element));
};

dummyDataは、本来はcontentItem.valueあたりを使うのですが、今回は簡単な例を示したいだけなのでメソッド内に静的に持たせてます。こんなカスタムコントロールのレンダリング処理のコードをよく見る。んで、実行すると、以下のような感じで、h2タグに囲まれて太く表示できる。
f:id:okazuki:20130810222037j:plain

いやでもvalueにこんな値入ってたらおしまいでしょ・・・と常に感じてる。

/// <reference path="../GeneratedArtifacts/viewModel.js" />

myapp.Browse.ScreenContent_render = function (element, contentItem) {
    // 仮のデータ
    var dummyData = { value: 'hoge<script type="text/javascript">alert("Hello XSS!!")</script>' };
    $('<h2>' + dummyData.value + '</h2>').appendTo($(element));
};

実行すると、ありがとうございますXSSです。
f:id:okazuki:20130810222216j:plain

jQueryで書くならこうしとかないとって思うんです。

/// <reference path="../GeneratedArtifacts/viewModel.js" />

myapp.Browse.ScreenContent_render = function (element, contentItem) {
    // 仮のデータ
    var dummyData = { value: 'hoge<script type="text/javascript">alert("Hello XSS!!")</script>' };
    $('<h2/>').text(dummyData.value).appendTo($(element));
};

これならvalueに変な値入れられてても平気。
f:id:okazuki:20130810222404j:plain