易栈网-膘叔（Neatstudio.COM）

易栈网-膘叔

基于JQUERY制作的仿GOOGLE自动完成插件

淘宝QA上关于XSS的两篇文章（据说还有后续）

PHP处理中文二三例

CNBETA：Google Reader更新,支持评论

jQuery UI 1.7 发布

基于JQUERY制作的仿GOOGLE自动完成插件

淘宝QA上关于XSS的两篇文章（据说还有后续）

PHP处理中文二三例

CNBETA：Google Reader更新,支持评论

jQuery UI 1.7 发布

日志分类

热门标签

日志归档

搜索文章

最新评论

博客信息

友情链接

浏览模式: 标准 | 列表2009年03月的文章

Submitted by gouki on 2009, March 15, 8:48 PM

本例子来自博客园，其实关于Autocompleted的例子，用jquery的话，是很多很多，但那都是国外的，难得有国内的例子，看到了就复制回来一份，呵呵

原文：http://www.cnblogs.com/cntlis/archive/2009/03/14/1412144.html

数据采用JSON，格式为{keylist:[{'keyname':关键字1,'keyextend':扩展文字(譬如说结果数目)},{'keyname':关键字2,'keyextend':扩展文字(譬如说结果数目)}]}

JS代码（当成JS代码插入的时候，高亮会超时，所以，用HTML格式了一下）

