【PPT】那些年,我们一起跨过域

这个是入职腾讯第二月做的跨域分享,介绍了五种跨域方式,比较了他们之间的优缺点,希望可以解决小组内经常遇见的跨域问题。另外简单列举了另外五个跨域的方式,因为不经常用,所以也就简单的一笔带过了。

名字有点小清新,我想最后一个月的分享也是《那些年系列》:《那些年,我们一起跨过域》《那些年,我们错过的爱情(html5+css3)》,为什么是那些年呢,装清纯吧,感觉自己老了呗。

言归正传,我介绍的五种跨域方式是:

  1. document.domain
  2. location.hash
  3. window.name
  4. postMessage
  5. flash

以上五种跨域方式可能是现实工作中最常用的跨域方式,例如简单的跨域iframe自适应高度,你可以使用location.hash,跨子域可以使用document.domain,ppt每个方法都要详细的介绍,并且附上了我亲自写的demo哦~很有诚意是不(不要吐血),哈哈,好了又凑了一篇文章。另外附上昨天用css3画的企鹅:http://4.qdemo.sinaapp.com/qie.htm。ps:office 2010的ppt切换动画好炫哦

slideshare被墙,下载地址:http://4.qdemo.sinaapp.com/xdomain/naxieniankuayu.pptx


微盘下载:http://vdisk.weibo.com/s/6wt-O

将uglifyjs添加到鼠标右键菜单

之前几天根据YUICompressor和TBCompressor整合到鼠标右键菜单自己将uglifyjs也添加到了右键菜单,下面简单记录下过程。效果如下

uglifyjs添加到鼠标右键菜单

配置windows nodepath环境

鼠标右键我的电脑,选择属性→高级属性管理→高级选项卡→环境变量,添加新的环境变量,名字为NODE_PATH,变量值为nodejs的安装路径,例如下面

C:\Program Files\nodejs

然后保存退出

安装uglifyjs

在命令行安装uglifyjs,

npm install uglify-js -g

安装uglifyjs到鼠标右键菜单

找到第二步安装的uglifyjs的路径下的bin文件夹,例如我的安装在:

C:\Program Files\nodejs\node_modules\npm\node_modules\uglify-js\bin

然后下载uglifyjs的安装文件解压到这个文件夹

uglifyjs到鼠标右键菜单安装文件

  • 双击运行install.cmd就可以安装了。
  • 卸载运行uninstall.cmd就可以卸载。

主要的代码还是根据YUICompressor的安装文件改的,压缩的时候首先将源文件copy为dev作为备份,然后压缩替换原文件。例如a.js,压缩后变成a.dev.js原文件和压缩后的js文件。美化则是将美化后的代码存到bea.js,即a.js美化后为a.bea.js

pngfix.js可能导致xss攻击

今天看了国外大佬Spanner的一篇关于pngfix的文章,已经到下班时间,就简单说说pngfix的xss攻击。

pngfix.js

pngfix.js是IE6中解决png不透明的js方案,原理其实就是遍历了页面的img,然后使用滤镜来解决。

pngfix导致xss

pngfix.js使用了如下的代码:

var imgID = (img.id) ? "id='" + img.id + "' " : "";

img.outerHTML = strNewHTML

如果使用如下的代码就会出现xss:

<img src=1.png id="'&gt;&lt;img src=1 onerror=alert(/png_fixed!/)&gt;">

详细原文地址:http://www.thespanner.co.uk/2012/06/12/pngfix/

IE中iframe和document.selection.createRange导致跨域

帮忙在活动中找bug,两层iframe,经过调试发现是document.selection.createRange导致的错误,在浏览器中报“拒绝访问”,猜测是跨域导致的。于是加上document.domain主域就搞定了。

本来以为是两层iframe导致的(因为他们反映一层iframe没有问题),于是自己建了个demo,test.qq.com/qq1.html代码如下:

<iframe src="http://demos.qq.com/qq2.html" frameborder="0" id="myIframe"></iframe>

demos.qq.com/qq2.html代码如下:

<script type="text/javascript">
    //document.domain = 'qq.com';
    var a = document.selection.createRange();
</script>

这样在IE9中访问test.qq.com/qq1.html就会报错,而把qq2.htmlqq1.html都添加document.domain='qq.com';就可以了。暂时原因不明了,记录在此备份下,懂得朋友可以来说道说道

踩了apache配置虚拟主机的坑

一直使用xampp做apache服务器,可是新版的xampp添加了虚拟主机就访问127.0.0.1也跳转到了虚拟主机去了,比如:我添加了www.demo.com,路径是e:\www\demo,而我的添加完之后,访问127.0.0.1竟然也是跑到了www.demo.com下面去。

上网找了好多资料说是添加localhost的,于是在httpd.conf最后添加如下配置:

<VirtualHost *>
    DocumentRoot E:\www
    ServerName 127.0.0.1
#    ErrorLog logs/default-error_log
</VirtualHost>

<Directory "E:\www">
    Options Indexes FollowSymLinks Multiviews
    AllowOverride All
    Order Allow,Deny
    Allow from all
</Directory>

