無標題文檔

第三届上海 D2 随感

D2前端技术论坛(Designer & Developer Frontend Technology Forum),简称 D2。 上一届的 D2 在北京由中国雅虎承办 。这一届的 D2 在上海由 土豆网主办。总体看来,这次的 D2 给我的其他收获大于技术上的收获。

由于是土豆主办,所以此次的内容以 Flash 相关的技术偏多。上午的两场 Flash 技术议题,由于技术上的关注点不同,所以感觉没有多大的营养。但 7yue 的苹果以及他的 PPT 给我的印象还是很深刻的。

对比下午微软 超群 的有关 Explorer8 演讲,个人感觉更像是产品介绍会。超群幽默的演讲,给原严谨的会场气氛加入了点幽默的气息。耐人寻味的是,微软还再次着重介绍了 Silverlight2 的新特性,个人感觉有点针对上午的 Flash 的意思。

不过不管怎么讲,Sliverlight 与 Flash 的相互鞭策使 RIA 市场竞争激烈,这让我们有了更多的选择、这是好事。

剩下的几场有关阿里的前端开发流程以及 UED 部门组织架构的介绍。他们都表达了同样的心声,就是希望前端在开发流程乃至整个公司组织架构中,需要更多的发言权。

其中的内容还是引起了很多人的关注,在 许湛 介绍 阿里巴巴 的开发流程时,甚至作为会场的主持人也详细询问起其中的细节。

https://friable.rocks/_/2009_11_05/49056696c791.jpg

在会议间还有几个小插曲,比如坐在我旁边的一个 MM (看起来像是个秘书)看见我使用 Firebug 调试页面时,和旁边的中年男子(某公司的管理层?)说「这就是 Firebug」,让我寻味。

https://friable.rocks/_/2009_11_05/31826696c795.jpg

最后,在上海发现两件很有意思的小事情。第一就是地铁的广告牌系统竟然是 Linux 系统,很明显由于网络的原因暴露了其系统信息。

https://friable.rocks/_/2009_11_05/16648696c782.jpg

还有就是我们下榻的酒店前台电脑竟然安装了 Netscape 7.2 ,这个「上古」的浏览器让我们这帮前端好好测试了把当前各主流站点。不过在个浏览器下页面的表现情况,我们也只能祈祷「上帝保佑」了。

奇异的 arguments(翻译)

function format(string) {
  var args = arguments;
  var pattern = new RegExp("%([1-" + arguments.length + "])", "g");
  return String(string).replace(pattern, function(match, index) {
    return args[index];
  });
};

这个函数实现了模板替换,你可以在要动态替换的地方使用 %1 到 %9 标记,然后其余的参数就会依次替换这些地方。例如:

format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");

上面的脚本就会返回

"And the papers want to know whose shirt you wear" 。

在这里需要注意的是,即便在 format 函数定义中,我们仅定义了个名为 string 的参数。而 Javascript 不管函数自身定义的参数数量,它都允许我们向一个函数传递任意数量的参数,并将这些参数值保存到被调用函数的 arguments 对象中。

转换成实际数组

虽然 arguments 对象并不是真正意义上的 Javascript 数组,但是我们可以使用数组的 slice 方法将其转换成数组,类似下面的代码

var args = Array.prototype.slice.call(arguments);

这样,数组变量 args 包含了所有 arguments 对象包含的值。

创建预置参数的函数

使用 arguments 对象能够简短我们编写的 Javascript 代码量。下面有个名为 makeFunc 的函数,它根据你提供的函数名称以及其他任意数目的参数,然后返回个匿名函数。此匿名函数被调用时,合并的原先被调用的参数,并交给指定的函数运行然后返回其返回值。

function makeFunc() {
  var args = Array.prototype.slice.call(arguments);
  var func = args.shift();
  return function() {
    return func.apply(null, args.concat(Array.prototype.slice.call(arguments)));
  };
}

makeFunc 的第一个参数指定需要调用的函数名称(是的,在这个简单的例子中没有错误检查),获取以后从 args 中删除。makeFunc 返回一个匿名函数,它使用函数对象的(Function Object)apply 方法调用指定的函数。

apply 方法的第一个参数指定了作用域,基本上的作用域是被调用的函数。不过这样在这个例子中看起来会有点复杂,所以我们将其设定成 null ;其第二个参数是个数组,它指定了其调用函数的参数。makeFunc 转换其自身的 arguments 并连接匿名函数的 arguments,然后传递到被调用的函数。

