存档

文章标签 ‘Web’

从“黑掉Github”学Web安全开发

2014年2月10日 4 条评论 2,294 人阅读    

Egor Homakov(Twitter: @homakov 个人网站: EgorHomakov.com)是一个Web安全的布道士,他这两天把github给黑了,并给github报了5个安全方面的bug,他在他的这篇blog——《How I hacked Github again》(墙)说明了这5个安全bug以及他把github黑掉的思路。Egor的这篇文章讲得比较简单,很多地方一笔带过,所以,我在这里用我的语言给大家阐述一下黑掉Github的思路以及原文中所提到的那5个bug。希望这篇文章能让从事Web开发的同学们警惕。关于Web开发中的安全事项,大家可以看看这篇文章《Web开发中的你需要了解的东西

OAuth简介

首先,这个故事要从Github OAuth讲起。所以,我们需要先知道什么是OAuth。所谓OAuth就是说,第三方的应用可以通过你的授权而不用知道你的帐号密码能够访问你在某网站的你自己的数据或功能。像Google, Facebook, Twitter等网站都提供了OAuth服务,提供OAuth服务的网站一般都有很多开放的API,第三方应用会调用这些API来开发他们的应用以让用户拥有更多的功能,但是,当用户在使用这些第三方应用的时候,这些第三方的应用会来访问用户的帐户内的功能和数据,所以,当第三应用要干这些事的时候,我们不能让第三方应用弹出一个对话框来问用户要他的帐号密码,不然第三方的应用就把用户的密码给获取了,所以,OAuth协议会跳转到一个页面,让用户授权给这个第三方应用以某些权限,然后,这个权限授权的记录保存在Google/Facebook/Twitter上,并向第三方应用返回一个授权token,于是第三方的应用通过这个token来操作某用户帐号的功能和数据时,就畅通无阻了。下图简单地说明了Twitter的OAuth的授权过程。

阅读全文…

分类: 杂项资源 标签: , , , ,
好烂啊有点差凑合看看还不错很精彩 (6 人打了分,平均分: 5.00 )
Loading ... Loading ...

Javascript 装载和执行

2013年6月5日 75 条评论 35,506 人阅读    

一两个月前在淘宝内网里看到一个优化Javascript代码的竞赛,发现有不少的人对Javascript的执行和装载的基础并不懂,所以,从那天起我就想写一篇文章,但一直耽搁了。自上篇《浏览器渲染原理简介》,正好也可以承前启后。

首先,我想说一下Javascript的装载和执行。通常来说,浏览器对于Javascript的运行有两大特性:1)载入后马上执行,2)执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载)。于是,如果有多个js文件被引入,那么对于浏览器来说,这些js文件被被串行地载入,并依次执行。

因为javascript可能会来操作HTML文档的DOM树,所以,浏览器一般都不会像并行下载css文件并行下载js文件,因为这是js文件的特殊性造成的。所以,如果你的javascript想操作后面的DOM元素,基本上来说,浏览器都会报错说对象找不到。因为Javascript执行时,后面的HTML被阻塞住了,DOM树时还没有后面的DOM结点。所以程序也就报错了。

传统的方式

所以,当你写在代码中写下如下的代码:

<script type="text/javascript"
        src="http://coolshell.cn/asyncjs/alert.js"></script>

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (49 人打了分,平均分: 4.92 )
Loading ... Loading ...

浏览器的渲染原理简介

2013年5月22日 64 条评论 58,641 人阅读    

看到这个标题大家一定会想到这篇神文《How Browsers Work》,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文。为什么我还想写一篇呢?因为两个原因,

1)这篇文章太长了,阅读成本太大,不能一口气读完。

2)花了大力气读了这篇文章后可以了解很多,但似乎对工作没什么帮助。

所以,我准备写下这篇文章来解决上述两个问题。希望你能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西。

浏览器工作大流程

废话少说,先来看个图:

从上面这个图中,我们可以看到那么几个事:

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (43 人打了分,平均分: 4.95 )
Loading ... Loading ...

Web工程师的工具箱

2012年12月19日 26 条评论 33,685 人阅读    

Web Toolbox本文出自Ivan Zuzak 的《The Web engineer’s online toolbox》,作者给了一个各种可以用来进行开发、测试、调试以及文档编排的在线工具集。(注:我发现CSDN上已经有了这篇文章《Web工程师必备的18款工具》,但可惜的是这篇文章并不全(原文后来被更新到了33个工具),而且其中并没有包括原文评论中出现的所有工具,所以,我一并补全了更出来,一共40多个工具)

