ASP.NET MVCのセキュリティ対策とクライアントサイドスクリプト活用方法

ASP.NET MVCフレームワーク 正式版 入門（5）

（2）スクリプトの実行方法を調べる

　AJAX Control ToolkitのExtenderコントロールはWeb Form上で扱います。開発時はコントロールを張り付けてプロパティ、メソッドなどを設定するだけで利用できますが、実行時にはページ上で「JavaScript」が動作しています。つまり、利用したい機能を実際にWeb Form上で実行して実行ページのソースからJavaScriptの部分だけ取得してViewPage上で記述すれば簡単に実行できます。ここではAJAX Control Toolkitの利用方法の詳細は省略し、手順だけ列挙します。

1. ASP.NET Web サイト（もしくはプロジェクト）を作成
2. Default.aspx上にToolkitScriptManagerとTextBoxを配置
3. TextBoxコントロールのスマートタグからCalendarExtenderを選択する（図8）
4. 実行

図8　TextBoxコントロールの拡張ダイアログ

　この状態で表示される画面は図9のようになります。

図9　CalendarExtenderコントロール適用後の画面

　ここで、ソースを確認しますが、Sys.Application.initializeメソッド近辺のみチェックしてください。

Default.aspxのソースの一部

<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.CalendarBehavior, {"id":"TextBox1_CalendarExtender"}, null, null, $get("TextBox1"));
});

　太字の部分がCalenderExtenderコントロールをインスタンス化している部分です。

　ご覧の通り、AJAX Control Toolkitの機能をインスタンス化するには、$create関数を使います。この$create関数の構文は次のとおりです。

$create関数の構文

$create(
   インスタンス化する機能の型
  [, プロパティ情報（名前／値のペアで記述）
  [, イベント・ハンドラ情報（名前／ハンドラのペアで記述）
  [, ほかの機能への参照
  [, 機能を関連付ける要素]]]]
)

　この部分をコピーしておき、ASP.NET MVCのサイトで利用したいViewPage上にペーストします。もちろん、idの設定などは修正します。以下に追加したばかりのViewPage上に設定したソースを記述します。

Calendar.aspxのソースの一部

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <%-- （1）スクリプト宣言部分 --%>
    <script src="../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="../Scripts/AjaxControlToolkit.ExtenderBase.BaseScripts.js" type="text/javascript"></script>
    <script src="../Scripts/AjaxControlToolkit.Common.Common.js" type="text/javascript"></script>
    <script src="../Scripts/AjaxControlToolkit.Common.DateTime.js" type="text/javascript"></script>
    <script src="../Scripts/AjaxControlToolkit.Common.Threading.js" type="text/javascript"></script>
    <script src="../Scripts/AjaxControlToolkit.Compat.Timer.Timer.js" type="text/javascript"></script>
    <script src="../Scripts/AjaxControlToolkit.Calendar.CalendarBehavior.js" type="text/javascript"></script>
    <script src="../Scripts/AjaxControlToolkit.Animation.Animations.js" type="text/javascript"></script>
    <script src="../Scripts/AjaxControlToolkit.PopupExtender.PopupBehavior.js" type="text/javascript"></script>
    <script src="../Scripts/AjaxControlToolkit.Animation.AnimationBehavior.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../Scripts/AjaxControlToolkit.Calendar.Calendar.css" />
    <%--CSSの上書き--%>
    <link rel="stylesheet" type="text/css" href="../Content/Calendar.css" />

    <%-- （2）スクリプト実行部分 --%>
    <script type="text/javascript">
        Sys.Application.add_init(appInit);

        function appInit()
        {
            $create(AjaxControlToolkit.CalendarBehavior, null, null, null, $get('birthDate'));
        }
    </script>

    <h2>Calendar</h2>
    <label for="birthDate">Birth Date:</label>
    <br />
    <%-- （3）スクリプト動作要素 --%>
    <%= Html.TextBox("birthDate") %>

    <br /><br />
