welefen的随笔

Monthly Archives: 二月 2012

html2json:一种新的富文本数据传输方案

IN:前端开发   标签: , , , , ,    评论: 4

在这满天由用户创造内容的时代,各个地方穿插着可以让用户输入的入口。如:写文章,写博客等。但由于用户输入的内容完全是不安全的,所以在存储和展现的时候需要对内容进行过滤,避免用户内容产生XSS和钓鱼等各种危害行为。

对于简单的textarea用户输入,过滤起来比较简单,这里不作多的描述。但对于像支持富文本这样的编辑器创造的内容,过滤就没这么简单了。我们先来看下现在的富文本内容从保存到展现是怎么处理的:

1、产品提供富文本编辑器,支持很多很多的功能。(如:文字排版,插入图片、视频,投票,链接等各种格式)

2、用户利用编辑器输入想要的内容

3、提交时获取编辑器里的HTML片段,将HTML片段提交到后端

4、后端拿到HTML片段后对HTML进行解析(一般都是通过C来实现),配置各种过滤规则,对数据进行过滤。

5、将过滤后的数据保存到数据库。

6、展现时从数据库里进行读取内容。

对于数据过滤部分,由于是通过配置规则来进行的,所以局限于我们已经知道的部分。甚至后端人员对浏览器HTML解析不太了解,导致规则并不全。这样随着漏洞的不断发现,小的漏洞可以在展现的时候及时过滤,但对于大的漏洞可能就要重做数据了,这个成本是非常大。

继续阅读 »

02-29
2012

Fl:支持模板语法的HTML词法解析

IN:Fl工具   标签: , , , ,    评论: 0

从这篇文章开始陆续介绍Fl里功能的实现方式,但更多的是开发这些功能需要注意的点。下面从支持模板语法的HTML词法解析开始。

HTML语法

我们先来看下w3c对于HTML语法的说明, 可以从http://www.w3.org/TR/html5/syntax.html了解,主要包含下面几个方面。

1、The DOCTYPE

2、Elements

3、Text

4、CDATA

5、Comments

虽然w3c对于HTML语法就几个分类,对真正处理的时候需要注意非常多的事情。

继续阅读 »

02-26
2012

Fl工具及重构

IN:Fl工具   标签: , ,    评论: 0

Fl是一款支持模版语法的前端检测、压缩等工具,该工具在D2首届技术嘉年华上给大家分享前端编译平台时提到过。由于功能和易用性的需求,准备对其进行重构。

目前重构的版本也在github上进行维护,地址为:https://github.com/welefen/Fl_new ,这个版本还是不可用状态,功能基本完成后会同步到FL下。现在想用Fl的同学可以直接使用https://github.com/welefen/Fl,该版本一直比较稳定。

重构支持的功能具体如下:

同时在重构的版本中会:

1、增加单元测试功能,case放在test对应的目录下。避免修复bug的同时引发新的问题

2、开发的过程中会对功能的实现方式以及需要注意点进行汇总,到时候会更新到博客上来,有兴趣的同学可以关注下。

整个重构预计会在5-6月完成(主要是使用工作之外的时间进行)。

02-25
2012

发布pjax1.1版,包含kissy版本

IN:前端开发   标签: ,    评论: 1

之前发布了pjax的开源项目,由于大家的需要,近期对pjax进行了重构,并修复了Firefox下的一些bug。同时包含了kissy的版本。

更新功能如下:

1、接口调用的统一

之前的版本对于jquery和qwrap的2个版本的使用方式是不一致的,这次进行了统一,并对参数也进行了规范。具体如下:

$.pjax({
     selector: 'a',
     container: '#container', //内容替换的容器
     show: 'fade', //展现的动画,支持默认和fade, 可以自定义动画方式,这里为自定义的function即可。
     cache: true, //是否使用缓存
     storage: true, //是否使用本地存储
     titleSuffix: '', //标题后缀
     filter: function(){},
     callback: function(){}
 })

各个参数的含义如下:

=== options.selector

给哪些selector绑定pjax事件,一般的为:”a”, 如果要去掉一些外连的URL, 这里的selector可以为: “a[href^='http://www.welefen.com']”

