(JS-PHP)使用RSA算法进行加密通讯

用户名密码明文直接POST到后端,很容易被别人从监听到。注:包括使用MD5等哈希函数处理后的数据,这里也算做明文(现在MD5爆破网站已经很多了~)。对安全性要求较高的网站,比如银行和大型企业等都会使用HTTPS对其进行加密通讯。但是由于效率原因,使用HTTPS的代价是及其昂贵的,对于访问量稍大的网站就会造成严重的性能瓶颈。解决方法一般只能采用专门的SSL硬件加速设备如F5的BIGIP等。所以很多网站选择了模拟SSL的做法,使用RSA来对密码等安全信息进行公钥加密,服务端用私钥解密。 通常是对密码进行加密,具体如下: 第一步: 加载三个RSA的js库文件,可以到这里下载 http://www.ohdave.com/rsa/。 第二步: 获取秘钥 1. 相关信息 通常情况下网站的SSL证书是由专门的CA机构(如VeriSign)颁发,同时需要交纳一定数额的费用。可是对于平时开发测试或其他情况下,我们自己也可以充当CA来生成自己颁发的证书。当然与前者相比缺点很明显:不能获得各个浏览器的信任,会弹出警告提示。不过,好消息是,对安全性要求稍低的网站现在可以考虑使用免费的CA认证(貌似是其级别最低的证书)。 跟VeriSign一样,StartSSL(网址:http://www.startssl.com,公司名:StartCom)也是一家CA机构,它的根证书很久之前就被一些具有开源背景的浏览器支持(Firefox浏览器、谷歌Chrome浏览器、苹果Safari浏览器等)。在2009年9月份,StartSSL竟然搞定了微软:微软在升级补丁中,更新了通过Windows根证书认证程序(Windows Root Certificate Program)的厂商清单,并首次将StartCom公司列入了该认证清单,这是微软首次将提供免费数字验证技术的厂商加入根证书认证列表中。现在,在Windows 7或安装了升级补丁的Windows Vista或Windows XP操作系统中,系统会完全信任由StartCom这类免费数字认证机构认证的数字证书,从而使StartSSL也得到了IE浏览器的支持。 2. 要生成获得证书所需的密钥等文件 openssl genrsa -des3 -out server.pem 1024 openssl req -new -key server.pem -out server.csr openssl rsa -in server.pem -out server.pem 使用上面的命令就会创建一个证书申请,这里我们会要求输入国家、组织、姓名等信息,但是不会要求输入证书有效天数,因为证书有效天数是CA认证中心给我们的;然后我们会把这个生成好的cert.csr(Certificate Signing Request (CSR):证书签名申请)发给CA认证中心。CA认证中心通过后,会反馈(通常是邮件)回来认证的信息,再导入即可。 把上面生成的文件内容提交给CA,即可换取证书;若自行生成则: openssl x509 -req -days 365 -in server.csr -signkey server.pem -out server.crt 3. 获取十六进制的密钥 数据是用ASN.1编码过的,所以可以用openssl命令从密钥文件(key或pem)提取秘钥 openssl asn1parse -out temp.ans … Continue reading “(JS-PHP)使用RSA算法进行加密通讯”

jQuery插件制作: 语音播报jspeech