</asp:Content>

　ご覧の通りスクリプト宣言部分（1）と、実行部分（2）を切り貼りしただけであることがお分かりいただけるかと思います。後はスクリプトが動作する要素を指定しただけです（3）。若干変わっている点として、Calendar.cssの追加とスクリプトソースの宣言部分です。

　Calendar.cssでは、マスタページに適用されているSite.cssに記述されているTableタグのスタイルを上書きしています（この記述がないと、カレンダーのレイアウトが崩れてしまいます。）。

Calendar.cssのソースの一部

/* Site.css上で指定されたCSSを上書き */
.ajax__calendar table
{
    border: solid 1px #FFFFFF;
}

.ajax__calendar table td
{
    padding: 0px;
    border: solid 1px #FFFFFF;
}

　なお、スクリプトソースはパスの指定方法に注意が必要です。

　多少煩雑な作業ですが、AJAX Control Toolkitの機能を自作するよりは簡単なので、ぜひ覚えて活用してください。

［コラム］今だから陥りやすいスクリプトソースの罠と解決方法

　ASP.NET Web Formでは既定で階層型のURLが生成されていました。そしてIDE側の機能として、WebForm上にスクリプトソースを適用させると相対パスを自動補完してくれていました（図10）。

 

図10　ASP.NET Web サイトのソリューション構成と、生成されるURL

 

　ASP.NET MVCでは、URLの生成が階層型からルーティング型に変更されています。つまり、図10と同等のフォルダ構成であっても、ルーティングにより図11のようなURLが生成されます。

 

図11　ASP.NET MVCのソリューション構成と、生成されるURL

 

　図10と11の場合、Viewsフォルダの有無から、スクリプトソースが格納されているフォルダへの相対パスが変わります。

 

Web Formのアドレスと、ASP.NET MVCのアドレス

Webサイト
http://localhost/Views/Home/Calendar.aspx
MVC
http://localhost/Home/Calendar

 

　現時点ではASP.NET MVCのプロジェクトを開いていていも、IDE側の相対パスの自動補完がWebFormの仕様のままなので、開発者が手でパスを書き直す必要があります。

 

　ただ、都度相対パスを修正する作業は思いのほか煩雑です。ASP.NET MVCでは、Url周りをサポートするUrlHelperクラスが用意されているので、UrlHelperクラスのContentメソッドを使うことで大幅に作業を軽減できます。

 

　Contentメソッドは、ASP.NET MVCのプロジェクトに合ったリソース（ScriptやCSS）の相対パスを生成してくれます。構文は次のとおりです。

 

Url.Contentメソッドの使用方法

<script src="<%= Url.Content("~/Scripts/AjaxControlToolkit.ExtenderBase.BaseScripts.js") %>" type="text/javascript"></script>

 

　より安全に相対パスの指定を行いたい場合はUrl.Contentメソッドを使いましょう。

まとめ

　今回は、Web技術において重要なセキュリティ部分と、既存のASP.NET AJAXの資産をうまく活用する方法について紹介しました。

　セキュリティ部分は、ASP.NET MVCならではの部分をピックアップしましたが、あくまで基本です。Webアプリケーションである以上、セキュリティ対策をし過ぎて困ることはありません。必要に応じて追加の対策をしてください。

　AJAX Control Toolkitの利用は、ポイントさえ押さえればサイト内の機能を簡単に拡張できます。使いたいコントロールがあれば、今回紹介した方法を基に調べて活用してください。

　なお、今回紹介した部分はどちらも基盤レベルの話ですので、アプリケーション内にうまく組み込んで活用していただければ幸いです。

参考文献

• ASP.NET公式ページ（英語）
• ScottGu's Blog（英語）
• MSDN（英語）
• NerdDinner（英語）
• 無聊を託つ
• どっとねっとふぁんBlog