存档

‘Web开发’ 分类的存档

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

2014年2月10日 41 条评论 38,840 人阅读    

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的授权过程。

阅读全文…

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

Javascript 装载和执行

2013年6月5日 79 条评论 38,317 人阅读    

一两个月前在淘宝内网里看到一个优化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日 66 条评论 62,126 人阅读    

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

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

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

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

浏览器工作大流程

废话少说,先来看个图:

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

阅读全文…

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

Web工程师的工具箱

2012年12月19日 26 条评论 34,474 人阅读    

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 条评论 38,222 人阅读    

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

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

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开发, 网络安全 标签: , , , ,
好烂啊有点差凑合看看还不错很精彩 (30 人打了分,平均分: 4.80 )
Loading ... Loading ...

一次Ajax查错的经历

2012年8月27日 78 条评论 24,417 人阅读    

先说故事,再说想法吧。

我有一朋友做网站,用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的确是太烂了。

阅读全文…

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

各式各样的验证码

2012年7月19日 57 条评论 31,945 人阅读    

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

完全看不清楚的

这是人类的字符吗?

图案中的字母是什么?

阅读全文…

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

Javascript 中的 var

2012年5月24日 41 条评论 13,274 人阅读    

MelonCard发布了一篇文章——”how one missing var ruined our launch“(”少写了一个var毁了我的网站”),这篇文章是说MelonCard用Node.js做后台,因为出了一个小高峰——有50-100人注册,结果整个网站都不响应了,而且还出现了很多奇怪的问题。当他们调查到问题的要源的时候,他们发现下面的代码少写了一个var。

app.all(‘/apps/:user_id/status’, function(req, res, next) {
    // …
    initial = extractVariables(req.body);
});

为什么inital少写一个var会引发这个问题呢?因为如果你不写var,这个局部的变量会被javascript当成全局变量,而这个变量又是一个函数,所以,当多用户并发的时候,这个本应该在不同用户下互不干扰的变量,成了各个用户共享的东西。试想,用户A的数据被用户B覆盖了,用户A和B的数据还没处理完,结果被新的C给搞乱了,程序的逻辑自然出现了问题。

在stackoverflow.com上有这么一个贴子说明了“有var”和“无var”的差别:

// These are both globals
var foo = 1;
bar = 2;

function test()
{
    var foo = 1; // Local
    bar = 2;     // Global

    // Execute an anonymous function
    (function()
    {
        var wibble = 1; // Local
        foo = 2; // Inherits from scope above (creating a closure)
        moo = 3; // Global
    }())
}

上面这个示例告诉我们,如果你不用var,那么这个js引擎会一层一层地向上找父作用域中的变量,如果找到了,就用,如果找不到了,就会帮你定义一个全局的变量。上面这个例子充分说明了这一点。所以,如果你想在当前的作用域用声明变量,你一定要用var。这对于一些乱写javascript代码的程序员要注意了。这里再给大家介绍一个工具——

阅读全文…

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

神奇的CSS形状

2012年3月24日 18 条评论 16,629 人阅读    

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

在StackOverflow上有这么一个问题,有位同学在http://css-tricks.com/examples/ShapesOfCSS/  找到一些使用CSS做的形状,其中一位同学对下面的这个形状充满了疑问。

形状是:

代码是:

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

这位同学就提问啦,为啥这么这么几句就能画出一个三角形呢?
于是呢,有高人出现,这个高人图文并茂的解释了这个三角的成因

阅读全文…

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

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

2012年3月19日 19 条评论 37,173 人阅读    

感谢 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 ...