在手机网站或者PC网站的资讯页面,想要有一个对文字进行语音播报功能。在网上找了很多资料,大部分都是正对于手机APP的,比如百度语音。这些都是给手机app(android、ios)提供sdk包,然后在调用对应的接口即可。而现在需要的是在网页上实现对文字进行语音播报功能,大致也是调用百度的语言功能。请看如下实现步骤。 第一步: 下载JQuery文件,并导入到html文件中 第二步: html文件布局实现 第三步: jspeech插件实现 1. 创建jspeech文件,然后根据jquery插件的基本格式把基本框架写好 2. 设置默认配置信息 var defaults = { //通过点击链接播报,还是直接播报 “jspeech_a”:true, //链接按钮的宽度 “jspeech_a_width”:”16px”, //链接按钮的高度 “jspeech_a_height”:”13px”, //链接按钮的背景图片 “jspeech_a_png”:”url(./image/icon.png) no-repeat”, //直接播报内容 “jspeech_content”:”测试” }; 3. 设置点击链接播报方式 //如果是通过点击链接播报 //获得文本内容 var content = $(this).text(); //生成链接 var speechClick = “<a href=’javascript:void(0);’ class=’jspeech_a’></a>”; $(this).append(speechClick); //设置链接样式 $(this).find(“.jspeech_a”).css({ width:options.jspeech_a_width, height:options.jspeech_a_height, “display”:”inline-block”, “background”:options.jspeech_a_png }); $(this).find(“.jspeech_a”).click(function(){ //捕获点击事件 var src = ‘http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=’ … Continue reading “jQuery插件制作: 语音播报jspeech”

JQuery插件制作:倒计时countdown

关于倒计时的插件可能网上很多,但是都不能满足自己想要的需求,所以作为程序员的我就开始来写一个JQuery倒计时插件countdown。 第一步: 下载JQuery文件 既然编写JQuery插件,那肯定是需要JQuery文件。 第二步: 把JQuery文件导入到html文件中 第三步: 网页布局 第四步: 编写JQuery插件countdown 1. 创建countdown.js文件,并且导入到html文件中。 2.  根据jquery插件的基本格式把基本框架写好。 jquery插件的基本格式: (function($){ $.fn.插件名称 = function(options){ var defaults = { //相关属性设置 } var options = $.extend(defaults, options); this.each(function(){ //实现的功能设置 }); }; })(jQuery); 3. 设置默认配置信息 4. 添加一个倒计时方法timedown 首先添加三个全局变量,第一个是用来保存插件传进来的this,第二个是用来保存的配置信息,第三个是定时器对象 var jthis = null; var opts = null; var countdowtime = null; 然后给这三个变量赋值 opts = … Continue reading “JQuery插件制作:倒计时countdown”

[JQuery]实现点赞加1效果

通过ajax异步更新数据库,并返回当前点赞数,来实现文章点赞功能,而需要一个加1的效果,逐渐变大而消失,请看如下图片:   实现代码: (function($){ $.fn.extend({ addOne: function(options) { options = $.extend({ str: “+1”, startSize: “14px”, endSize: “40px”, interval: 500, color: “red”, style: “”, callback: function() {} }, options); $(“body”).append(“<span class=’tips_box’ style='”+ options.style +”‘>”+ options.str +”</span>”); var box = $(“.tips_box”); var self = $(this); var top = self.offset().top; var left = self.offset().left + self.width() / 2 … Continue reading “[JQuery]实现点赞加1效果”

[JQuery]实现描点平滑移动

以前写过[定位到某个锚点]功能,使用的是#+描点名称,没有采用平滑功能。而实现平滑移动功能就需要用到JQuery的animate方法来实现动态的移动。请看如下代码: /** * 描点平滑移动 * 如果传递元素ID,则描点到该元素的位置 * 如果没有传递元素ID(为空),则返回到顶部 * @param {type} elements * @returns {undefined} */ function goto(elements) { var pos = 0; if (elements !== “”) { // 定义将要去的描点位置 pos = $(elements).offset().top; } // 实现平滑移动 1000代表时间ms $(“html,body”).animate({scrollTop: pos-20}, 1000); }

[JQuery]清除标签的style样式

对于html标签而言,一般都是在css文件中,通过id或者class来添加标签样式,所以想给标签换样式的话,就直接可以更换标签的class属性值。但是需要修改标签的style属性值,例如想清除掉style属性的样式值。实现代码如下: HTML代码: <div id=”jhonse” style=”padding:5px; “></div> JQuery代码: $(“#jhonse”).removeAttr(“style”); //ie,ff均支持 $(“#jhonse”).attr(“style”,””); //ff支持,ie不支持

[JQuery]模拟鼠标点击事件

在页面弹出框,采用的是lightbox_me插件,而需要用到一个模拟点击关闭事件,大致功能是当异步提交数据之后,如果数据正常提交,提示提交成功,并把弹出框隐藏,当时想到的是重新写个方法来实现,但是弹出框中有一个关闭按钮,刚好实现了如上功能,所以只需模拟鼠标点击该按钮即可。请看如下截图:   实现模拟点击事件代码如下: $(“.close”).trigger(“click”); 方法说明: 定义和用法 trigger() 方法触发被选元素的指定事件类型。 触发事件 规定被选元素要触发的事件。 语法 $(selector).trigger(event,[param1,param2,…]) 参数 描述 event 必需。规定指定元素要触发的事件。 可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。 [param1,param2,…] 可选。传递到事件处理程序的额外参数。 额外的参数对自定义事件特别有用。

[JQuery]实现设为首页以及加入收藏功能

在做企业官网项目的时候,总是会有设为首页、加入收藏功能,索性用JS实现出来,保存博客当中,以备下次所用! 设为首页 //设为首页 function SetHome(obj){ try{ obj.style.behavior=’url(#default#homepage)’; obj.setHomePage(‘http://blog.jhonse.com’); }catch(e){ if(window.netscape){ try{ netscape.security.PrivilegeManager.enablePrivilege(“UniversalXPConnect”); }catch(e){ alert(“抱歉,此操作被浏览器拒绝!\n\n请在浏览器地址栏输入“about:config”并回车然后将[signed.applets.codebase_principal_support]设置为’true'”); }; }else{ alert(“抱歉,您所使用的浏览器无法完成此操作。\n\n您需要手动将’http://blog.jhonse.com/’设置为首页。”); }; }; };  加入收藏 //加入收藏 function AddFavorite(sURL, sTitle){ try{ window.external.addFavorite(sURL, sTitle); } catch(e){ try{ window.sidebar.addPanel(sTitle, sURL, “”); } catch(e){ alert(“加入收藏失败,请使用Ctrl+D进行添加”); }; }; };

【JQuery】Ecshop与Jquery冲突的完美解决方案

ECShop把AJAX事件和JSON解析的模块放在common/transport.js之中,可以说它也有自己封装的一套工具,这其实是很正常的。 但恰恰的,在封装JSON各种方法的同时对object的模型进行了重写,这个就跟jQuery冲突了。因为众所周知的,jQuery对各种JavaScript对象进行了扩展。 这一切其实都很容易理解,各有各的理由十分自然,但头痛和无奈的就变得在我们这些使用者身上了。在ECShop论坛上原来也有很多朋友提出了这个问题,也提出了各种各样的方法,我尝试了一些,不好或者甚至无用,所以只好自己动手了。 解决思路大概就是屏蔽ECshop扩展的toJSONString方法,用别的函数代替。 为了照顾下小菜们,就写详细点吧。 一,修改默认js文件 1、首先复制一份 transport.js 改名为 transport.org.js 提供给后台使用 2、屏蔽掉transport.js里的toJSON功能 行数大概有497-737行之间 由if ( ! Object.prototype.toJSONString) { 开头的代码。 修改352行为: legalParams = “JSON=” + $.toJSON(params); 修改408行为: result = $.evalJSON(result); 屏蔽掉global.js里的如下代码(第10-13行): Object.prototype.extend = function(object) { return Object.extend.apply(this, [this, object]); } 3、修改index.js文件44行改为: var res = $.evalJSON(result); 4、修改common.js文件 第34行改为: Ajax.call(‘flow.php?step=add_to_cart’, ‘goods=’ + $.toJSON(goods), addToCartResponse, ‘POST’, ‘JSON’); 第850行改为: Ajax.call(‘flow.php?step=add_package_to_cart’, … Continue reading “【JQuery】Ecshop与Jquery冲突的完美解决方案”

【JQuery】动画与效果

1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次 slow=600毫秒  normal=400毫秒  fast=200毫秒 以优雅的动画隐藏所有匹配的元素,并在隐藏完成后可选的触发一个回调函数。 ②显示元素 show(speed,[callback])    以优雅的动画显示所有匹配的元素,并在显示完成后可选的触发一个回调函数。 ③交替显示隐藏 toggle(speed,[callback])  以优雅的动画切换匹配元素的可见状态,原来可见切换为不可见,原来不可见切换为可见。 <input type=”button” id=”hide1″ value=”hide()” /> <input type=”button” id=”show1″ value=”show()” /> <input type=”button” id=”toggle1″ value=”toggle()” /> <div id=”1″ style=”width:100px; height:100px; background-color:Green;”></div> $(function(){ $(“#hide1”).click(function(){$(“#1”).hide(700)}); $(“#show1”).click(function(){$(“#1”).show(700)}); $(“#toggle1”).click(function(){$(“#1”).toggle(700)}); }) 2.滑动效果 ①向上收缩效果 slideUp(speed,[callback])  通过高度的变化方式向上隐藏元素,并在隐藏完成后可选的触发一个回调函数。 ②向下展开效果 slideDown(speed,[callback])  通过高度的变化方式向下显示元素,并在显示完成后可选的触发一个回调函数。 ③交替伸缩效果 slideToggle(speed,[callback]) 切换匹配元素的高度的方式来改变可见状态,原来可见切换为不可见,原来不可见切换为可见。 $(“#slideup1”).click(function(){$(“#1”).slideUp(700)}); $(“#slidedown2”).click(function(){$(“#1”).slideDown(700)}); … Continue reading “【JQuery】动画与效果”