,表示域名是www.welefen.com下才有pjax事件(也就是站内)。

=== options.container

内容变换容器,是指哪个容器里的内容发生的变换,如: ‘#content’,

=== options.cache

缓存pjax的内容,对于更新不频繁的页面来说,缓存pjax内容可以减少HTTP请求数

options.cache的值是缓存时间,单位为秒,默认为: 24*3600(一天)

=== options.storage

是否使用本地存储进行内容的缓存,使用本地存储缓存的话即使关闭浏览器后,下次访问如果缓存时间有效的话会直接读取缓存的内容,避免重新请求了。

=== options.titleSuffix

标题后缀。

对于pjax显示标题,首先会从返回内容里查找,如果没有的话,会取当前a标签的title值,并可以指定统一的后缀

=== options.filter

过滤函数,虽然options.selector可以写个比较复杂的选择器,但有时候还要过滤一些URL,如:后台的URL。

这时候就可以使用options.filter函数进行过滤了。如:

{
     fitler: function(href){
        //对于wordpress后台的URL和wp-content里的URL不使用pjax
        if(href.indexOf('/wp-admin') || href.indexOf('/wp-content')){
            return true;
        }
     }
 }

对于要过滤掉的URL, 需要返回值为true。

=== options.callback

回调函数,这个函数不同于pjax.start和pjax.end(这2个事件下面描述)事件。

该函数会在每个阶段都会执行,即使pjax发生error的时候,并且会传递一个参数标明当前的状态,如:

{
    callback: function(status){
        var type = status.type;
        switch(type){
             case 'success': ;break; //正常
             case 'cache':;break; //读取缓存
             case 'error': ;break; //发生异常
             case 'hash': ;break; //只是hash变化
        }
    }
 }

2、bug的修订

1)、修复了对hash处理的bug
2)、修复了FF下回退在前进后的问题

3、代码的规范

对代码进行了重构,将不受框架影响的功能放在Util下,并且在不同的框架下,内部实现接口也保持一致。

接口进行规范后,新增一种新框架下的pjax将会非常容易,只要进行一些框架接口调用的改动即可。

4、新加了kissy版本的pjax

感谢junyi。

由于kissy核心没有引用sizzle, 只支持一些简单的selector, 所以selector参数的值最好只为a, 对于一些不使用pjax的链接,可以通过filter函数参数进行过滤。

 

代码在https://github.com/welefen/pjax上实时维护。

02-14
2012

AutoSprite:一款可以合并小图并自动修改CSS的CSS Sprites工具

IN:PHP, 前端开发   标签: , ,    评论: 0

简介

AutoSprite是一款将小图自动合并成大图片,并且可以自动修改对应CSS的css sprites工具。

相对之前的一些css sprites工具,具有以下的特点:

1、开发时在css直接写对应小图的url即可。如:background:url(小图片的地址)

2、后续如果有图片增删时,只用在对应的文件夹下增加或者删除对应的图片即可。

3、对于静态文件的缓存,开发时无需关心,工具自动进行。

使用方式

由于一个项目里可能会需要合并成多个css sprites, 所以需要知道将哪些小图片合并在一起,并且将这些小图片放在一个文件夹里。

<?php
$path = dirname(__FILE__);
 $file = '../src/AutoSprite/AutoSprite.class.php';
 function cssImgFilter($file){
 //return true;
 }
 require_once $file;
 $autoSprite = new AutoSprite();
 $autoSprite->imgPath = $path . '/img/';
 $autoSprite->outputImgFile = $path . '/output_img/a.png';
 $autoSprite->direction = 1;
 $autoSprite->margin = 10;
 $autoSprite->cssPath = $path . '/css/';
 $autoSprite->cssSavePath = $path . '/css_save/';
 $autoSprite->cssImgFilter = 'cssImgFilter';
 $autoSprite->cssReplaceImgPrefixPath = '../img/first/';
 $output = $autoSprite->generate();
?>

下载

可以从github上下载最新的代码。点击这里进入下载页面

02-10
2012
loading...