如何制作网页安全登录控件（Demo）

好久没写文章了，都忘了怎么磨墨了。

什么是安全控件和安全控件如何安全这不是本文要讨论的范围。

本文只讲述如何在网页里嵌入windows edit control 控件。

PS:关于安全控件的安全:

1.防止数据被抓包的方法：

• 用驱动截获键盘事件.
• 模拟键盘事件发送垃圾数据.

2.保证被抓包的数据安全的方法：

• 进行数据加密，比如用安全证书进行加密（会被破解？？，好！用另一个方法：推卸责任给安全证书）

3.传输安全：采用SSL进行通讯。

以上3点的实现请参见书籍《下辈子》作者:DLive

我们将用Firefox提供的NPapi SDK编写插件。

整个插件的关键点如下：

1. 内嵌对话框的属性设置。
2. 对话框的创建。
3. windows的消息循环。

整个过程如下：

1.创建空DLL项目命名为npsafeinput

www.ctrip.com

www.ctrip.com

2.从NPAPI SDK (版本1.92)提取必要的文件到项目文件内，并添加到项目里

npapi.h
np_entry.cpp
npn_gate.cpp
npruntime.h
nptypes.h
从官方的例子中提取两个文件
plugin.h
plugin.cpp

3.设置项目的属性

                  character set 设为：multi-byte
                  output file设为：Firefox 的plugins 目录(方便调试）

4.给项目添加vertion。

记得更改blockHeader为：040904e4
添加MIMEType： application/npsafeinput

设置MIMEType

5.添加导出接口

先添加npsafeinput.def
文件内容如下：

LIBRARY "npsafeinput"
         EXPORTS
              NP_GetEntryPoints   @1
              NP_Initialize       @2
              NP_Shutdown         @3

OK！ 烦琐的东西已告一段落，下面进入主题

关键代码用红色显示。

6.添加windows对话框。

打开属性面板设置他的属性如下：
        Broder:None,               //为什么就不说了
        Style:Child,                   //这关系到他在页面中的位置
Visble:True,                //..
ID:IDD_INPUT

7.向对话框中添加edit control    并设置属性:

ID:IDC_INPUT
Passrord:true        //根据自己需要

8.编写对话框类

//DLDialog.h  （略）
//DLDialog.cpp 关键内容如下

bool DLDialog::create(HINSTANCE hlnstance,LPCTSTR lpTemplate,HWND hWndParent)
{
hWnd=CreateDialog(hlnstance,lpTemplate,hWndParent,(DLGPROC)DlgProc);
        if(!hWnd){
                return false;
        }
        return true;
}
bool DLDialog::show()
{
          ShowWindow(hWnd, SW_SHOW);
          return true;
}
INT_PTR CALLBACK DlgProc(HWND hDlg, UINT message, WPARAM wParam, LPARAM lParam)
{
switch(message)
{
case WM_INITDIALOG:
break;
case WM_SIZE:{
RECT rc;
GetClientRect(hDlg,&rc);
HWND pitem=GetDlgItem(hDlg,IDC_INPUT);
SetWindowPos(pitem,HWND_TOPMOST,0,0,rc.right,rc.bottom,SWP_NOZORDER|SWP_NOMOVE);
           //控制输入控件随窗口的改变而改变大小
         }
}
return false;  //不要使用DefWindowProc 上默认处理消息。这样会让你的程度提前去世

9.为Cplugin类添加一些成员变量

           DLDialog *cinput;     //对话框类指针
            bool createInput();  //导出接口
            int m_width;                 //安全控件的宽高
            int m_height;            

10.在插件的消息循环中把消息也传给对话框：不然会导致一些异常情况发生。比如输入法的切换无效。

static LRESULT CALLBACK PluginWinProc(HWND hWnd, UINT msg, WPARAM wParam, LPARAM lParam)
{
             .......
                 CPlugin * p = (CPlugin *)GetWindowLongPtr(hWnd, GWLP_USERDATA);
 if(p->cinput!=NULL)
SendMessage(p->cinput->hWnd, msg, wParam, lParam);      //向对话框传输消息               return DefWindowProc(hWnd, msg, wParam, lParam);
}

11. 在插件创建的时候读取要设置的宽高

NPError NPP_New(NPMIMEType pluginType,NPP instance, uint16_t mode, int16_t argc,char* argn[],char* argv[],NPSavedData* saved)
{
 ...........
          for(int i=0;i<argc;i++)
          {
                   if(strcmp(argn[i],"width")==0){            //读取宽
                    int tmp=atoi(argv[i]);
                    pPlugin->m_width=tmp;
           }
           else if(strcmp(argn[i],"height")==0){     //读取高
                    int tmp=atoi(argv[i]);
                    pPlugin->m_height=tmp;
           }
  }
........
}

12.调用接口函数：

bool CPlugin::createInput()
{
         if(!cinput){
                  cinput=new DLDialog();
                  cinput->create(GetModuleHandle("npsafeinput.dll"),MAKEINTRESOURCE(IDD_IINPUT),this->m_hWnd); //创建对话框注意GetModuleHandle("npsafeinput.dll") 不然对话框显示不了。
         }
         cinput->show();
         if(!SetWindowPos(cinput->hWnd,HWND_TOPMOST,100,0,m_width,m_height,SWP_NOZORDER|SWP_NOMOVE))
                  MessageBox(NULL,"error","error",0);
         return true;
}

13.如何导出接口(略)

14.网页代码   注意设置宽高

<embed id="objinput" type="application/npsafeinput" width=300 height=25 ><br>
<script>
var embed1 = document.getElementById('objinput');
function ctrip(){
 embed1.createInput();
}
</script>
<br>
<input type=button value="携程 demo" onclick='ctrip();'>

15最终结果如下：

www.ctrip.com

OK 现在整个demo已经完成了。该demo适用于支持NPAPI的浏览器。IE靠边站。

整个代码写得很粗糙。目的只是讲述一个过程。
DEMO下载地址

有什么错误的地方请指出,多谢多谢