发现还是不行,继续查找,期间安装了PHPnow,也是类似的情况,后来无意中看到了NameVirtualHost这个配置,于是写成了:

NameVirtualHost *

重启apache竟然可以了,坑爹啊,记录下,防止下次踩坑!

过滤XSS(跨站脚本攻击)的函数和防止svn版本库被浏览

别处看到的php去除xss的函数,自己备份下,以备不时之需。

php过滤xss函数

<?php
/**
* @过滤XSS(跨站脚本攻击)的函数
* @par $val 字符串参数,可能包含恶意的脚本代码如
* <script language="javascript">alert("hello world");</script>
* @return  处理后的字符串
* @Recoded By Androidyue
**/
function RemoveXSS($val) {
   // remove all non-printable characters. CR(0a) and LF(0b)
   // and TAB(9) are allowed
   // this prevents some character re-spacing such as <java\0script>
   // note that you have to handle splits with \n, \r,
   // and \t later since they *are* allowed in some inputs
   $val = preg_replace('/([\x00-\x08,\x0b-\x0c,\x0e-\x19])/', '', $val);

   // straight replacements, the user should never need these
   // since they're normal characters
   // this prevents like ![](@avascript:alert()
   $search = 'abcdefghijklmnopqrstuvwxyz';
   $search .= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
   $search .= '1234567890!@#$%^&*()';
   $search .= '~`";:?+/={}[]-_|\'\\';
   for ($i = 0; $i < strlen($search); $i++) {
      // ;? matches the ;, which is optional
      // 0{0,7} matches any padded zeros, which are optional and go up to 8 chars

      // @ @ search for the hex values
      $val = preg_replace('/(&#[xX]0{0,8}'.dechex(ord($search[$i])).';?)/i', $search[$i], $val); // with a ;
      // @ @ 0{0,7} matches '0' zero to seven times
      $val = preg_replace('/(&#0{0,8}'.ord($search[$i]).';?)/', $search[$i], $val); // with a ;
   }

   // now the only remaining whitespace attacks are \t, \n, and \r
   $ra1 = Array('javascript', 'vbscript', 'expression', 'applet', 'meta', 'xml', 'blink', 'link', 'style', 'script', 'embed', 'object', 'iframe', 'frame', 'frameset', 'ilayer', 'layer', 'bgsound', 'title', 'base');
   $ra2 = Array('onabort', 'onactivate', 'onafterprint', 'onafterupdate', 'onbeforeactivate', 'onbeforecopy', 'onbeforecut', 'onbeforedeactivate', 'onbeforeeditfocus', 'onbeforepaste', 'onbeforeprint', 'onbeforeunload', 'onbeforeupdate', 'onblur', 'onbounce', 'oncellchange', 'onchange', 'onclick', 'oncontextmenu', 'oncontrolselect', 'oncopy', 'oncut', 'ondataavailable', 'ondatasetchanged', 'ondatasetcomplete', 'ondblclick', 'ondeactivate', 'ondrag', 'ondragend', 'ondragenter', 'ondragleave', 'ondragover', 'ondragstart', 'ondrop', 'onerror', 'onerrorupdate', 'onfilterchange', 'onfinish', 'onfocus', 'onfocusin', 'onfocusout', 'onhelp', 'onkeydown', 'onkeypress', 'onkeyup', 'onlayoutcomplete', 'onload', 'onlosecapture', 'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel', 'onmove', 'onmoveend', 'onmovestart', 'onpaste', 'onpropertychange', 'onreadystatechange', 'onreset', 'onresize', 'onresizeend', 'onresizestart', 'onrowenter', 'onrowexit', 'onrowsdelete', 'onrowsinserted', 'onscroll', 'onselect', 'onselectionchange', 'onselectstart', 'onstart', 'onstop', 'onsubmit', 'onunload');
   $ra = array_merge($ra1, $ra2);

   $found = true; // keep replacing as long as the previous round replaced something
   while ($found == true) {
      $val_before = $val;
      for ($i = 0; $i < sizeof($ra); $i++) {
         $pattern = '/';
         for ($j = 0; $j < strlen($ra[$i]); $j++) {
            if ($j > 0) {
               $pattern .= '(';
               $pattern .= '(&#[xX]0{0,8}([9ab]);)';
               $pattern .= '|';
               $pattern .= '|(&#0{0,8}([9|10|13]);)';
               $pattern .= ')*';
            }
            $pattern .= $ra[$i][$j];
         }
         $pattern .= '/i';
         $replacement = substr($ra[$i], 0, 2).'<x>'.substr($ra[$i], 2);
         // add in <> to nerf the tag
         $val = preg_replace($pattern, $replacement, $val);
         // filter out the hex tags
         if ($val_before == $val) {
            // no replacements were made, so exit the loop
            $found = false;
         }
      }
   }
   return $val;
}
//测试一下效果
//echo RemoveXSS("<script language='javascript'>alert('hello world');</script>") ;
?>

IE动态创建带name的iframe跳转问题

在一些前端项目中可能要用到动态创建iframe的需求,例如无刷新ajax上传文件。但是在IE下创建带有name的iframe会有个bug,创建的代码如下:

var iframe = document.createElement('iframe');
iframe.name = 'test';

上面的这段javascript代码在IE下赋不了name属性!!!即iframe.name = 'test';这段代码未执行。

在IE中我们可以使用下面的代码来动态创建带有name的iframe:

var iframe = document.createElement('<iframe name="test">');

但是上面的代码在非IE浏览器下却报错,这时候我们可以使用判断IE,如果是ie则使用第二段方法动态创建iframe,或者我们可以捕获异常,如下面的代码:

nodePPT — nodejs做的手机端控制PC端的PPT演示文档javascript框架

nodePPT使用nodejs写的,可以手机端控制pc端的演示文档框架。nodePPT是在webSlide基础上二次开发的,使用nodejs做服务器,通过websocket来实现手机端和PC的通信,主要功能是手机端可以控制pc端PPT播放进度,并且手机端可以给每张PPT做备注。

第一次做个程序的nodejs作品,并且测试时间比较短,肯定会有很多问题和bug,希望大家一起斧正。另外页面样式css高手可以自己写,包括动画自定义都可以在css文件中直接修改添加。

说明

因为是PPT演示文档,所以需要投影仪分辨率,所以演示页面的最佳分辨率为全屏模式下的 1024*768 ,如果在自己电脑上查看,可以通过 ctrl + -ctrl + + 缩放到合适的比例查看效果。

建议浏览器chrome 16+,全屏模式(F11),以达到最佳动画效果。在Firefox下会出现拖尾现象,个人认为是Firefox 8下对CSS3动画效果渲染太慢导致,其他浏览器未测试。
nodePPT iphone手机端截图

使用说明

  1. 配置route.json
  2. 配置ppt的文件
  3. 启动node:node server.js
  4. PC访问:如127.0.0.1:3000/demo.ppt
  5. 手机端访问:127.0.0.1:3000/ctrl
  6. 手机端setup,选择控制用户后,开始控制

具体使用方法启动node server.js之后访问127.0.0.1:3000/index.ppt,里面有详细的介绍

快捷键

  • 空格/→/↓/Tab/pageDown:下一页
  • ←/↑/pageUp:上一页
  • P:开画板
  • C:清除画板

版本库地址

addEventListener第二个参数的handleEvent

昨天无意中看到一篇老外的文章,文章提到了addEventListener第二个参数可以传入object,并且对象中handleEvent为事件处理函数。例如下面的javascript代码:

var obj = {
    handleEvent: function() {
        alert('body clicked');
    }
};
document.body.addEventListener('click',obj,false);

测试发现这段代码在IE9+,chrome,FF,opera等浏览器是正确的(测试范围可能不够宽),而且可以成功的绑定click事件。在Qwrap群里一问才知道是DOM2中接口,很有意思的一个发现,@貘大大 也发微博说自己先入为主了,我相信很多人跟@貘大大 一样都先入为主了。

addEventListener的handleEvent应用

发现了这个“新大陆”有什么用法呢?哈哈~首先想到的是对象引用。

看下面的javascript代码:

<script type="text/javascript">
var obj = {
handleEvent: function() {
    alert('body clicked');
}
};
document.body.addEventListener('click',obj,false);
function fn2(){
    obj.handleEvent = function(){
        alert('fn2');
    };
}
</script>
<button onclick="fn2();">change</button>

因为对象的引用关系,点击下button就可以切换绑定事件的处理函数,而不需要remove之前的事件,然后重新绑定一个新的处理函数。

windows搭建memcached环境

最近练手php,一个地方需要缓存来支持,想来想去还是用memcached做缓存,可是电脑是windows系统,如果是linux系统安装memcached就比较容易,敲入几行shell就搞定,windows下还没搞过,于是记录下过程,备用。

Windows下的Memcache安装

1、下载memcache for windows。下载地址:http://jehiah.cz/projects/memcached-win32,推荐下载binaries版本,解压(本例中解压到c:\memcached)。

2、在命令行状态下输入:

c:\memcached\memcached.exe -d install

至此memcached已经安装成windows服务

3、在命令行下输入:

c:\memcached\memcached.exe -d start

以启动memcached服务。当然也可以选择在windows服务中启动

你没看错,就是这么简单,简简单单的三步memcache的服务器端就准备完毕

php安装Memcached模块支持

1、下载php_memcache.dll模块,你可以从http://downloads.php.net/pierre/找到对应的版本,
php5.3的直接下载http://shikii.net/blog/downloads/php_memcache-cvs-20090703-5.3-VC6-x86.zip

2、修改php.ini,添加如下内容:

extension=php_memcache.dll

3、重启apache服务器,然后查看一下phpinfo,如果有memcache,那么就说明安装成功!

测试windows下的Memcached

测试代码如下:

<?php
$mem = new Memcache;
$mem->connect("127.0.0.1", 11211);
$mem->set('key', 'Hello Memcached!', 0, 60);
$val = $mem->get('key');
echo $val;

更多测试代码,需要移步:
http://www.php.net/manual/en/memcache.examples-overview.php

Memcached的基本设置