Web工程师在线工具箱

  • RequestBin允许你创建一个URL,利用这款工具进行收集请求,然后通过个性化方式进行检查。
  • HttpbinHTTP请求&响应服务,涵盖所有的HTTP方案(例如不同的HTTP verbs、状态代码和重定向)。类似工具:UrlEcho
  • REDbot这是一个机器人工具,帮助用户检查HTTP资源,可查看它的操作情况,指出常见的问题并提出改进。类似工具:HTTP lint
  • WebGun用于创建webhooks模板的API。类似工具:UrlReq
  • Webscript  自选一个url,填一段Lua代码,就能对访问做各种respond,还可以主动运行任务,cron job等等…

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (18 人打了分,平均分: 4.56 )
Loading ... Loading ...

程序员疫苗:代码注入

2012年12月10日 52 条评论 36,629 人阅读    

几个月在我的微博上说过要建一个程序员疫苗网站,希望大家一起来提交一些错误示例的代码,来帮助我们新入行的程序员,不要让我们的程序员一代又一代的再重复地犯一些错误。很多程序上错误就像人类世界的病毒一样,我们应该给我们的新入行的程序员注射一些疫苗,就像给新生儿打疫苗一样,希望程序员从入行时就对这些错误有抵抗力。

我的那个疫苗网站正在建议中(不好意思拖了很久),不过,我可以先写一些关于程序员疫苗性质的文章,也算是热热身。希望大家喜欢,先向大家介绍第一注疫苗——代码注入。

Shell注入

我们先来看一段perl的代码:

use CGI qw(:standard);
$name = param('name');
$nslookup = "/path/to/nslookup";
print header;
if (open($fh, "$nslookup $name|")) {
    while (<$fh>) {
        print escapeHTML($_);
        print "<br>\n";
    }
    close($fh);
}

如果用户输入的参数是:

coolshell.cn%20%3B%20/bin/ls%20-l

那么,这段perl的程序就成了:

阅读全文…

分类: Web开发, 网络安全 标签: , , , ,
好烂啊有点差凑合看看还不错很精彩 (29 人打了分,平均分: 4.83 )
Loading ... Loading ...

一次Ajax查错的经历

2012年8月27日 76 条评论 23,301 人阅读    

先说故事,再说想法吧。

我有一朋友做网站,用jQuery的Ajax方法从后端载入一段HTML代码然后动态插入到网页的Div元件中。这个东西太普遍了。jQuery强大的load方法可以完成这个事情。朋友的代码是这么写的:

var tab = jQuery("#dynamic_tab");
var url = "/list_ajax/";
tab.load(url);

简单到不能再简单了。在Chrome,Firefox,Safari下运行一点问题也没有,只有IE不行,不管是IE7,IE8,还是IE9。问题的症壮是,使用IE访问那个Ajax的链接,没有问题,但是在jQuery的Ajax方法返回了“undefined”的respons对象。没有任何报错!

怎么搞也搞不定,只好Google了一下——“jQuery load IE”,一看,很多人都在问这个问题。于是开始了散弹枪编程方式

排在第一的就是StackOverflow被浏览了33K次的这个问题:jQuery’s .load() not working in IE – but fine in Firefox, Chrome and Safari,答案没有被打勾(不靠谱),StackOverflow还有很多人问相似的问题,不过都没有答案。不管三七二十一,先试了一下,散弹枪嘛。试了半天都没有用。

然后上Google查,又看到有人说的IE缓存的问题,什么,要把cache设置成false,或是用下面的方法来解决:

var tab = jQuery("#dynamic_tab");
var fuckie = Math.random();
var url = "/list_ajax/"+"?fuckie="+fuckie;
tab.load(url);

反正还是一样,统统不Work,几乎所有的都试了,都不Work。搞了一天的朋友恼怒道:“Microsoft应该快点倒闭吧,产品太烂了”。IE的确是太烂了。

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (16 人打了分,平均分: 4.75 )
Loading ... Loading ...

各式各样的验证码

2012年7月19日 57 条评论 30,831 人阅读    

还记得以前那篇《超强验证码》?其实这个世界变态的验证码还有很多,下面是一个列表向像展示了各种稀奇古怪的验证码。不过本文并不单单只是收集这验证码,前面的比较恶搞,后面的会向你展示什么是有accessibility验证码。

完全看不清楚的

这是人类的字符吗?

图案中的字母是什么?

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (19 人打了分,平均分: 4.47 )
Loading ... Loading ...

CSS 布局:40个教程、技巧、例子和最佳实践

2012年3月19日 18 条评论 35,270 人阅读    

感谢 Neo 投递本文 – 微博帐号_锟_

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本经典的CSS书籍《CCS: The Missing Manual, 2nd Edition》中都可以找到,据我所知,第二版在中国没有翻译出版。你可以从这里下载英文版(不过需要注册个用户名)

