Web安全控件开发文档-Xproer.SafeEditor

 版权所有 2009-2014 荆门泽优软件有限公司

保留所有权利

产品博客：http://www.cnblogs.com/xproer/

官方网站：http://www.ncmem.com

产品首页：http://www.ncmem.com/webplug/passwordeditor/index.asp

在线演示：http://www.ncmem.com/products/passwordeditor/demo/index.html

开发文档：http://www.cnblogs.com/xproer/archive/2011/11/27/2264969.html

产品介绍：http://www.cnblogs.com/xproer/archive/2011/11/27/2264971.html

升级日志：http://www.cnblogs.com/xproer/archive/2011/11/27/2264965.html

资源下载：cab安装包(x86),cab安装包(x64),crx安装包,xpi安装包,exe安装包,开发文档,VC库,证书补丁,

示例下载：ASP.NET,PHP,JSP,

联系信箱：1085617561@qq.com

联系QQ：1085617561

更新记录：

更新时间

描述

2014-07-18

修改资源链接

1. 功能说明

如何防止密码被盗取

用户在输入密码时，控件内部会启动一个安全进程向密码框发送一个随机字符来干扰木马程序，

在取密码文本时控件会对进程进行识别，只有当前进程才被允许取出密码文本。

与服务器通信

密码控件会采用独立的安全连接(HTTPS)与服务器通信，在通信前会首先对密码进行加密，然后再将加密的密码发送给服务端，服务端验证后返回验证结果。

2. 安全规则

控件在内部使用密钥对密码进行加密然后提交给服务端，服务端根据密钥对用户密码加密后进行比较，如果相同则表示用户密码正确。

3. 搭建测试环境

1.修改Posturl

Web安全控件开发文档-Xproer.SafeEditor_第1张图片

4. 集成到现有系统中

主要步骤：

1.上传控件相关的文件。

2.修改cab文件下载地址及classid序列号。

3.修改控件上传地址及编码。

4.1. 上传控件安装包文件

SafeEditor.js

SafeEditor.cab

SafeEditor64.cab

SafeEditor.crx

SafeEditor.xpi

SafeEditor.exe

注意：

请不要手动解压SafeEditor.cab文件，请此文件上传到服务器中，IE浏览器会自动下载并安装控件。cab文件是一个控件自动安装包。

4.2. 修改cab文件下载地址和classid序列号

打开SafeEditor.js文件查找以下代码，修改Clsid,ProjID,Clsid64,ProjID64,MimeType,CrxName,MimeTypeChr的值和插件包地址。

     this.Config = {

           "PostUrl"     : "http://www.ncmem.com/check.aspx"

         , "EncodeType"  : "utf-8"

         , "EncryptionType": "md5"//加密类型：md5,base64

         , "Company"     : "荆门泽优软件有限公司"

         , "Version"     : "1,1,8,21165"

         , "License"     : ""

        , "Debug"       : false//是否打开调试模式

        , "LogFile"     : "F:\\log.txt"//日志文件路径

         , "Clsid"       : "E 3F 3E0E6-49AD -453A -8589-85708949CB35"

         , "ProjID"      : "Xproer.SafeEditor"

         , "CabPath"     : "http://www.ncmem.com/download/SafeEditor/SafeEditor.cab"

         //IE64

         , "Clsid64"     : "B9D7B 47F -6D31-4450-8532-6E1B191FE7AB"

         , "ProjID64"    : "Xproer.SafeEditor64"

         , "CabPath64"   : "http://www.ncmem.com/download/SafeEditor/SafeEditor64.cab"

         //FireFox

         , "MimeType"    : "application/npSafeEditor"

         , "XpiPath"     : "http://www.ncmem.com/download/SafeEditor/SafeEditor.xpi"

         //Chrome

         , "CrxName"     : "npSafeEditor"

         , "MimeTypeChr" : "application/npSafeEditor"

         , "CrxPath"     : "http://www.ncmem.com/download/SafeEditor/SafeEditor.crx"

         , "ExePath"     : "http://www.ncmem.com/download/SafeEditor/SafeEditor.exe"

     };

