Hi,丸子|一个挺不正经的前端小混混

Uncategorized

关于JSONP应用信息泄漏问题

前天给博客换了新皮,如果你留意到右上角的欢迎词,你可能会惊讶的发现上面写着你的QQ昵称,至少看过我新版博客的好友都是这样跟我说的。如果没有显示你的QQ昵称,那是因为你在访问我博客的时候已经注销或被注销了QQ的登录记录。好吧,为什么会知道你的QQ昵称?容我慢慢道来。【ps:腾讯已经和谐了一些接口,还有一些我就不放出来了,老是被人举报→_→】 JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。 上面是从网络上摘抄的一个解释,显然jsonp是一种脚本注入的行为,假设有A,B两个站点通过它进行通信,A对B开放了接口,如果A站点被非法入侵,B站点也会因此受到不同程度的影响,这个要看接口的用途与实现。本文要说的不是什么程序缺陷,也不会教你如何入侵一个站点,而是要简单的说明jsonp会被恶意利用从而导致用户利益受到损失。 正如上面对jsonp描述的那样,jsonp可以轻松的实现跨域通信,因此很多站点,特别是集群站点都喜欢通过它实现一些简易的信息同步,以腾讯QQ为例,QQ有很多的分站,这些分站都通过sso(Single sign-on,单点登录)实现一处登录到处共享用户信息,而这些站点只需通过同一接口获取用户信息,这样给开发人员和用户都带来极大的便利,但是其中也存在着一些安全隐患。恶意用户同样可以通过这些接口来获取受害者的信息,从而达到某些目的。我的博客右上角的欢迎信息足以证明这个想法的可行性,我无需窃取用户cookie,那对我来说难度较大。 当然,要利用此方法有一个必要前提就是,用户必须“授权”给web应用,否则无法获得信息,也就是用户必须登录QQ的相关站点并未注销登录。这点对我来说并不会太担心,因为QQ已经将用户抓住,用户随时可能在线,可能很大部分网民有一大半的时间都在QQ的相关站点登录过。 那么泄漏了这些信息可以做什么?你可能听过“网络钓鱼”,就是骗子制作一个假的官方的网站,以骗用户有抽奖活动等方式骗取用户的QQ帐号或直接骗钱,当然现在QQ的安全知识普及做得不错,可能很多用户很容易就能识别骗子网站。但是如果一个站点伪装成与腾讯合作举办活动,并且在你访问的时候,在你“还没登录”的时候,就能知道你的QQ号码,昵称,QQ商城的消费信息,住址,电话号码等信息,你很难不相信它,就像有人会相信算命先生,因为它已经“未卜先知”了。利用这点可以很大程度提高“钓鱼”的成功率。这只是一种常见的利用方式,还可以结合社会工程学得到你的各种信息,可能直接就能破解你的邮箱或者在其他各种站点的帐号密码信息,再进一步利用进行欺骗的话,危害巨大。一个你一访问就泄漏各种信息的站点,即使你知道是骗子网站,信息也已经泄漏了,想法邪恶的同学可能可以想到更多可怕的事情。 说了这些,你可能还是不相信,腾讯的应用真的会泄漏很多信息吗?出于安全考虑,我不打算直接给出这些接口的信息,但是有心的开发人员轻松的就能找到它们。希望不管是架构师朋友还是程序员或者是前端开发的伙伴,在做项目的时候不要只是为了方便而使用一项方便却不保险的技术,更不要把重要的信息交给这样的技术,我们做产品的核心是用户,保证用户的利益是前提。本文以腾讯QQ作为例子,但是我相信其他的门户网站都存在类似的问题,应该引起重视。最后感谢“Edie→明” 提供测试的参考数据。 2011-05-25凌晨,发现一个更为严重的接口,泄露的个人信息直接可能导致用户QQ被盗或其它财产损失。 2011-06-16下午,发现一个可以泄漏好友信息的接口。

Uncategorized

去除input[type=search]的边框