正文
基于CSS的布局能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解CSS布局的基础和本质。这也是本文成文的原因 ——找到那些完美的布局,完全灵活的,等高栏和工作完美的布局。
因此下面这个列表就是我们整理了网络上关于基于CSS布局的一些技巧,教程和最佳实践的列表。
当然你也可能对下面这些和CSS相关的主题有兴趣:

The 7 CSS Hacks that we should use
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Using CSS to Fix Anything: 20+ Common Bugs and Fixes

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (13 人打了分,平均分: 4.92 )
Loading ... Loading ...

Web开发中需要了解的东西

2011年12月7日 57 条评论 79,612 人阅读    

在StackExchange上有人问了这样一个问题:What should every programmer know about web development?(关于Web开发,什么是所有程序员需要知道的?)里面给出的答案非常不错,所以,我翻译转载过来。 顺便说一下,StackExchange真是非常好,大家可以对同一个答案做贡献和修订,看看这个问题的修订过程你就知道了——专业的问答网站应该怎么去做。这就是我在这篇文章中也说过真正的用户体验是什么样的

好了,下面是正文(我对原文做了一些批注,也许不对或有误导,请大家指正)

下面的这些东西可能对于大多数人并不陌生,但是可能会有些东西你以前并没有看过,或是没有完全搞懂,甚至都没有听说过。(陈皓注:我相信当你看完这个列表后,你会觉得对于我国的Web开发有点弱了,还是那句话,表面上的东西永远是肤浅的)

接口和用户体验

  • 小心浏览器的实现标准上的不一致,确信让你的网站能够适当地跨浏览器。至少,你的网站需要测试一下下面的浏览器:

最后,你可以使用一下这个工具 来看看你的网页在不同的浏览器下是怎么被显示出来的(陈皓注:这个工具就是以前本站介绍过的在不同浏览器和平台上检查你的网站的兼容性

  • 多考虑一下人们是怎么来访问你的网站而不是那些主流的浏览器:手机,读屏软件和搜索引擎,例如:一些Accessibility的东西: WAI 和  Section508, 移动设备开发:MobiForge.
  • 部署Staging:怎么部署网站的更新而不会影响用户的访问。 Ed Lucas的答案 可以让你了解一些(陈皓注:Ed说了一些如版本控制,自动化build,备份,回滚等机制)。
  • 千万不要直接给用户显示不友好的错误信息。
好烂啊有点差凑合看看还不错很精彩 (37 人打了分,平均分: 4.86 )
Loading ... Loading ...

如何设计“找回用户帐号”功能

2011年11月28日 252 条评论 19,387 人阅读    

因为《腾讯帐号申诉的用户体验》一文中好多人觉得腾讯申诉是世界级先进的,并让我拿出一个找回用户的帐号的功能来。本来不想写的,因为大家看看其它系统的就行的,但是,很明显有些人就是很懒,也不会思考,而且不会观察,所以,我就只好写下这篇科普性常识性的文章。

在行文之前,我得先感谢腾讯公司的至少30名员工在《腾讯帐号申诉的用户体验》一文后的回帖(我STFG(Search The Fucking Google)看到了你们使用的那个固定IP在各个大学论坛上的腾讯的招聘广告),我感谢你们主要有两点:

  1. 你们有半数以上的人留下的是gmail而不是QQMail/Foxmail的电子邮件,这点让我感到很欣慰。
  2. 你们在加班到晚上11点的时候都能在本站回复,的确如你们的Andy Pan所说,你们的核心竞争力很强,包括水军方面。

好了,让我正式谈谈这个设计。找回用户帐号通常就用三个事就可以了:邮箱安全问答手机

邮箱安全问答手机

大多数的系统都会使用邮箱和安全问答,这足够了,很多系统直接用邮箱做帐号名(Apple ID,Facebook,新浪微博 ….),这样一来,就算你的系统口令被盗,帐号的是改不掉的,于是你可以用邮箱找回(注:这些系统都会验证你的邮箱是否正确)。但是,如果用邮箱做帐号,会导致你的邮箱暴露了,这样为成为垃圾邮件的受害者,而且如果你还比较2的把邮箱的口令和帐号的口令设置成一样的,那么就相当坑爹了(你可以看看本站的这篇文章——如何设计你的口令)。所以,但凡是用邮箱用为帐号的系统都不会让人看到你的注册邮箱,比如,大家就不知道我新浪微博帐号注册的邮箱,就算是知道也应该是受信的人知道(新浪微博帐号的邮箱地址的默认可见度是“你关注的人”)。

阅读全文…

好烂啊有点差凑合看看还不错很精彩 (33 人打了分,平均分: 4.48 )
Loading ... Loading ...