说明：

classid是唯一的，它的作用是避免与其它公司的控件产生冲突。购买产品后我们会为每个公司生成一个唯一的classid号。

codebase也可以使用相对路径。如果SafeEditor.cab在Web服务器的根目录中，codebase也可以写为/SafeEditor.cab#version=1,4,8,45272

如果公司的域名是www.qq.com，SafeEditor.cab文件在服务器的根目录中，那么codebase应该为http://www.qq.com/SafeEditor.cab#version=1,4,8,45272。每个公司应该将codebase改为自已服务器的地址。

注意：

当控件升级(版本号修改)或CAB文件位置改变，必须修改SafeEditor.js中的代码。否则用户的IE浏览器不会安装最新的控件。

4.3. 修改控件的上传地址

打开index.html，将PostUrl改为实际的上传地址：

pwdEditor.Config["PostUrl"] = "http://www.ncmem.com/products/passwordeditor/demo/check.aspx";

说明：

如果需要在多个页面使用安全控件，建议只在PasswordEditor.js中修改上传地址。而不要在前台页面中修改。这样可以使前台引用安全控件的代码更加简洁。

注意：

PostUrl必须使用绝对路径，不能使用相对路径。下面的路径都是错误的：

/upload.php

/web/check.php

5. 测试包布署

主要步骤如下：

1.将测试包上传到测试服务器中。如果测试服务器在本地，则不用上传。

测试包说明如下：

IE(x86)插件安装包：SafeEditor.cab

IE(x64)插件安装包：SafeEditor64.cab

Firefox插件安装包：SafeEditor.xpi

Chrome插件安装包：SafeEditor.crx

2.修改测试服务器中的SafeEditor.js配置信息。

将插件包地址改为测试服务器地址。

Web安全控件开发文档-Xproer.SafeEditor_第2张图片

6. 正式包布署

7. 正式包布署说明

1.将正式包上传到测试服务器中。

IE(x86)插件安装包：SafeEditor.cab

IE(x64)插件安装包：SafeEditor64.cab

Firefox插件安装包：SafeEditor.xpi

Chrome插件安装包：SafeEditor.crx

插件集成安装包：SafeEditor.exe

2.修改正式服务器中的SafeEditor.js配置信息。

7.1. 修改版本号

Web安全控件开发文档-Xproer.SafeEditor_第3张图片

7.2. 修改IE32控件clsid,projid,cab包地址信息

Web安全控件开发文档-Xproer.SafeEditor_第4张图片

7.3. 修改IE64控件clsid,projid,cab包地址信息

Web安全控件开发文档-Xproer.SafeEditor_第5张图片

7.4. 修改Firefox控件MimeType,xpi包地址信息

Web安全控件开发文档-Xproer.SafeEditor_第6张图片

7.5. 修改Chrome控件CrxName,MimeTypeChr,crx包地址信息

clip_image016

8. 升级控件

一般情况下，控件升级后SafeEditor.cab会更新，同时版本号也会更新。

主要步骤如下：

1. 重新上传SafeEditor.cab文件。

2. 更新SafeEditor.js中的版本号。

8.1. 更新SafeEditor.js中的版本号

