TouchEvent猜想与验证

节前在支援一些移动页面的时候,遇到了蛮多的TouchEvent相关的问题,趁着假期一一验证一下。

首先,一个简单的html页面如下

1、是否支持事件冒泡、事件捕捉?

当addEventListener的最后一个参数为false的时候,为冒泡模式,当最后一个参数为true的时候,为捕捉模式。

两个模式都试一下,从console中可以看出,TouchEvent是支持冒泡和捕捉的。截图是冒泡模式。

冒泡

2、TouchEvent能否阻止冒泡?

结果也是TouchEvent可以阻止冒泡的。

3、Document Scrolling与DIV Scrolling的区别

正常情况下面的滚动,是发生在body上面,可以通过document.body.scrollTop获得滚动的距离。

而DIV的滚动,则是发生在某个div上面,需要通过currentTarget.scrollTop来获得

Highcharts的UTC时区会导致X轴定位不准

今天下午在处理一个Highcharts的柱状图,其x轴为datetime类型,遇到一个非常奇怪的问题。

在这个组合图中,我的数据都是带datetime时间戳的,x轴也是datetime类型,但是不论我怎么设置,坐标点总是没法和x轴对齐,如下图。

我一开始还以为是我用的momentJS转换数据的时候出现的问题,结果,原来是Highcharts默认会比较用户的时区,而我没有给HighCharts配置正确的时区,导致了这个偏差就是时区的8个小时偏差。

最后只需要一句代码,就可以fix这个问题。

把UTC的时区关闭即可,坑啊,折腾我两个小时,不停在调整各种align\x\placement这样的参数(+﹏+)~

Web前端安全学习-CSRF

今天下午上了一堂前端安全的课,挺有意思,记录下来。在上课之前,我对安全的概念是:

用户输入是不可信的,所有用户的输入都必须转义之后才入库。

然后,上面这个这种方式,仅仅是防止SQL注入攻击,避免业务数据库被渗入。

在数据库有了一层安全保护之后,攻击者们的目标,从服务器转移到了用户身上。由此,出现了CSRF攻击和XSS攻击。

CSRF

CSRF (Cross-Site-Request-Forgery) 全称是跨站请求伪造。是攻击者伪造用户身份,向服务器发起请求已达到某种目的的攻击。

GET类型的CSRF

假如有一个业务系统API,其有一个点赞的api是 http://domain.com/api/like?pid=111 ,如果想要刷pid为111的点赞,只需要构建一个简单的HTTP请求即可。

因为Img标签会自动请求src的网络,估当用户浏览一个含有上述img标签的网址的时候,不经意间已经发出一个为pid=111内容进行点赞的操作。

其实这种写操作,最好改成POST的形式,起码增加了攻击者的门槛。

POST类型的CSRF

此类型的特点是,业务系统的api,对于写操作,是用POST的方式,而不是GET的方式。

和GET对比起来,攻击门槛高了一些,不能仅仅依靠img标签来构造HTTP请求,得靠表单来实现HTTP POST了。

先准备一个攻击页面,如上面的代码,然后将URL隐藏在预先准备的内容中,分发出去,诱使用户点击攻击页面。

CSRF防御方式

GET类型的CSRF,就应该从代码层面规避,让写操作必须走HTTP POST的方式,这样也更符合HTTP Method的语义。

POST类型的CSRF,由于是跨站攻击,一个简单的防御方式是对HTTP Refer进行判断,如果是非业务域名发起的HTTP请求,则直接过滤处理。

但HTTP Refer并不是百分百可靠,在某些时候,服务器是收不到HTTP Refer值的(例如某些代理环境,例如低版本浏览器)。

所以,HTTP Refer可以用来做CSRF攻击的检测,但防御还需要另外真正的宙斯盾。

根据上面可以知道,所有CSRF攻击,最重要的是伪造攻击URL,如果我们的API,带有一个随机参数,让攻击者没法固定伪造,则可以完美防御CSRF攻击。

防御CSRF,可以在我们请求的参数里面,携带一次性随机Token信息即可。

PHP爬虫

我居然能用爬虫抓数据了,继正则之后又迈过一道坎。

使用PHP Simple HTML DOM Parser这个库,然后自己对DOM选择器做一下二次封装,基本上可以应付一部分WordPress站点。

入门

引入PHP Simple HTML DOM Parser这个库,然后使用file_get_html()抓取目标网址后,就能像操作jQuery一样来抓取我们需要的东西了。