/**//*
* jQuery AutoComplete
*
* Author: cntlis
* http://blog.csdn.net/cntlis
*
* Licensed like jQuery, see http://docs.jquery.com/License
*
* 作者：cntlis
* QQ：8112857
*/
$.fn.AutoComplete = function(url,option){
var me= this;
var strKey= $(me).val();
var strKeyBak= "";
var isShow = false;
var doption={
iwidth: '0px', //下拉框的宽度
iLengthLower: 1, //当表单的长度大于iLengthLower小于iLengthUpper时才开始执行搜索
iLengthUpper: 50,
strPara: "Keyword", //变量名称
zIndex: 1, //提示框的Z-INDEX值
hasscroll: 0, //是否出现滚动条0无1有
hasclose: 1, //是否拥有关闭窗口
desfun:function(){}
};
$.extend(doption,option);
var iLengthLower= doption.iLengthLower;
var iLengthUpper= doption.iLengthUpper;
var strPara= doption.strPara;
if ($("#autocomplete").length<1){$("body").append("<div id='autocomplete' class='autocompletefloor'></div>");}
$("#autocomplete").hide();
$(me).keyup(function(e){keysearch(e.keyCode);});
$(me).keydown(function(e){LineSelect(e.keyCode);});
$(me).bind("blur",function(){
strKeyBak= $("#autocomplete ul .selected .keyname").text(); //为click事件增加处理
if (strKeyBak.length>0 && strKeyBak!=$(me).val()){
$(me).val(strKeyBak);
doption.desfun();
};
floorHide();
});
var encode=function(v){//如果包含中文就escape,避免重复escape)
return escape(v).replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');
}
function floorHide(){
$("#autocomplete").hide().html("");
strKey= "";
isShow = false;
}
function floorShow(){
var p= $(me).offset();
var w= (doption.iwidth == "0px") ? $(me).width()+2 : doption.iwidth;
$("#autocomplete").css({
'z-index:':doption.zIndex,
width:w,
top:parseInt(p.top+$(me).outerHeight())+"px",
left:parseInt(p.left)+"px"
}).show();
strKey= "";
isShow = true;
}
function keysearch(code){
var strKeyNow=$(me).val();
if(code == 38 || code == 40 || code == 13 || code == 27 || code == 9) return; //TAB/回车、ESC、向上、向下
if((strKey == "" || strKeyNow != strKey) && strKeyNow.length >= iLengthLower && strKeyNow.length <= iLengthUpper){
$.ajax({
type: "Get",
dataType: "json",
url: url,
data: strPara != "" ? strPara + "=" + encode(strKeyNow) : "",
success: function(json){
jsonjson=json.keylist;
if (json.length>0){
//获取搜索数据
var strContent= "<ul>";
$.each(json, function(i, n){
if(n.keyname.length>0){ //如果
//alert(n.keyname);
strContent+= '<li class="keyinfo"><span class="keyname">'+n.keyname+'</span>';
try{
if (n.keyextend.length>0){strContent+='<span class="keyextend">'+n.keyextend+'</span>';}
}catch(E){};
strContent+= '</li>';
};
});
if (doption.hasclose==1){
strContent+= '<li class="close"><span>关闭</span></li>';
}
strContent+='</ul>';
$("#autocomplete").html(strContent);
$("#autocomplete .keyinfo").mouseover(function(){$("#autocomplete .selected").removeClass("selected");$(this).removeClass("unselected").addClass("selected");}).mouseout(function(){$(this).removeClass("selected").addClass("unselected");}).click(function(){if(strKeyBak.length()>0){$(me).val(strKeyBak);}});
floorShow();
}else{
//没有搜索数据
floorHide();
return;
}
}
});
strKey=$(me).val();
}
if(strKey.length == 0 || strKey.length <= iLengthLower || strKey.length >= iLengthUpper) floorHide();
}
function LineSelect(code){
if(code == 27){floorHide();};//回车键、ESC键
if(code == 13){floorHide();doption.desfun();};
if(!isShow) return;
ObjSelected=$("#autocomplete ul .selected");
if (ObjSelected.length>0){ //如果已经有选定
//alert('dasfdas');
if(code == 38){ //向上键
if(ObjSelected.prev().text() != ""){ //如果不是第一个数据
ObjSelected.removeClass("selected").addClass("unselected").prev().removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}else{
ObjSelected.removeClass("selected").addClass("unselected");
$("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}
}else if (code == 40){ //向下键
if(ObjSelected.next().text() != ""){ //如果不是第一个数据
ObjSelected.removeClass("selected").addClass("unselected").next().removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}else{
ObjSelected.removeClass("selected").addClass("unselected");
$("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}
}
}else if(code == 38){
$("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete .keyinfo:last .keyname").text());
}else if(code == 40){
$("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete .keyinfo:first .keyname").text());
}
}
}

CSS代码

#autocomplete{}{ border: 1px solid #000; position: absolute; }
/**//*每行的格式*/
#autocomplete li{}{ display: block; text-align: left; height: 20px; line-height: 20px; background-color: #fff; cursor: default; padding: 0 5px; clear: both; }
/**//*鼠标选中时的格式*/
#autocomplete .selected{}{ background-color: #565da9; color: #fff; overflow: hidden; }
/**//*鼠标离开时代格式*/
#autocomplete .unselected{}{ background-color: #fff; color: #666; }
/**//*关键字信息*/
#autocomplete .keyname{}{ display: block; float: left; }
/**//*关键字扩展信息*/
#autocomplete .keyextend{}{ display: block; float: right; color: green; }
#autocomplete .unselected .keyextend{}{ color: green; }
#autocomplete .selected .keyextend{}{ color: #fff; }
/**//*关闭*/
#autocomplete .close{}{ text-align: right; }
#autocomplete .close span{}{ color: blue; cursor: pointer; text-decoration: underline; }

调用范例

$("#Keyword").AutoComplete("search.asp");

是不是很简单的？只是search.asp返回的数据要是上面所提供的格式，对于PHP来说就太方便了，只要生成相应的数组，然后json_encode一下就全出来了，呵呵

Tags: jquery, autocompleted

Javascript | 评论:4 | 阅读:25899

Submitted by gouki on 2009, March 13, 10:32 PM

不说啥了，直接上原文：
两篇文章的地址分别为：http://rdc.taobao.com/blog/qa/?p=857

http://rdc.taobao.com/blog/qa/?p=882

什么是xss漏洞

XSS又叫CSS英文缩写为Cross Site Script
中文意思为跨站脚本攻击
具体内容指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，
嵌入其中Web里面的html代码会被执行，从而达到恶意用户的特殊目的.

xss的漏洞危害

获取用户cookie
修改页面信息
浏览器劫持
与其他漏洞结合（如：csrf漏洞）
其他

xss漏洞实例演示

略（在这里放貌似不太合适）

xss漏洞是如何产生的

以下Velocity模板VM中常见的代码

<span>$!productName</span>
<script>var from = ‘$!rundata.Parameters.getString(’from’)';</script>

对于第一种类型的代码我们可以输入变量为

第一种类型的代码将变为

对于第二种类型的代码我们可以输入变量为

‘;hackerFunction(document.cookie);’

第二种类型的代码将变为

以上两种类型的代码都轻易的被植入了恶意的脚本，也就是说产生了传说中的xss漏洞。

xss漏洞如何预防

1. 对于非富文本针对入参进行转义

可通过escapeHtml和JavaScript进行转义。

转义过后上面的代码将会变成

<span>&ltiframe&nbspsrc&equalshttp&colon&sol&solhacker&periodcom&gt&lt&soliframe&gt</span>

转义后用户输入的恶意脚本代码就不会被执行从而达到了预防和修复的目的。

2. 对于富文本入参进行过滤

略。

总结

本篇简要介绍了什么是xss漏洞，xss漏洞在代码中是如何产生的，简单介绍了如何去预防和修复xss漏洞。

黑盒手动测试

有输入框的页面测试

对于非富文本在输入框中输入特殊字符 <”tiehua ‘> 提交

在提交后的页面查看源代码根据关键字tiehua查找源代码中的tiehua前后的<”>’是否已经被转义成

&lt&quot&gt&apos 如果未被转义说明这个输入框存在xss漏洞的嫌疑（提交bug）。

对于富文本输入框输入<img onerror=”alert(123)” src=http://xxx.com>提交页面

如果页面有出现排版问题或者js错误说明这个输入框存在xss漏洞的嫌疑（提交bug）。

页面链接参数的测试

链接带参数的如：

http://mall.taobao.com/?ad_id=&am_id=&cm_id=&pm_id=

该链接包含了4个参数，对于这种的测试方法和输入框测试方法一样只不过把参数当成你的输入框进行

提交。如：

http://mall.taobao.com/?ad_id=<”tiehua’>&am_id=&cm_id=&pm_id=

另：可能大家会说光这点不足以说服开发修改bug，很可惜本文旨在说明如何找到xss漏洞并不是说明

如何利用xss漏洞，感兴趣的看情况线下交流呵呵。

黑盒工具测试

推荐工具

Paros(免费)
Acunetix.Web.Vulnerability.Scanner (商业工具)

白盒代码扫描测试

在上一篇中我们讲到了xss漏洞产生的代码原因和解决方法如：

<span>$!productName</span>

此类的非富文本代码我们可以强制要求规范为：

<span> $!stringEscapeUtil.escapeHtml ($!productName)</span>

对于富文本的我们可以强制要求代码规范为通过过滤层过滤。

根据以上的两条规则，我们可以从白盒代码上去进行静态扫描代码是否按照规范编写来预防和筛选xss漏洞。

Tags: xss, qa, taobao

PHP | 评论:0 | 阅读:23424

Submitted by gouki on 2009, March 13, 10:23 PM

在网上看到一个贴子，是说利用16进制输出所有中文，例子如下：

PHP代码

<?php
$begin = hexdec ( " 4e00 " ); // 16进制转化为10进制
$end = hexdec ( " 9fa5 " );
$a = '["' ;
for ( $i = $begin ; $i <= $end ; $i ++ ) {
$a .= ' \u ' . dechex ( $i );
if ( $i % 10 == 0 ) {
$a .= " <br> " ;
}
}
$a .= ' "] ' ;
print_r (json_decode( $a ));
?>

看到这个例子，相信也能看得出了，那两个数字是不是与网上那种正则判断中文的很象啊。

由于json_encode转换中文时会把中文全部转换成16进制，这样在输出的时候就不会因为浏览器的字符集不支持而出现问题。所以同样的，利用decode也就相当于把这些16进制转换成中文了。其实并不需要这么复杂，只要在前面加上&#后面加上;就可以输出中文了。

看到这样的代码后想起昨天一个根据.net程序改的读取中文字的拼音的程序。

PHP代码

<?php
$strVal = array(
-20319,-20317,-20304,-20295,-20292,-20283,-20265,-20257,-20242,-20230,-20051,-20036,
-20032,-20026,-20002,-19990,-19986,-19982,-19976,-19805,-19784,-19775,-19774,-19763,
-19756,-19751,-19746,-19741,-19739,-19728,-19725,-19715,-19540,-19531,-19525,-19515,
-19500,-19484,-19479,-19467,-19289,-19288,-19281,-19275,-19270,-19263,-19261,-19249,
-19243,-19242,-19238,-19235,-19227,-19224,-19218,-19212,-19038,-19023,-19018,-19006,
-19003,-18996,-18977,-18961,-18952,-18783,-18774,-18773,-18763,-18756,-18741,-18735,
-18731,-18722,-18710,-18697,-18696,-18526,-18518,-18501,-18490,-18478,-18463,-18448,
-18447,-18446,-18239,-18237,-18231,-18220,-18211,-18201,-18184,-18183, -18181,-18012,
-17997,-17988,-17970,-17964,-17961,-17950,-17947,-17931,-17928,-17922,-17759,-17752,
-17733,-17730,-17721,-17703,-17701,-17697,-17692,-17683,-17676,-17496,-17487,-17482,
-17468,-17454,-17433,-17427,-17417,-17202,-17185,-16983,-16970,-16942,-16915,-16733,
-16708,-16706,-16689,-16664,-16657,-16647,-16474,-16470,-16465,-16459,-16452,-16448,
-16433,-16429,-16427,-16423,-16419,-16412,-16407,-16403,-16401,-16393,-16220,-16216,
-16212,-16205,-16202,-16187,-16180,-16171,-16169,-16158,-16155,-15959,-15958,-15944,
-15933,-15920,-15915,-15903,-15889,-15878,-15707,-15701,-15681,-15667,-15661,-15659,
-15652,-15640,-15631,-15625,-15454,-15448,-15436,-15435,-15419,-15416,-15408,-15394,
-15385,-15377,-15375,-15369,-15363,-15362,-15183,-15180,-15165,-15158,-15153,-15150,
-15149,-15144,-15143,-15141,-15140,-15139,-15128,-15121,-15119,-15117,-15110,-15109,
-14941,-14937,-14933,-14930,-14929,-14928,-14926,-14922,-14921,-14914,-14908,-14902,
-14894,-14889,-14882,-14873,-14871,-14857,-14678,-14674,-14670,-14668,-14663,-14654,
-14645,-14630,-14594,-14429,-14407,-14399,-14384,-14379,-14368,-14355,-14353,-14345,
-14170,-14159,-14151,-14149,-14145,-14140,-14137,-14135,-14125,-14123,-14122,-14112,
-14109,-14099,-14097,-14094,-14092,-14090,-14087,-14083,-13917,-13914,-13910,-13907,
-13906,-13905,-13896,-13894,-13878,-13870,-13859,-13847,-13831,-13658,-13611,-13601,
-13406,-13404,-13400,-13398,-13395,-13391,-13387,-13383,-13367,-13359,-13356,-13343,
-13340,-13329,-13326,-13318,-13147,-13138,-13120,-13107,-13096,-13095,-13091,-13076,
-13068,-13063,-13060,-12888,-12875,-12871,-12860,-12858,-12852,-12849,-12838,-12831,
-12829,-12812,-12802,-12607,-12597,-12594,-12585,-12556,-12359,-12346,-12320,-12300,
-12120,-12099,-12089,-12074,-12067,-12058,-12039,-11867,-11861,-11847,-11831,-11798,
-11781,-11604,-11589,-11536,-11358,-11340,-11339,-11324,-11303,-11097,-11077,-11067,
-11055,-11052,-11045,-11041,-11038,-11024,-11020,-11019,-11018,-11014,-10838,-10832,
-10815,-10800,-10790,-10780,-10764,-10587,-10544,-10533,-10519,-10331,-10329,-10328,
-10322,-10315,-10309,-10307,-10296,-10281,-10274,-10270,-10262,-10260,-10256,-10254
);
$strPy = array(
"A","Ai","An","Ang","Ao","Ba","Bai","Ban","Bang","Bao","Bei","Ben",
"Beng","Bi","Bian","Biao","Bie","Bin","Bing","Bo","Bu","Ba","Cai","Can",
"Cang","Cao","Ce","Ceng","Cha","Chai","Chan","Chang","Chao","Che","Chen","Cheng",
"Chi","Chong","Chou","Chu","Chuai","Chuan","Chuang","Chui","Chun","Chuo","Ci","Cong",
"Cou","Cu","Cuan","Cui","Cun","Cuo","Da","Dai","Dan","Dang","Dao","De",
"Deng","Di","Dian","Diao","Die","Ding","Diu","Dong","Dou","Du","Duan","Dui",
"Dun","Duo","E","En","Er","Fa","Fan","Fang","Fei","Fen","Feng","Fo",
"Fou","Fu","Ga","Gai","Gan","Gang","Gao","Ge","Gei","Gen","Geng","Gong",
"Gou","Gu","Gua","Guai","Guan","Guang","Gui","Gun","Guo","Ha","Hai","Han",
"Hang","Hao","He","Hei","Hen","Heng","Hong","Hou","Hu","Hua","Huai","Huan",
"Huang","Hui","Hun","Huo","Ji","Jia","Jian","Jiang","Jiao","Jie","Jin","Jing",
"Jiong","Jiu","Ju","Juan","Jue","Jun","Ka","Kai","Kan","Kang","Kao","Ke",
"Ken","Keng","Kong","Kou","Ku","Kua","Kuai","Kuan","Kuang","Kui","Kun","Kuo",
"La","Lai","Lan","Lang","Lao","Le","Lei","Leng","Li","Lia","Lian","Liang",
"Liao","Lie","Lin","Ling","Liu","Long","Lou","Lu","Lv","Luan","Lue","Lun",
"Luo","Ma","Mai","Man","Mang","Mao","Me","Mei","Men","Meng","Mi","Mian",
"Miao","Mie","Min","Ming","Miu","Mo","Mou","Mu","Na","Nai","Nan","Nang",
"Nao","Ne","Nei","Nen","Neng","Ni","Nian","Niang","Niao","Nie","Nin","Ning",
"Niu","Nong","Nu","Nv","Nuan","Nue","Nuo","O","Ou","Pa","Pai","Pan",
"Pang","Pao","Pei","Pen","Peng","Pi","Pian","Piao","Pie","Pin","Ping","Po",
"Pu","Qi","Qia","Qian","Qiang","Qiao","Qie","Qin","Qing","Qiong","Qiu","Qu",
"Quan","Que","Qun","Ran","Rang","Rao","Re","Ren","Reng","Ri","Rong","Rou",
"Ru","Ruan","Rui","Run","Ruo","Sa","Sai","San","Sang","Sao","Se","Sen",
"Seng","Sha","Shai","Shan","Shang","Shao","She","Shen","Sheng","Shi","Shou","Shu",
"Shua","Shuai","Shuan","Shuang","Shui","Shun","Shuo","Si","Song","Sou","Su","Suan",
"Sui","Sun","Suo","Ta","Tai","Tan","Tang","Tao","Te","Teng","Ti","Tian",
"Tiao","Tie","Ting","Tong","Tou","Tu","Tuan","Tui","Tun","Tuo","Wa","Wai",
"Wan","Wang","Wei","Wen","Weng","Wo","Wu","Xi","Xia","Xian","Xiang","Xiao",
"Xie","Xin","Xing","Xiong","Xiu","Xu","Xuan","Xue","Xun","Ya","Yan","Yang",
"Yao","Ye","Yi","Yin","Ying","Yo","Yong","You","Yu","Yuan","Yue","Yun",
"Za", "Zai","Zan","Zang","Zao","Ze","Zei","Zen","Zeng","Zha","Zhai","Zhan",
"Zhang","Zhao","Zhe","Zhen","Zheng","Zhi","Zhong","Zhou","Zhu","Zhua","Zhuai","Zhuan",
"Zhuang","Zhui","Zhun","Zhuo","Zi","Zong","Zou","Zu","Zuan","Zui","Zun","Zuo"
);
function getPy ( $string )
{
global $strVal,$strPy;
$py = '';
$strLen = strLen( $string );
for ( $ii = 0; $ii < $strLen; $ii++ ){
$s = ord( $string[$ii] );
if ( $s > 160 ){
$ii++;
$ss = ord( $string[$ii] );
$_ss = $s * 256 + $ss - 65536;
if ( $_ss == -9254 ){
$py .= "Zhen";
}else{
foreach ( $strVal as $_k => $_v ){
$_index = $_v > $_ss ? ($_k-1) : ($_v == $_ss ? $_k : 0 );
if ( $_index ){
$py .= $strPy[$_index];
break;
}
}
}
}else{
$py .= " {$string[$ii]} ";
}
}
return $py;
}

这是根据网上的例子改写而来，其实BUG不少，作业的作，是认不出的。还有GBK的字符也是认不出拼音的（好象GBK里的一些特殊字符的拼音规则和上面的数组并不一致）

不过，这些都算是我的备份吧。呵呵，同样，如果对拼音要求不高的朋友也可以拿来用用。

Tags: 中文处理

PHP | 评论:0 | 阅读:21068

Submitted by gouki on 2009, March 12, 10:34 PM

在没有使用google reader订阅RSS前，我一直使用 GreatNews，但是我不可能在单位和家庭两处都同时订阅和查看RSS吧？所以改用网络版了。

基于国内的网络，我也曾经有过多个选择，但最终还是使用google reader，目前，我订阅的RSS已经超过了100个，虽然有很多是我一带而过的看看的，其实只是扫一遍，但至少我确信，这里面有一些RSS源的内容还是我非常喜欢看的。

以前的READER永远让我只是孤独的欣赏，虽然有share功能。今天看到cnbeta上写着：

Google Reader team刚刚公布了一项新的特性,这一网络上最流行的feed阅读器开始支持评论.
这意味着您的朋友们可以开始评论您订阅的内容,但想看到他们的评论需要切换到评论模式才可以,当用户有评论时,他们的头像会显示一个评论气泡,点击就可以看到,这一功能也开始在移动版本的Google Reader上出现.

很开心，但是有人回复说中文版不支持，不过，对于我这样的IB青年来说，当然我是使用英文版的GOOGLE READER的，可惜现在这个功能，只支持在：friend shared items栏目里。不是朋友共享的，就无法评论。

我觉得象这种，应该是共享有相同的RSS的源的人，可以提供一下COMMENT，试想一下，如果有这个功能，对于WEB网站来说，是不是会损失流量呢？哈哈

Tags: google, reader

Software | 评论:0 | 阅读:19985

Submitted by gouki on 2009, March 12, 10:23 PM

继jQuery 1.3.1发布之后，UI包一直没跟上，3月6日，兼容jQuery 1.3.1的UI包终于发布了。大家可以来这里下载jquery-ui-1.7.custom.zip，svn方式：http://jquery-ui.googlecode.com/svn/tags/1.7/

这次改动主要如下：

和jQuery1.3兼容。
修补和优化以前的UI插件。
崭新的CSS框架。
jQuery UI 1.7建立在一个崭新的强大的css框架上，这个框架不仅仅用于jQuery UI的插件，还可以用于定制插件，任何开发者都能很容易地基于ThemeRoller（jQuery UI 的换肤插件）为插件创建皮肤。更多关于CSS框架
新版的ThemeRoller(V2)。
健全的演示和文档。
完全离线的帮助文档。
重构了download builder，即使javascript被禁用，这个插件仍然能运作。
皮肤打包。
点击这里可以立即下载所有皮肤: jquery-ui-themes-1.7.zip，svn: http://jquery-ui.googlecode.com/svn/tags/1.7/themes/
为jQuery UI新建了一个网站http://www.jqueryui.com/。
这个网站和主站分开，专注于UI研发。

－－－－－－－－－－－－－－－－－

出处：http://kaima.cnblogs.com
作者：kai.ma

Tags: jquery, ui

Javascript | 评论:0 | 阅读:21912

Records:53«‹2 3 4 5 678 9 10 11 ›

« 2009年03月 »