打开SafeEditor.js文件，将版本号改为最新的版本号。最新版本号一般在邮件中提供。

     this.Config = {

           "PostUrl"     : "http://www.ncmem.com/check.aspx"

         , "EncodeType"  : "utf-8"

         , "EncryptionType": "md5"//加密类型：md5,base64

         , "Company"     : "荆门泽优软件有限公司"

         , "Version"     : "1,1,8,21165"

         , "License"     : ""

        , "Debug"       : false//是否打开调试模式

        , "LogFile"     : "F:\\log.txt"//日志文件路径

         , "Clsid"       : "E 3F 3E0E6-49AD -453A -8589-85708949CB35"

         , "ProjID"      : "Xproer.SafeEditor"

         , "CabPath"     : "http://www.ncmem.com/download/SafeEditor/SafeEditor.cab"

         //IE64

         , "Clsid64"     : "B9D7B 47F -6D31-4450-8532-6E1B191FE7AB"

         , "ProjID64"    : "Xproer.SafeEditor64"

         , "CabPath64"   : "http://www.ncmem.com/download/SafeEditor/SafeEditor64.cab"

         //FireFox

         , "MimeType"    : "application/npSafeEditor"

         , "XpiPath"     : "http://www.ncmem.com/download/SafeEditor/SafeEditor.xpi"

         //Chrome

          , "CrxName"     : "npSafeEditor"

         , "MimeTypeChr" : "application/npSafeEditor"

         , "CrxPath"     : "http://www.ncmem.com/download/SafeEditor/SafeEditor.crx"

         , "ExePath"     : "http://www.ncmem.com/download/SafeEditor/SafeEditor.exe"

     };

​

说明：

更新版本号后，IE会自动提示用户安装最新的控件。

9. 用户接口

9.1. 配置数据上传地址

<script type="text/javascript" language="javascript">

var pwdEditor = null;

window.onload = function() {

pwdEditor = new PasswordEditor();

//设置数据上传地址

pwdEditor.Config["PostUrl"] = "http://localhost:1830/asp.net/check.aspx";

}

</script>

注意：

PostUrl必须使用绝对路径，不能使用相对路径。下面的写法都是错误的。

manager.Config["PostUrl"] = "/asp.net/check.aspx";

manager.Config["PostUrl"] = "/php/check.php";

manager.Config["PostUrl"] = "/jsp/check.jsp";

9.2. 自定义加密方式

目前安全控件支持MD5及BASE64加密方式。

<script type="text/javascript" language="javascript">

var pwdEditor = null;

window.onload = function() {

pwdEditor = new PasswordEditor();

//设置数据上传地址

pwdEditor.Config["EncryptionType"] = "md5";

}

</script>

9.3. 设置服务器编码方式

<script type="text/javascript" language="javascript">

var pwdEditor = null;

window.onload = function() {

pwdEditor = new PasswordEditor();

//设置服务器编码方式，支持GB2312/UTF-8

pwdEditor.Config["EncodeType"] = "GB2312";

}

</script>

9.4. 自定义数据验证成功的事件

//事件-传输完毕

function PasswordEditor_Complete(obj)

{

obj.State = ScreenCaptureState.Complete;

var msg = obj.ATL.Response;

//添加其它的处理代码

}

9.5. 设置附加信息

附加信息的作用就是在上传图片的同时向服务器提交额外的字段信息。比如当用户向服务器上传截图时，服务器需要知道是哪位用户上传的截图，这时可以将用户ID添加到附加信息中，这样服务器在获取截图信息的同时也能够根据附加信息知道是哪位用户上传的截图。

客户端：

pwdEditor.Fields["UserName"] = "test";

服务端：

string fname = Request.Form["UserName"];

开发人员可以根据自已的业务需求来扩展附加信息：

客户端：

pwdEditor.Fields["f1"] = "f1";

pwdEditor.Fields["f2"] = "f2";

pwdEditor.Fields["f3"] = "f3";

pwdEditor.Fields["f4"] = "f4";

pwdEditor.Fields["f5"] = "f5";

服务端(ASP.NET)：

string f1 = Request.Form["f1"];

string f1 = Request.Form["f2"];

string f1 = Request.Form["f3"];

string f1 = Request.Form["f4"];

string f1 = Request.Form["f5"];

10. 快速开始

设置服务器编码格式

以ASP.NET项目为例。在ASP.NET项目中修改服务器的编码格式是根据web.config中的设置确定的。

<globalization requestEncoding="utf-8" responseEncoding="utf-8"/>

设置插件的编码格式