有种情况就是总是要有个输出的模板是相同的,为了节省每次是使用上面提到的 format 函数并指定重复的参数,我们可以使用 makeFunc 这个工具。它将返回一个匿名函数,并自动生成已经指定模板后的内容:

var majorTom = makeFunc(format, "This is Major Tom to ground control. I'm %1.");

你可以像这样重复指定 majorTom 函数:

majorTom("stepping through the door");
majorTom("floating in a most peculiar way");

那么当每次调用 majorTom 函数时,它都会使用第一个指定的参数填写已经指定的模板。例如上述的代码返回:

"This is Major Tom to ground control. I'm stepping through the door."
"This is Major Tom to ground control. I'm floating in a most peculiar way."

自引用的函数

您可能会认为这很酷,先别急着高兴,后面还有个更大的惊喜。它(arguments)还有个其他非常有用的属性:callee 。arguments.callee 包含了当前调用函数的被引用对象。那么我们如何使用这玩意做些的事情?arguments.callee 是个非常有用的调用自身的匿名函数。

下面有个名为 repeat 的函数,它的参数需要个函数引用和两个数字。第一个数字表示运行的次数,而第二个函数定义运行的间隔时间(毫秒为单位)。下面是相关的代码:

function repeat(fn, times, delay) {
  return function() {
    if(times-- > 0) {
      fn.apply(null, arguments);
      var args = Array.prototype.slice.call(arguments);
      var self = arguments.callee;
      setTimeout(function(){self.apply(null,args)}, delay);
    }
  };
}

repeat 函数使用 arguments.callee 获得当前引用,保存到 self 变量后,返回个匿名函数重新运行原本被调用的函数。最后使用 setTimeout 以及配合个匿名函数实现延迟执行。

作为个简单的说明,比如会在通常的脚本中,编写下面的提供个字符串并弹出个警告框的简单函数:

function comms(s) {
  alert(s);
}

好了,后来我改变了我的想法。我想编写个「特殊版本」的函数,它会重复三次运行每次间隔两秒。那么使用我的 repeat 函数,就可以像这样做到:

var somethingWrong = repeat(comms, 3, 2000);
somethingWrong("Can you hear me, major tom?");

结果就犹如预期的那样,弹出了三次警告框每次延时两秒。

最后,arguments 即便不会经常被用到,甚至显得有些诡异,但是它上述的那些惊艳的功能(不仅仅是这些!)值得你去了解它。

不要轻信 PHP_SELF

开门见山,考虑下面的代码( 原文连接 有详细的解释)

<html>
    <body>
        <?php
            if (isset($_REQUEST['submitted']) && $_REQUEST['submitted'] == '1') {
                echo "Form submitted!";
            }
        ?>
        <form action="<?php echo $_SERVER['PHP_SELF']; ?>">
            <input type="hidden" name="submitted" value="1" />
            <input type="submit" value="Submit!" />
        </form>
    </body>
</html>

看似准确无误的代码,但是暗藏着危险。让我们将其保存为 foo.php ,然后放到 PHP 环境中使用

foo.php/%22%3E%3Cscript%3Ealert('xss')%3C/script%3E%3Cfoo

访问,会发现弹出个 Javascript 的 alert -- 这很明显又是个 XSS 的注入漏洞 。究其原因,发现是在

echo $_SERVER['PHP_SELF'];

这条语句上直接输出了未过滤的值。追根数源,我们看下 PHP 手册的描述

'PHP_SELF'

The filename of the currently executing script, relative to the document root. 
For instance, $_SERVER['PHP_SELF'] in a script at the address 
http://example.com/test.php/foo.bar would be /test.php/foo.bar. The __FILE__ 
constant contains the full path and filename of the current (i.e. included) file.
If PHP is running as a command-line processor this variable contains the script 
name since PHP 4.3.0. Previously it was not available. 

原因很明确了,原来是 $_SERVER['PHP_SELF'] 虽然「看起来」是服务器提供的环境
变量,但这的确和 $_POST$_GET 一样,是可以被用户更改的。

其它类似的变量有很多,比如 $_COOKIE 等(如果用户想「把玩」他们的 cookie,那我们也是没有办法)。解决方案很简单,使用 strip_tagshtmlentities 等此类函数过滤或者转义。

echo htmlentities($_SERVER['PHP_SELF']); 

-- Split --

上述的例子让我们需要时刻保持谨慎 coding 的心态。Chris Shiflett 在他的 Blog 总结的相当直白 ,防止 XSS 的两个基本的安全思想就是

Filter input
Escape output

我将上面翻译成 「_过滤输入,转义输出_」。详细的内容,可以参考他 Blog 的 这篇文章 ,此处略。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章