C#发现之旅第九讲 ASP.NET验证码技术

C#发现之旅第九讲 ASP.NET验证码技术

袁永福 2008-5-15

系列课程说明

    为了让大家更深入的了解和使用C#，我们将开始这一系列的主题为“C#发现之旅”的技术讲座。考虑到各位大多是进行WEB数据库开发的，而所谓发现就是发现我们所不熟悉的领域，因此本系列讲座内容将是C#在WEB数据库开发以外的应用。目前规划的主要内容是图形开发和XML开发，并计划编排了多个课程。在未来的C#发现之旅中，我们按照由浅入深，循序渐进的步骤，一起探索和发现C#的其他未知的领域，更深入的理解和掌握使用C#进行软件开发，拓宽我们的视野，增强我们的软件开发综合能力。

本系列课程配套的演示代码下载地址为 https://files.cnblogs.com/xdesigner/cs_discovery.zip 。
本系列课程已发布的文章有
C#发现之旅第一讲 C#－XML开发
C#发现之旅第二讲 C#－XSLT开发
C#发现之旅第三讲 使用C#开发基于XSLT的代码生成器
C#发现之旅第四讲 Windows图形开发入门
C#发现之旅第五讲 图形开发基础篇
C#发现之旅第六讲 C#图形开发中级篇
C#发现之旅第七讲 C#图形开发高级篇
C#发现之旅第八讲 ASP.NET图形开发带超链接的饼图
C#发现之旅第九讲 ASP.NET验证码技术
C#发现之旅第十讲 文档对象模型

课程说明

    大家好，在上一节课程中，我们开始了解了如何在在ASP.NET中使用图形编程的技术。今天我们针对验证码技术深入的了解图形编程在ASP.NET中的应用。

    验证码技术是目前很多WEB程序采用的一种安全防御技术。系统在登录的时候不但要输出用户名和密码，还要额外输入一种随机生成的验证码文本，此时用户需要正确的输入这三个信息才能登录到系统中。

    由于验证码技术能有效的抵御某些黑客攻击，因此得到相当广泛的应用，而且在一些C/S系统中也采用了这种源自WEB开发的技术。

验证码原理

    在现在的软件运行环境下，安全成为大部分软件必须考虑的问题，黑客无处不在，攻击方式日益丰富，尤其是WEB系统由于其开放性更是遇到严峻的考验，黑客事件层出不穷，造成的损失和影响也不断变大，对此我们软件开发人员需要对此有相当的认识并采取措施抵御各种黑客攻击。

枚举字典安全攻击

    在各种黑客攻击中，很常见的就是套取用户名和密码，其中很多是采用枚举字典的方式来不断的测试用户名和密码。

    比如某黑客获得一银行账号，然后打开账号的开户银行的网上银行登录界面。分析其中的HTML代码，发现其页面粗制滥造，没有验证码，没有任何安全控制，只要求输入银行账号和取款密码就可以登录。黑客心中大喜，马上写了一个程序，直接调用HTTP协议，使用程序来模拟浏览器向网上银行服务器提交账号和密码尝试登录。由于取款密码是6位阿拉伯数字，因此也就有一百万种组合，黑客的电脑从六个零开始测试一直到六个九，这一定会测试出真正的密码。黑客找到一台宽带高速上网的电脑，运行套取取款密码程序后就忙其他事了，假设这台电脑1秒能测试10个密码，于是花费10万秒的时间肯定能找到密码。10万秒也就是27小时，一天多点的时间，实际上很可能用不了那么长的时间。黑客外头转了一圈回来，发现密码已经找到了，于是马上登录网上银行捞钱，或者伪造一个银行卡去ATM机上提取现金。也就是说黑客最多花了一天时间即可获得数目不可预知的非法收入。

验证码防御

    网上银行可以有很多手段来抵御黑客攻击，比如使用ActiveX控件代替标准的文本框来输入账号和密码，可以使用USB接口的密码盘来进行数据加密和检测，或者使用一个客户端程序代替浏览器来登录网上银行。但这些是客户端技术，千千万万的黑客可以操着各种手术刀来解剖这些技术，从根本上说客户端技术是不可靠的。

    相对而言采用服务器端技术就比较安全了。比如发现密码连续错误3次即锁定账户，1天后才能登录；也可以使用验证码技术来很大程度的抵御枚举字典套取密码的攻击。

    现有一个新的网上银行，和旧网银差不多，但采用了验证码技术，用户登录时除了要输入账号和取款密码，浏览器还显示一个图片，里面显示了一些潦草的字符，用户需要辨认这些字符然后再输入进去，浏览器向服务器提交表单时会附加用户输入的验证码，服务器接受表单数据后除了校验账号和取款密码后，还要检查验证码是否输入正确，若登录信息校验失败，则服务器端则会提示重新登录，而且还生成包含随机内容的新的验证码，用户在次登录时又得重新识别新的验证码了。

    由于正确的验证码文本是保存在服务器上的，客户端的黑客程序不可能获得，验证码的内容是随机的，黑客程序也无法找到规律，只能辨认从服务器端发出的包含验证码的图片来获得验证码。这里就体现了电脑和人脑的差别了，人脑在图形识别方面远远超过了目前的电脑，服务器端使用一些技术生成的书写潦草，充满随机分布的杂点的图片，人脑是可以相当容易的识别的，但目前的电脑是难以识别的。黑客程序无法识别验证码，只能显示图片让黑客亲自辨认，这时每测试一次密码，黑客都得仔细辨认一下验证码图片，然后手工输入验证码文本。最多要输入一百万次，估计全世界没人会愿意进行这样的工作。这样验证码技术就有效的抵御了这种枚举字典测试密码的安全攻击。此时黑客会转而寻找其他方法，而大量的初级黑客会放弃攻击这个网站。