打开web.config文件，修改下面的字段信息。

manager.Config["EncodeType"] = "UTF-8";//注意，此格式必须与服务器端的设置对应。默认为UTF-8

设置接收处理上传的文件页面

manager.Config["PostUrl"] = "http://localhost:1595/check.aspx";

编写服务端接收文件页面的处理代码。

ASP.NET(C#)

public partial class upload : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

string name = Request.Form["UserName"];

string pass = Request.Form["Password"];

}

}

11. JavaScript对象

11.1. PasswordEditor对象

类型：JavaScript

WEB安全控件包装类。此对象封装了控件的加载功能，并提供控件信息配置及管理功能。

方法
Post方法

开始上传数据。

语法

void Post();

属性
Fields属性

上传数据时附加的额外信息。

注意：此属性暂时不支持中文字符串。

以下示例演示上传时添加用户名和密码的额外信息：

var pwdEditor = new PasswordEditor();

pwdEditor.Fields["UserName"] = "test";

pwdEditor.Fields["UserPass"] = "test";

Config属性

提供全局配置信息。

语法：

this.Config = {

"EncodeType" : "UTF-8"

,"PostUrl" : "http://www.ncmem.com/check.aspx"

};

EncodeType值

服务器编码方式。

此属性必须和web.config配置文件对应。

如果服务器端编码方式是UTF-8

<globalization requestEncoding="utf-8" responseEncoding="utf-8"/>

则客户端也必须是UTF-8

var pwdEditor = new PasswordEditor();

pwdEditor.Config["EncodeType"] = "UTF-8";

如果服务端编码方式是GB2312

<globalization requestEncoding="gb2312" responseEncoding="gb2312"/>

则客户端也必须是GB2312

var pwdEditor = new PasswordEditor();

pwdEditor.Config["EncodeType"] = "GB2312";

PostUrl值

处理上传数据的URL。

12. ActiveX对象

12.1. Xproer.PasswordEditor对象

CLSID：B10327CB-56EC-43D9-BED0-C91E4AE8F42E

类型：ActiveX

安全控件。整合了向服务器验证的功能。支持SSL安全协议。

Post方法

向服务器发送数据。

12.1.1. 向服务器提交数据

以下代码是控件向服务器提交的数据。

Content-Disposition: form-data; name="title"\r\n\r\n

用户名称\r\n

Content-Disposition: form-data; name="Password"\r\n\r\n

用户密码\r\n

13. 服务器支持