由于内网网络不通缘故,我使用爬虫的时候,给PHP配置了代理。正常网络环境, file_get_html($url) 即可,不需要后面两个参数。

整站爬取

根据WordPress的分页规则,判断是否有下一页。

注意整站抓取的时候,需要修改PHP最大执行时间,使其可以长时间执行。

缓存抓取结果

整站抓取的时候,由于时间很长,未避免中途脚本出错,导致的重新执行整个爬取流程,可以对每个URL的抓取结果,进行Cache。

为了我中途检查和后续处理方便,我直接把抓取结果保存成CSV格式,以爬虫的URL为单位。

结语

抓一个页面容易,但是整站抓取,很容易被反爬虫策略给挡在外面。一个好的爬虫,功夫都在策略的应对上面。

这次是以PHP-CLI的形式写的,中途出错只能重新执行(浏览器输入URL或者重新执行PHP-CLI),不稳定。

下次看看怎么改成以进程的形式执行,这样就不怕长时间执行出问题了。

WordPress爬虫配置及数据查看

iOS自定义键盘搜索键

之前知道HTML5的input属性,新增了一种type=search。当系统焦点在input[type=search]元素上时,iOS会自动更改键盘的确认按键为搜索,且按下后自动收齐键盘。

但是我尝试了一次,一直不成功,最后发现,原来是姿势不对。

input[type=search]必须放在一个form标签中,才会更改iOS键盘的效果。

效果如下图:

input[type=search]

还能通过一些webkit私有属性,自定义这个搜索框的样式,例如右边的XX,或者placeholder字体颜色等。

更多玩法,可以这篇文章:http://css-tricks.com/webkit-html5-search-inputs/

 

JS中的attribute和property

每一个dom节点,都有各自的attributes和properties。这两者很容易用混,尤其是在表单元素上面。

Property

每一个DOM节点,都是一个对象。像其他JS对象一样,DOM节点这类型HTMLElement对象,也可以添加一些方法或者属性。这些自定义添加的属性,就是property。它只能被JS所读取,并不会影响HTML的展示。(它能被JS的for-in方法遍历出来,但innerHTML里面不会显示)

properties

Attribute

与Property不同,Attribute会DOM节点上显示出来,但不会在DOM对象中被for-in遍历出来。

attribute

例如上图的input标签,他的Attributies包括value,type,name,id。

attributies

想操作DOM元素的的attribute,得依靠下列的JS接口

需要注意的是

  • 由于Attribute会显示在DOM上面,所以它的键名不区分大小写
  • 它的值只可以是字符串

Attribute与Property之间的同步

继续阅读“JS中的attribute和property”

Win平台安装MongoDB

时隔两年,一个内部项目用到了MongoDB,又要再次研究MongoDB啦。之前在Ubuntu上面安装、使用MongoDB都很流畅,但是在Win上面的CMD操作就很别扭,怎么都用不起来。

现在MongoDB的客户端有了GUI界面,用起来还不错,不过装MongoDB的过程还是有点麻烦,记录一下。

安装MongoDB

  1. 下载最新版MongoDB,建议装64位(别告诉我你电脑还是32位)http://www.mongodb.org/downloads。
  2. 下载得到一个压缩包,mongodb-win32-x86_64-2008plus-2.4.9.zip,解压的任意目录,我这里解压到D盘下面的mongodb目录下面。
  3. 在mongodb目录下面创建data和log两个文件夹。
  4. 在mongodb目录下面,创建mongodb.conf这个配置文件

最后目录格式如下

mongodb

运行MongoDB

在CMD,输入如下命令,启动MongoDB服务端。

D:\mongodb\bin>mongod.exe --config d:\mongodb\mongo.config

没有报错的话,在另外一个CMD窗口,输入如下命令启动MongoDB客户端,然后就可以在客户端执行MongoDB的查询语句。

D:\mongodb\bin>mongod.exe

以Window服务的形式运行MongoDB

在CMD执行下面命令添加MongoDB到Window服务中

D:\mongodb\bin>mongod.exe --config d:\mongodb\mongo.config --install

装完之后,以后运行MongoDB服务端,就不需要一直开着CMD了。

最后,推荐两款不错的MongoDB的GUI客户端

  • http://robomongo.org/
  • http://www.mongovue.com/

服务迁移导致数据差异

折腾博客的时候,经常搬服务器,按理来说,迁移是一件很简单的事。