验证码技术概念

    验证码技术利用了人脑和电脑之间的差别。

    大家都知道电脑和人脑是存在很大的差别的，电脑很胜任数值运算和精确的逻辑判断，很适合执行那些重复又重复的简单数据处理，但图像识别，模糊逻辑判断，学习和创新能力很差。而人脑正好相反，数值运算不行，但图像识别却很擅长。

    在验证码技术中，有一个很关键的过程就是需要从一个充满随机形状的图片中辨认出验证码文本，这个过程目前的电脑是难以实现的，而对人脑却能相当容易。

    采用电脑难于识别而人脑容易识别的图片，强迫人脑参与安全信息验证过程，就是验证码技术。这里包含验证码文本的图片是验证码媒介。仔细观察，我们可以知道这种验证码媒介具有电脑创建容易识别难的特点，因此类似的我们也可以采用合成语音等其他手段来作为验证码媒介。例如服务器提供一个类似QQ表情的图片，加上噪声，然后让用户判断选择这个图片的表情状态，是哭是笑还是流鼻血，这样也可以当作验证码。

    由于枚举字典安全攻击需要大数量的尝试猜测安全信息，其重复过程可能需要数万甚至数亿次，而验证码技术强迫了人脑参与每一次尝试猜测安全信息，人脑难以胜任长时间高频率的简单重复劳动，因此这就使得枚举字典安全攻击变得不可行，如此应用程序成功的防御了枚举字典安全攻击。

ASP.NET中使用验证码技术

    由于验证码技术中服务器程序需要创建验证码图片，里面用到了图形编程，因此本节课程仍然是C#发现之旅的图形编程系列教程。

    根据验证码的原理，我们使用C#在ASP.NET中实现了验证码的功能。

checkimage.aspx

    首先根据上节课程的内容，我们要创建一个图片服务页面，专门用于提供包含验证码文本的图片，为此我们建立一个 checkimage.aspx 的页面。其HTML代码很简单，只有一行，不输出任何内容。在其Page_Load方法中就有创建验证码图片的过程。

// 创建一个包含随机内容的验证码文本
System.Random rand = new Random();
int len = rand.Next(4 , 6 );
char[] chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ".ToCharArray();
System.Text.StringBuilder myStr = new System.Text.StringBuilder();
for( int iCount = 0 ; iCount < len ; iCount ++ )
{
    myStr.Append( chars[ rand.Next( chars.Length )]);
}
string text = myStr.ToString();
// 保存验证码到 session 中以便其他模块使用
this.Session["checkcode"] = text ;
Size ImageSize = Size.Empty ;
Font myFont = new Font("MS Sans Serif" , 20 );
// 计算验证码图片大小
using( Bitmap bmp = new Bitmap( 10 , 10 ))
{
    using( Graphics g = Graphics.FromImage( bmp ))
    {
        SizeF size = g.MeasureString( text , myFont , 10000 );
        ImageSize.Width = ( int ) size.Width + 8 ;
        ImageSize.Height = ( int ) size.Height + 8 ;
    }
}
// 创建验证码图片
using( Bitmap bmp = new Bitmap( ImageSize.Width , ImageSize.Height ))
{
    // 绘制验证码文本
    using( Graphics g = Graphics.FromImage( bmp ))
    {
        g.Clear( Color.White );
        using( StringFormat f = new StringFormat())
        {
            f.Alignment = StringAlignment.Near ;
            f.LineAlignment = StringAlignment.Center ;
            f.FormatFlags = StringFormatFlags.NoWrap ;
            g.DrawString(
                text ,
                myFont ,
                Brushes.Black ,
                new RectangleF(
                0 ,
                0 ,
                ImageSize.Width ,
                ImageSize.Height ),
                f );
        }//using
    }//using
    // 制造噪声 杂点面积占图片面积的 30%
    int num = ImageSize.Width * ImageSize.Height * 30 / 100 ;
    for( int iCount = 0 ; iCount < num ; iCount ++ )
    {
        // 在随机的位置使用随机的颜色设置图片的像素
        int x = rand.Next( ImageSize.Width );
        int y = rand.Next( ImageSize.Height );
        int r = rand.Next( 255 );
        int g = rand.Next( 255 );
        int b = rand.Next( 255 );
        Color c = Color.FromArgb( r , g , b );
        bmp.SetPixel( x , y , c );
    }//for
    // 输出图片
    System.IO.MemoryStream ms = new System.IO.MemoryStream();
    bmp.Save( ms , System.Drawing.Imaging.ImageFormat.Png );
    this.Response.ContentType = "image/png";
    ms.WriteTo( this.Response.OutputStream );
    ms.Close();
}//using
myFont.Dispose();

    首先我们使用.NET框架中随机数生成器 Random类型来生成一个不定长的包含随机数字和英文字符的文本，这就是验证码原始文本，我们将其保存在session中供以后使用。

    然后我们创建一个临时图片，并据此创建一个临时的图象绘制对象，然后调用Graphics的MeasureString函数获得这个字符串的显示大小。据此我们就可以计算出验证码图片的大小。

    然后我们创建一个位图对象，在此基础上创建一个图形绘制对象，然后调用图形绘制对象的DrawString函数将验证码文本绘制在这个位图上。

    绘制验证码后我们在图片上随机的制造杂点来混淆图片内容。这些杂点的面积占图片面积的30%，而且其位置和颜色都是随机的。这些杂点能严重的干扰程序辨认验证码文本。但人脑在辨认文本时能比较轻松的排除这些干扰。

    图片生成后页面就使用PNG格式将图片文档发送到客户端。

checkimage.aspx还提供了一个静态函数来检测验证码。

/// <summary>
/// 检查指定的文本是否匹配验证码
/// </summary>
/// <param name="text">要判断的文本</param>
/// <returns>是否匹配</returns>
public static bool CheckCode( string text )
{
    string txt = System.Web.HttpContext.Current.Session["checkcode"] as string ;
    return text == txt ;
}

    代码很简单。就是看看参数传进的文本是否等于 session 中保存的验证码文本。其他的页面程序调用这个函数就可以判断验证码的正确性。

login.aspx

    验证码图片服务页面完成后，我们就可以利用这个页面来实现验证码技术。我们建立一个模拟系统登录的页面。

    上面放置输入用户名，密码和验证码的三个文本输入框。其中验证码输入框后面放置一个图片，图片就来源于checkimage.aspx页面。用户输入三个信息后点击确定按钮进行登录。则运行该按钮的服务器段代码。

private void cmdOK_Click(object sender, System.EventArgs e)
{
    string UserName = this.txtUserName.Text ;
    string Password = this.txtPassword.Text ;
    string CheckCode = this.txtCheckCode.Text ;
    if( UserName == "张三"
        && Password == "abc"
        && checkimage.CheckCode( CheckCode ) )
    {
        this.lblResult.Text = "<b>登录成功</b>";
        this.RegisterStartupScript("a" , "<script>alert('登录成功');</script>");
    }
    else
    {
        this.lblResult.Text = "<font color=red><b>用户登录信息错误，请重新输入</b></font>";
    }
}

    在该代码中，程序获得用户输入的用户名，密码和验证码，然后判断用户名密码是否正确，还调用checkimage的静态函数CheckCode来判断验证码是否正确。只有这三个信息都正确则登录成功，否则登录失败。

    在少数情况下，程序生成的验证码图片难以辨认，则需要重新提供新的验证码图片，此时我们在登录页面中可以双击这个图片来更新验证码图片。显示验证码图片的HTML代码片断为

<img src="checkimage.aspx"
    title='看不清楚，双击图片换一张。'
    ondblclick="this.src = 'checkimage.aspx?flag=' + Math.random() "
    border="1">

    可以看到 ondblclick 事件处理中更新了图片来源，这里使用了一个毫无意义的flag页面参数，这是保证浏览器不会使用本地缓存的验证码图片而是下载最新的验证码图片。

    用户双击图片后，浏览器重新调用checkimage.aspx页面，于是服务器端的验证码文本用了新的，而图片内容也随之更新。

    由于每次尝试登录或更换验证码图片时，正确的验证码都是随机的发生改变，毫无规律，这样就很大的增强了登录页面的安全性。但这样做会让用户登录时需要辨认和输入验证码，这会降低应用程序的可用性。因此是否使用验证码技术是需要多方面权衡的。

小结

    在本次课程中，我们一起研究了验证码技术的原理，并使用C#在ASP.NET中实现了简单的验证码技术。验证码技术是一种安全防御技术，其中使用了一定的图形编程。这样看来图形编程应用是广泛的，可以为很多其他的技术提供支持。