13.1. ASP.NET(C#)

开发语言：ASP.NET(C#)

.NET框架：2.0

说明：PasswordEditor控件是使用标准HTTP FORM方式上传的，所以如果服务器是使用的其它语言，例如PHP,JSP使用相应的HTTP FORM方式处理接受数据即可以。

13.1.1. web.config配置文件

说明：如果需要上传大文件，则需要修改httpRuntime中的maxRequestLength属性值。同时还需要修改executionTimeout值。

requestEncoding值和控件的编码必须保持一致，否则服务器接受上传文件名称会出现乱码。

<system.web>

<globalization requestEncoding="utf-8" responseEncoding="utf-8"/>

<!--<globalization requestEncoding="gb2312" responseEncoding="gb2312"/>-->

</system.web>

13.1.2. check.aspx代码

ASP.NET(C#)

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.IO;

using System.Text;

namespace WebApplication1

{

public partial class upload : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

string name = Request.Form["UserName"];

string pass = Request.Form["Password"];

//验证成功返回:1,失败返回:0

Response.Write("1");

} }

}

13.2. JSP

Web平台：Apache Tomcat 6

配置步骤：

1.将upload.war放到Tomcat 6 的 webapp目录中。

例如下列目录：C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps

2.重启Tomcat 6服务

3.修改ScreenCapture.html中PostUrl地址，一般情况为 http://127.0.0.1:8080/upload/upload.jsp

4.在IE中打开ScreenCapture.html开始测试。

13.2.1. 取附加字段

JSP示例是使用的SmartUpload来实现的，可以通过下面的方式获取附加字段

mySmartUpload.getRequest().getParameter();

完整代码如下

SmartUpload su = new SmartUpload();

su.initialize(pageContext);

su.setMaxFileSize(1024000);//1M

su.setTotalMaxFileSize(1024000);

su.setAllowedFilesList("jpg,JPG,Jpg,jPg,jpG,JPg,jPG,jPg,gif,GIF,gIf,Gif,GIf,gIF,giF,gIf,bmp,BMP,Bmp,BMp,bMP,bmP,BmP,bMp");

su.setDeniedFilesList("exe,bat,jsp,htm,html,asp,");

su.upload("utf-8");

String id = (String)su.getRequest().getParameter("id");//新增的时候可以接收,但修改时为null

String sortNum=(String)su.getRequest().getParameter("sortNum");//新增的时候可以接收,但修改时为null

13.3. PHP
13.3.1. upload.php代码

upload.php

<?php

ob_start();

$uploadDir = dirname(__FILE__).'/upload';

//自动创建目录

if(!file_exists($uploadDir)){

mkdir($uploadDir);

}

//取时间字符串，格式：_09_09_时分秒毫秒

$time = date("Y_m_d_His") . floor(microtime() * 10000);

//如果PHP页面为UTF-8编码，请使用urldecode解码文件名称

//$fileName = urldecode($_FILES['img']['name']);

//如果PHP页面为GB2312编码，则可直接读取文件名称

$fileName = urldecode($_FILES['img']['name']);

$tmpName = $_FILES['img']['tmp_name'];

//取文件扩展名jpg,gif,bmp,png

$path_parts = pathinfo($fileName);

$ext = $path_parts["extension"];

//年_月_日_时分秒毫秒.jpg

$saveFileName = $time . '.' . $ext;

//xxx/2011_05_05_091250000.jpg

$savePath = $uploadDir . "/" . $saveFileName;

//另存为新文件名称

if (!move_uploaded_file($tmpName,$savePath))

{

exit('upload error!' . "文件名称：" .$fileName . "保存路径：" . $savePath);

}

//输出图片路径

//$_SERVER['HTTP_HOST'] localhost:81

//$_SERVER['REQUEST_URI'] /FCKEditor2.4.6.1/php/test.php

$reqPath = str_replace("upload.php","",$_SERVER['REQUEST_URI']);

echo $reqPath . "upload/" . $saveFileName;

header('Content-Length: ' . ob_get_length());

?>

13.4. ASP

<%

Option Explicit

Response.Buffer=True

%>

<!--#include file="UpLoadClass.asp"-->

<%

dim lngUpSize,uploader,intError

Set uploader = new UpLoadClass

uploader.TotalSize= 10485760'10MB

uploader.MaxSize = 10000*1024

uploader.FileType = "gif/jpg/png/bmp/pdf/doc/xls/rar/zip/txt"

uploader.Savepath = "upload/"

'自动创建上传文件夹

dim folder,fs

folder = server.MapPath(uploader.Savepath)

set fs = Server.CreateObject("Scripting.FileSystemObject")

if(fs.FolderExists(folder) = false) then

fs.CreateFolder(folder)

end if

lngUpSize = uploader.Open()

intError = uploader.Form("photo2_Err")

'输出文件名称和路径：-09-10-5-52-255252.jpg'

response.Write("upload/" & uploader.Form("ServerFileName"))

if lngUpSize>uploader.MaxSize then

%>

<script language="javascript">

<!--

alert("您上传的文件最大不能超过M!!");

history.back();

//-->

</script>

<%

response.end

end if

if intError=-1 then

%>

<script language="javascript">

<!--

alert("您没有上传任何文件，请重新上传!!");

history.back();

//-->

</script>

<%

response.end

end if

Set uploader = nothing

%>

你可能感兴趣的:(editor)

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他