新年在家其实挺无聊的,长假什么的都是浮云,然后就给自己的博客弄个新皮,试着给页面添加点新鲜的元素,什么html5,什么css3的,然后遭遇了input这货,将它的type设置为search。html代码如下: XHTML 1<input type="search" class="search-text" name="s" value="" title="Enter keyword(s), then press enter" placeholder="关键词..."> css代码如下: CSS 12345678910.searchbox input[type="search"] {background-color: transparent;border: medium none;color: #666;width: 100%;padding: 0;height: 20px;line-height: 22px;vertical-align: middle;} 在IE和Firefox中显示的结果跟预期的一样,但在webkit内核浏览器里,border的设置并没有被应用。 在IE和Firefox中显示的结果: 在Chrome中显示的结果: ....

Uncategorized

Google Chrome OS初体验

最近看了各种对于Google Chrome OS的报道,爱尝鲜的我也忍不住想体验一把,于是找到了suse studio编译的Chrome OS的镜像在虚拟机里体验了下,由于这是一张liveCD,自然无需安装啦,不过启动速度貌似不快,可能跟我分配的是基本硬件配置有关,这个过程让我感觉好像是死机没响应了。下面给大家放点截图先睹为快。 ChromeOS启动界面

Uncategorized

HTML5和css3跨浏览器降级兼容方案

html5和css3也火了一段时间了,很多前端潮人也慢慢的给自己的博客什么的加入了html5和css3的应用,实际上像腾讯和淘宝这些大公司的开发人员也在自己负责的项目中加入了一些html5和css3的应用,不管是作为试练还是优化,html5和css3确实带来了不少好处,但其应用的局限性也是显而易见的,那就是市场上存在的各种要死不死的浏览器和使用这些浏览器内核的三方浏览器,他们不支持html5和css3的新特性,但是这部分占浏览器的份额还很大,因此我们一般在做产品的时候不得不顾及这部分用户,所以如果我们一定要应用html5和css3的话,需要做至少两套方案,对于支持html5和css3特性的浏览器使用相应的技术进行处理,而不支持的我们对其优雅降级处理。html5的支持情况可以通过一个js库来检测,想必很多潮人都知道的Modernizr,该站不知道为何华丽的和谐了,请各自翻墙。 Modernizr也给出了html5和css3跨浏览器降级兼容方案,内容包括:canvas,web storage,video,Audio,web sql database,websockets,geolocation,application cache等等,还有css3的一些内容,详细的请访问链接:http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Uncategorized

解决xampp自启动和mysql.sock问题

装了ubuntu好长一段时间了,都没去用,国庆的时候折腾了下,配置了一些基本的开发环境,一上手就感觉喜欢上了ubuntu,说不上为什么。为了搞本地的测试php测试环境而装了xampp,安装超简单,但是我发现它没有自启动。解决办法也很简单,通过下面的命令打开启动的资源文件: Shell x@zst:~$ cd /etc/init.dx@zst:/etc/init.d$ sudo gedit rc.local 在启动文件里加入一行代码: Shell /opt/lampp/lampp start 这样xampp就可以开机自启动了,然后又遇到了另一个问题,当我用mysql的客户端连接mysql的时候出现了如下错误: Can’t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock’显然,这不是我们安装xampp的目录,它的位置应该是 /opt/lampp/var/mysql/mysql.sock 网上看到的方法是将两个文件进行连接,命令如下: Shell sudo ln -s /opt/lampp/var/mysql/mysql.sock /var/run/mysqld/mysqld.sock 于是我照做了,当时确实解决了问题,当这样有个弊端,这个sock文件是mysql连接时才有的,重启后就消失了,我不得不在手动连接一次,于是,我很猥琐的把这句命令按照前面启动xampp的方法在启动xampp代码后加入这行命令,问题解决。 ....

Uncategorized

对HTML的一点看法

菜鸟的叽叽歪歪 接触web开发一年多了,从完全不知道html跟css是干嘛的,到现在对他们有所理解并热爱着它们,这一切要感谢鬼哥(cssforest博主)在我入门的时候让我加入css森林群这个“变态”的地方,在这里我受益匪浅。这里充斥着对html跟css的激烈的讨论,其中不少关于语义化html的理解,语义化的html是html设计的本义,只是很多年后才被正确的认识。 我想说:HTML“不是”用来布局的 随着web2.0这个概念的大潮,网络上铺天盖地的宣传和传播着各种所谓“div+css”布局教程。嗯,国人喜欢跟随各种潮流,我也是因为这种潮流才接触的web开发。但是,我想说:HTML不是用来布局的。在微博上发了这句话后,马上就有人密我说:“那你用什么布局?除了div跟table,你还用什么?”。html是各种信息的载体,所以它表示的是各种信息的层次跟内容,布局就是让内容按照设想的样貌呈现,那是css的事。 语义化之路 html阐述着页面拥有者所要表达的各种信息,这些信息即使在无样式的条件下也能清楚地让浏览者知道页面上的内容和层次,但是显然这100多个标签所能表示的信息是有限的。在森林里经常有人会发一个设计图的某部分来问html结构要怎么写,因此可能会引起一堆的讨论,关于语义化的讨论。语义这东西本身就是有争议的,每个人的理解都会有些不同,最终问题可能无疾而终,一般提问者会选择大多数人赞成的方案,这个无可厚非。但是,我认为代码者写代码写的是自己的态度,自己的理解,自己所要传达给浏览者的信息。所以,为什么要拿设计图来讨论html结构,为什么不去掉样式看看你的代码所展示的真正含义,既然你这么纠结于语义化,那么就还原他本来的样貌,而不是在一堆修饰下看待结构。 那么如何来理解各种信息的语义,然后再通过传递类似信息的html标签来书写呢?我也没有答案。但是,你确定了解了各个标签及基本含义了吗?我想这是语义化的前提,估计很多人都只知道60%甚至更少,用到的标签更是少之又少。我们要做的是理解最基本的东西,再去思考更深一层的含义,才能将有限的语义扩展并承载无限的信息。 看完自己写的东西很装逼,但也是我的一点理解和思考,所谓语义,不就是你确切想告诉别人你想表达的东西么。

Uncategorized

HTML5本地存储

同样是html5的规范,同样是存储,HTML5本地存储和离线存储不是一回事,感觉有必要提及,因为在互联网铺天盖地宣传html5的特性的时候,经常出现这样那样的字眼,对于还没接触的或初学者来说,很容易混淆这两个概念。离线存储(Offline Storage)正如之前我的那篇介绍中你看到的样子,实际上它实现的是文件的离线存储,而本地存储(Local Storage)跟会话存储(Session Storage)一样同属于web的数据存储(Web Storage)。还有一种存储方式是Web SQL Database,它是一个可以用SQL操作的客户端数据库。这些存储方式都是用户客户端实现的,因此有人会把它们称为“本地存储”,实际上我觉得叫“客户端存储”更合适,这样不至于跟Web Storage中的Local Storage概念冲突和混淆。 什么是HTML5 Local Storage? HTML5中介绍的Local Storage(有的地方把它叫做DOM Storage)是一种将web数据存储在用户本地的存储方式,这种形式的存储其实你早就接触过了,那就是cookie。那么为什么不直接用cookie好了,还要本地存储做什么?我们知道,html5带来更丰富的web表现形式,在web中实现大量富媒体应用的时候,对于数据存储的要求也相对提高,当然服务器的压力也相应变大,因此我们需要一种类似于cookie的存储方式,但它和cookie不大一样: 我们需要更大的存储空间,本地存储默认有5MB,而cookie只能存4k的数据和cookie一样都存储在客户端的数据不会因为页面刷新或关闭等操作而改变不会向服务器发出请求,cookie是会包含在每个HTTP请求中的 好吧,假设你现在正需要这样的一种存储方式,那么你要知道浏览器的支持情况如何,支持本地存储的浏览器版本有:IE8+,FIREFOX3.5+,SAFARI4+,CHROME4+,OPERA10.5+,IPHONE2+,ANDROID2+以及其他我不知道的。 如何使用HTML5 Local Storage? 不是所有的浏览器都支持html5的本地存储,所以在使用它之前,你需要一点检测工作,来确保你的应用正常运作,你需要下面的代码: JavaScript if('localStorage' in window&&window['localStorage'] !== null){/* do storage stuff... ....

Uncategorized

CSS3学习:线性渐变(linear-gradient)

在切一块很大的渐变背景图时,突然想为啥不试试用css3来实现,撇开兼容问题开始学习这个有趣的css3属性。于是分别在MDC和SRL找到了对应的文档,结果出乎预料的发现Gecko和webkit的实现方式竟然不一样,按以往的经验这两个的写法应该只是-moz和-webkit开头的区别(webkit已经更新了语法),分别来看下这个属性的两种写法: 对Gecko内核浏览器:-moz-linear-gradient([point || angle,]? stop, stop [, stop]*)对webkit内核浏览器:-webkit-gradient(type, start_point, end_point [, stop]*) 看上去有点复杂,让我们来逐个分解,先从Gecko的开始。 -moz-linear-gradientpoint是用来指定渐变起始点的,它的值和background-position的值是一样,它可以是百分比,像素值或“left”、“right”、“top”与“bottom”等。angle是用来指定渐变的角度。stop必须指定起始和结束的渐变颜色,颜色值后可以设置渐变结束位置,两者以空格隔开。 -webkit-gradienttype指定渐变类型,目前有两个值:linear和radial,本文讨论的是线性渐变,使用linear。start_point和end_point用来指定渐变起始点和终点坐标。stop用来指定渐变颜色。 请在firefox3.6+,safari4+或chrome4+运行下面的实例,才能看到效果。如果考虑到兼容性问题,在不用图片的前提下,你可以开头设置一个纯色的背景代替,这样不会太影响整体设计的美观。当然虽然IE有滤镜filter: progid:DXImageTransform.Microsoft.Gradient()可以实现,但不推荐。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Hi,丸子</title> <style type="text/css"> body{ background:#8ec1da ....

Uncategorized

html5离线存储入门

所有的浏览器都有自己的缓存机制,但那些机制并不可靠而且难以控制,在你做web开发的时候可能经常因为浏览器缓存带来的问题而烦恼不已。html5通过ApplicationCache接口解决了一些问题,并且使离线存储成为可能,离线存储使得你的web应用可以在用户离线的状况下进行访问。这个技术显然至少有三个好处: 最直接的好处就是用户可以离线访问你的web应用因为文件被缓存在本地使得web页面加载速度提升许多离线应用只加载被修改过的资源,因此大大降低了用户请求对服务器造成的负载压力 如何实现离线文件存储?你的服务器得先支持html5!是的,这句话看上去像是以前在css森林群里大家说的“我的服务器不支持div+css”一样的玩笑话。但我很严肃的告诉你,要实现离线存储的应用,你确实需要服务器的支持!容我细细道来,先来看看html5的离线文件存储应用对你的代码有什么要求,你需要在页面的html标签中通过manifest属性引用一个manifest文件来使得你的应用可缓存。简单地说,manifest文件是一个文本文件,它罗列了离线访问应用时所需缓存的文件清单(注意:引用该manifest文件的页面,不管你有没有罗列到清单中,都会被缓存),但不只是这样。代码像下面这样: XHTML 123<html manifest="test.manifest">  ...</html> 当然,这个manifest的文件路径用绝对路径和相对路径都可以,甚至可以引用其他服务器上的manifest文件。该文件所对应的mime-type应该是text/cache-manifest的,所以你需要配置服务器来发送对应的MIME类型信息,服务器配置不在讨论范围内,请自行去了解吧。接下来要看的是manifest文件的结构,它的结构很简单,我们来看下面的例子: CACHE MANIFESTindex.htmlstyle.cssimages/logo.pngscripts/mootools.js 这是最简单的一个manifest文件的样子,正如前面所提到的,文件罗列了需要被缓存的文件清单,第一行中的CACHE MANIFEST 是必须的,每个站点有5MB的空间来存储这些数据,如果manifest文件或文件里所列的文件无法加载,整个缓存更新过程将无法进行,浏览器会使用最后一次成功的缓存。前面说过manifest文件不只是罗列要缓存的文件,那么它还有其他什么作用呢?让我们来看个稍微复杂点的例子: CACHE MANIFEST# wanz app v1# 指明缓存入口CACHE:index.htmlstyle.cssimages/logo.pngscripts/main.js# 以下资源必须在线访问NETWORK:login.php# 如果index.php无法访问则用404.html代替FALLBACK:/index.php /404.html 有经验的同学一定可以看出来#是用来注释一行的,但它还有一个小作用。web应用的缓存只有在manifest文件被修改的情况下才会被更新,所以如果你只是修改了被缓存的文件,那么用户本地的缓存还是不会被更新的,但是你可以通过修改manifest文件来告诉浏览器需要更新缓存了。利用这点,你可以像上面的例子中那样,写一句这样的注释一个文件版本: # wanz app v1 这样写有三个好处: 你可以很明确的了解离线web应用的版本通过简单的修改这个版本号就可以轻易的通知浏览器更新你可以配合JavaScript程序来完成缓存更新 正如你看到的,manifest文件有三个节点,它们各自的含义如下: CACHE:这个是manifest文件的默认入口,在此入口之后罗列的文件 ....