SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

実例で学ぶASP.NET 4.5 Webフォーム 新機能活用法

ASP.NET 4.5で、厳密に型指定されたデータコントロールを活用する

実例で学ぶASP.NET 4.5 Webフォーム 新機能活用法 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

データバインド時のHTMLエンコード

 厳密に型指定されたデータコントロール機能で、データバインドがますます便利になりました。しかしデータバインドを行う際には、XSS(クロスサイトスクリプティング)の脆弱性にも気を付けなければいけません。特に注意が必要となるのが、Labelコントロールを使う場合です。

XSS未対策の場合

 まず、XSS対策をしていないデータバインド式の書き方をリスト3に示します。コードは会議室検索画面(MeetingRooms.aspx)のGridViewコントロール内で、会議室の場所名を表示している箇所です。

リスト3 XSS脆弱性のあるデータバインド式
<asp:GridView ID="MeetingRoomsGridView" runat="server" AutoGenerateColumns="False"
  DataSourceID="MeetingRoomsObjectDataSource" DataKeyNames="MeetingRoomId"
  ItemType="MRRS.Entity.MeetingRoom"
  OnSelectedIndexChanged="MeetingRoomsGridView_SelectedIndexChanged">
  <Columns>
    <asp:CommandField ShowSelectButton="True" />
    <asp:BoundField DataField="MeetingRoomName" HeaderText="名称"
      SortExpression="MeetingRoomName" />
    <asp:TemplateField HeaderText="場所" SortExpression="LocationId">
      <ItemTemplate>
        <asp:Label ID="LocationNameLabel" runat="server"
          Text="<%# Item.Location.LocationName %>" />
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
  <EmptyDataTemplate>
    検索条件に該当するデータがありません。
  </EmptyDataTemplate>
</asp:GridView>

 この状態で、例えば表1のようなスクリプトが埋め込まれた場所データが、場所マスターに登録されていたらどうなるでしょうか?

表1:スクリプトが埋め込まれた場所データ
Id 場所名
1 <script>alert('test');</script>

 そこで実行してみた結果、次の図5のように、スクリプトが実行されてしまいます。つまり、XSSの脆弱性があるということです。

図5:スクリプトが実行された結果
図5:スクリプトが実行された結果

XSSへの対策

 XSSへの対策を行うには、HTMLエンコードを行わなければなりません。ASP.NET 4.0までは、HttpUtilityクラスのHtmlEncodeメソッドを使い、次のリスト4のように書く必要がありました。

リスト4 HttpUtility.HtmlEncodeメソッド使用例
<asp:Label ID="LocationNameLabel" runat="server"
  Text="<%# HttpUtility.HtmlEncode(Item.Location.LocationName) %>" />

 ただ、この方法では記述が長くなってしまうので、少し面倒です。そこで、ASP.NET 4.5では、自動的にHTMLエンコードを行うデータバインド式が導入されました。自動でHTMLエンコードを行わせたい場合、リスト5のようにデータバインド式を「<%#: %>」のような":"がついた形式で書きます。

リスト5 自動HTMLエンコード用データバインド式
<asp:Label ID="LocationNameLabel" runat="server"
  Text="<%#: Item.Location.LocationName %>" />

 このように記述を変更してから実行すると、今度はスクリプトが実行されずにそのままデータが表示されることが確認できます(図6)。

図6:スクリプトが実行されずに表示された結果
図6:スクリプトが実行されずに表示された結果

 なお、リスト2のテキストボックスにバインドしている箇所では、HTMLエンコードを行うように指定していません。これはテキストボックスのTextプロパティでは、自動でHTMLエンコードが行われるという仕様があるためです。

 テキストボックスが表示されるとき、このプロパティの内容はHTMLエンコードされます。例えば、このプロパティを"&lt;b&gt;Test&lt;/b&gt;"に設定した場合、太字の"Test"ではなく"&lt;b&gt;Test&lt;/b&gt;"がブラウザに表示されます。

コラム:HTMLエンコード式

 データバインドではなく、ASP.NET Webフォームへの埋め込み式でもHTMLエンコードを行いたい場合があると思います。

 そんなときはリスト6のように、ASP.NET 4.0で追加されたHTMLエンコード式を使いましょう。

リスト6 HTMLエンコード式
<!-- 通常の埋め込み式 -->
<%= "<s>non encoded</s>" %>
<!-- HTMLエンコード式 -->
<%: "<s>html encoded</s>" %>

 実行した結果が図7です。HTMLエンコード式の方を見ると、きちんとHTMLエンコードされているのが確認できます。

 

図7:HTMLエンコード式の実行結果
図7:HTMLエンコード式の実行結果

まとめ

 今回はASP.NET 4.5の新機能のうち、目玉の一つである「厳密に型指定されたデータコントロール」、そしてHTMLエンコードを行うデータバインド式について解説しました。今回のポイントは次のとおりです。

  • 「厳密に型指定されたデータコントロール」を用いると、データバインド式の内部を型安全に記述できる
    • データコントロールのItemTypeプロパティに、バインドするオブジェクトの型名を明示する
    • データバインド式の中では、Item、BindItem変数を使う
      • Item : 一方向、出力のみ
      • BindItem : 双方向、入出力
    • データバインド式の中でIntelliSenseによるコード補完も利くようになる
  • LabelコントロールのTextプロパティへのデータバインドは、XSS対策のためHTMLエンコードが必要
    • 従来はHttpUtility.HtmlEncodeメソッドを使っていた
    • 新たに追加された「<%#: %>」形式のデータバインド式を用いることで、自動的にHTMLエンコードが行われる
    • TextBoxコントロールのTextプロパティは自動的にHTMLエンコードが行われる仕様になっている

 さて次回は、もう一つの目玉機能である「モデルバインド」について、深く掘り下げてみようと思います。お楽しみに。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
実例で学ぶASP.NET 4.5 Webフォーム 新機能活用法連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 高野 将(タカノ ショウ)

<個人紹介>新潟県長岡市在住の在宅リモートワークプログラマー。家事や育児、仕事の合間に長岡IT開発者勉強会(NDS)、Niigata.NET、TDDBCなどのコミュニティに関わったり、Web記事や書籍などの執筆を行ったりしている。著書に『アプリを作ろう! Visual C#入門 Visual C# 2017対応』(日経BP社、2017)など。<WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7235 2013/07/08 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング