玻璃做的Client-Side Validation

如果某個欄位的驗證很重要，千萬不要只用單薄的Client-Side Script保護! 為什麼? 我用以下的這個案例說明:

<body>

    <script type="text/javascript">

    function clientValidation()

        //Call an invalid function to cause exception

        //var i=WTF();

        if (document.getElementById("confirm").value!="SURE")

            alert("Are you 'SURE'?");

            return false;

    </script>

    <form id="form1" runat="server"

        onsubmit="return clientValidation();">

    <div>

    Please type 'SURE': <input type="text" name="confirm" size="4" />

        <asp:Button ID="Button1" runat="server"

        Text="GO" onclick="Button1_Click" />

    </div>

    </form>

    <script type="text/C#" runat="server">

    protected void Button1_Click(object sender, EventArgs e)

        Response.Write("Touch Donw!!!");

        Response.End();

    </script>

</body>

這個網頁中有一段Javascript會檢查使用者是否在INPUT中輸入"SURE"，沒有輸入就禁止Submit。一般來說，這個檢查關卡是有效的，但有幾種情況會出包:

Javascript出錯
試試將var i=WTF();前方的//移除，此時在按下GO鈕時會出現Javascript Error訊息(Popup或出現在Status Bar)，接著不管INPUT裡寫啥，一律送出，闖關成功!
使用者停用Javascript或Browser不支援
Browser提供功能可以讓使用者自由決定是否要啟用Javascript，雖然這年頭停用Javascript上網等於矇著眼上街，但是這種事仍可能發生。
~~邪惡的~~強大的Script客製工具
你也許不知道，透過GreaseMonkey, Trixie等工具，不管網頁上用Javascript套了什麼金鐘罩鐵布衫，不用幾分鐘一樣被剝到內褲都不剩。

結論: 如果網頁上有什麼真正重要的驗證或檢查，切忌單靠Client-Side Scripting，前端檢查可以提供即時反應，減少不必要的Round-Trip，但真正的攻防主戰場還是在Server-Side...

歡迎推文分享:

Published 07 December 2007 09:27 AM 由 Jeffrey

Filed under: Javascript, Web