通常,数据迁移包括以下几步:

  1. 网站根目录打包迁移,例如public_html这样的目录。
  2. 数据库迁移,通过phpmyadmin或者navicat之类的,把mysql数据复制到新的服务器上面。
  3. 通过修改本机hosts检查新服务器是否部署成功。
  4. 更改DNS,实施迁移。

通常我在dnspod里面,设置的解析缓存时间很短,基本上我修改DNS,是马上生效的。但毕竟用户的DNS不在我们的控制范围,总会有用户解析到旧的服务器上面,杯具就这样发生了。 继续阅读“服务迁移导致数据差异”

用fiddler进行debug

fiddler是一枚前端利器,大家用得都应该挺多的。

昨晚在家里调试一个页面,弄了好一会,fiddler都没有抓到数据。最后Google之,才发现因为我等都装了SwitchySharp这类自动翻墙插件。导致Chrome的流量没有走系统代理,而Fiddler是对系统代理进行了转发,故而fiddler没有抓到Chrome的流量。

知道原因之后,设置Chrome走系统代理,Fiddler即可正常工作。

带会话态调试

有一个站点,里面的页面要登陆态才能调试,也就是HTTP请求的header里面,需要带上一些额外的信息。

首先用fiddler抓取正常带有登陆态的HTTP请求,我这边用的是Cookie,具体哪个我也不清楚,就把整个Cookie都复制一下。

之前,有款Willow的插件,最新版支持自定义HTTP头,可以方便做这种带会话态的测试。可惜,昨晚在家里,怎么都没有搜索到最新版的Willow,就只能研究下Fiddler自身是如果修改请求的。

Fiddler主界面

Fiddler面板左侧是数据流,右侧是控制面板。其中,有一个Filters的Tab选项,里面有Request Headers和Response Header等配置信息。

我是希望给请求带上会话态,则勾上Request Headers => Set request header选项,并第一个空填入‘Cookie’,第二个空填入刚才复制下来的Cookie的值。

勾选控制面板左上角的‘use filter’,并点击右边Actions => Run Filterset now,即可生效。

之后,再看左侧的数据流,你会发现,你的请求都已经带上了Cookie属性,你可以很方便的调试任何带有会话态的站点。

跨域调试

正常情况下,JS执行跨域操作,将会被浏览器禁止。

跨域

但是开发过程中,时不时需要跨域去获取某些数据。

这里不讲各种跨域手法,仅仅介绍一些,通过使用Fiddler来添加请求的CORS响应头,欺骗浏览器允许跨域执行JS。

同样是在Filters选项中,拉到最底下,有一个Response Headers的表单域,勾上Set Response header,并在第一个空填上“Access-Control-Allow-Origin”,第二个空填上“*”,此时你浏览器再执行跨域JS操作,将会畅通无阻。

添加CORS响应头

此跨域方法,仅仅用于开发调试阶段,线上部署的时候,还是老老实实让后台筒靴们给配上Acces-Control-Allow-Origin头,又或者部署在同域的情况下。关于JS详细的跨域问题,可以看以前的内容:《各种kill跨域Boss的方法》。

最后

附上Fiddler监听Win8 Metro界面APP的方法:

打开Fiddler => 点击 Win8 Config =》 给你需要Fiddler监听的APP前面打上勾,保存即可。

win8 metro app debug

找到宝了,用launchpad来安装Ubuntu比较新的软件

上周装了一个Errorboard.js,结果ubuntu官方源的nodejs版本太久了,里面有个依赖包怎么都装不了。Google之,发现原来有个https://launchpad.net/ 这样的站点,里面有很多最新的软件源。

Launchpad(发射台)是Canonical有限公司所架设的网站,是一个提供维护、支持或联络Ubuntu开发者的平台。其中Launchpad提供了在线编译软件的功能,你可以自由的参与Ubuntu或相关自由软件的开发或编译工作。而你也可以利用该网站的汇报机制来汇报相关软件的Bug,或者进一步提供建议。

这么好的东东,当然要用上。

执行第一句的时候,提示没有add-apt-repository这个命令,可以安装python-software-properties来解决。

使用nginx的PPA,开启SPDY

同样,ubuntu自带的nginx源,版本太低了,现在nginx1.3x\1.4x都新增加了很多特性,尤其是SPDY这个功能。

有了SPDY之后,说不定能颠覆雪碧图。

Nginx推荐使用这个源,https://launchpad.net/~nginx/+archive/stable,该源的文件组织形式,和ubuntu官方源是基本保持一致的,我等不想编译的人可以直接使用。