润物无声 » Web设计

迁移博客图片资源从SAE到七牛

润物无声 — Wed, 21 May 2014 01:57:02 +0000

博客的很多图片资料存放在 SAE 上面，鉴于七牛的静态资源存储不错，计划迁移到七牛云存储上面，进而方便统一管理。
【下载 SAE Storage 中的资料】

所需工具：Cyberduck
配置

服务器： auth.sinas3.com
端口：443
用户名：应用AccessKey
密码：应用SecretKey

【上传到七牛】

所需工具：qiniu-devtools-windows_386 [qrsync.exe]
配置, 新建 conf.json 文件

access_key：应用AccessKey
secret_key：应用SecretKey
bucket：bucket 名称
sync_dir：本地同步文件夹

执行 qrsync.exe conf.json 即可

【外链切换】

原外链地址：

http://carey-wordpress.stor.sinaapp.com/uploads/2011/06/The-Moon-150x150.jpg

新外链地址：

http://carey.u.qiniudn.com/uploads/2011/06/The-Moon-150x150.jpg

【数据库相关】
1. 查询包含外链的相关文章
SELECT * FROM `wp_posts` WHERE post_content LIKE '%http://carey-wordpress.stor.sinaapp.com/%'

2. 指定文章替换
UPDATE wp_posts SET post_content = replace(post_content, 'http://carey-wordpress.stor.sinaapp.com/', 'http://carey.u.qiniudn.com/') WHERE ID=24

3. 全局替换
UPDATE wp_posts SET post_content = replace(post_content, 'http://carey-wordpress.stor.sinaapp.com/', 'http://carey.u.qiniudn.com/')

【资料相关】

SAE 地址：http://sae.sina.com.cn/
SAE SVN 地址：https://svn.sinaapp.com/carey
七牛官方：https://portal.qiniu.com/

迁移博客图片资源从SAE到七牛，首发于润物无声。

JavaScript之变量和函数提升

润物无声 — Fri, 06 Sep 2013 23:54:32 +0000

JS代码有一个特殊的规则，那就是hoisted提升规则，函数的调用可以放在函数实现的前面，但是仅限于函数是以非表达式的场合声明实现的，那么变量的提升又有什么不同呢，在开发过程中还会出现哪些经常犯的错误，本文对此进行了介绍。

One of the trickier aspects of JavaScript for new JavaScript developers is the fact that variables and functions are "hoisted." Rather than being available after their declaration, they might actually be available beforehand. How does that work? Let's take a look at variable hoisting first.

// ReferenceError: noSuchVariable is not defined
console.log(noSuchVariable);

This is more or less what one would expect. An error is thrown when you try to access the value of a variable that doesn't exist. But what about this case?

// Outputs: undefined
console.log(declaredLater);

var declaredLater = "Now it's defined!";

// Outputs: "Now it's defined!"
console.log(declaredLater);

What is going on here? It turns out that JavaScript treats variables which will be declared later on in a function differently than variables that are not declared at all. Basically, the JavaScript interpreter "looks ahead" to find all the variable declarations and "hoists" them to the top of the function. Which means that the example above is equivalent to this:

var declaredLater;

// Outputs: undefined
console.log(declaredLater);

declaredLater = "Now it's defined!";

// Outputs: "Now it's defined!"
console.log(declaredLater);

One case where this is particularly likely to bite new JavaScript developers is when reusing variable names between an inner and outer scope. For example:

var name = "Baggins";

(function () {
    // Outputs: "Original name was undefined"
    console.log("Original name was " + name);

    var name = "Underhill";

    // Outputs: "New name is Underhill"
    console.log("New name is " + name);
})();

In cases like this, the developer probably expected name to retain its value from the outer scope until the point that name was declared in the inner scope. But due to hoisting, name is undefinedinstead.

Because of this behavior JavaScript linters and style guides often recommend putting all variable declarations at the top of the function so that you won't be caught by surprise.

So that covers variable hoisting, but what about function hoisting? Despite both being called "hoisting," the behavior is actually quite different. Unlike variables, a function declaration doesn't just hoist the function's name. It also hoists the actual function definition.

// Outputs: "Yes!"
isItHoisted();

function isItHoisted() {
    console.log("Yes!");
}

As you can see, the JavaScript interpreter allows you to use the function before the point at which it was declared in the source code. This is useful because it allows you to express your high-level logic at the beginning of your source code rather than the end, communicating your intentions more clearly.

travelToMountDoom();
destroyTheRing();

function travelToMountDoom() { /* Traveling */ }
function destroyTheRing() { /* Destruction */ }

However, function definition hoisting only occurs for function declarations, not function expressions. For example:

// Outputs: "Definition hoisted!"
definitionHoisted();

// TypeError: undefined is not a function
definitionNotHoisted();

function definitionHoisted() {
    console.log("Definition hoisted!");
}

var definitionNotHoisted = function () {
    console.log("Definition not hoisted!");
};

Here we see the interaction of two different types of hoisting. Our variable definitionNotHoistedhas its declaration hoisted (thus it is undefined), but not its function definition (thus theTypeError.)

You might be wondering what happens if you use a named function expression.

// ReferenceError: funcName is not defined
funcName();

// TypeError: undefined is not a function
varName();

var varName = function funcName() {
    console.log("Definition not hoisted!");
};

As you can see, the function's name doesn't get hoisted if it is part of a function expression.

And that is how variable and function hoisting works in JavaScript.

引用：http://designpepper.com/blog/drips/variable-and-function-hoisting

JavaScript之变量和函数提升，首发于润物无声。

解读JavaScript的Scope和Context

润物无声 — Sat, 31 Aug 2013 01:47:22 +0000

本文详细解读了Javascript语言中的作用域Scope和上下文Context。JS是一种特殊的解释型语言，尤其是闭包的概念，使得JS更灵活，还有事件的绑定bind，this指针的用法等，相信本文有所帮助。

JavaScript’s implementation of scope and context is a unique feature of the language, in part because it is so flexible. Functions can be adopted for various contexts and scope can be encapsulated and preserved. These concepts are behind some of the most powerful design patterns JavaScript has to offer. However, this is also a tremendous source of confusion amongst developers, and for good reason. The following is a comprehensive explanation of scope and context in JavaScript, the difference between them, and how various design patterns make use of them.

Context vs. Scope

The first important thing to clear up is that context and scope are not the same. I have noticed many developers over the years often confuse the two terms, incorrectly describing one for the other. To be fair, the terminology has become quite muddled over the years.

Every function invocation has both a scope and a context associated with it. Fundamentally, scope is function-based while context is object-based. In other words, scope pertains to the variable access of a function when it is invoked and is unique to each invocation. Context is always the value of the this keyword, which is a reference to the object that “owns” the currently executing code.

Variable Scope(变量作用域)

A variable can be defined in either local or global scope, which establishes the variables’ accessibility from different scopes during runtime. Any defined global variable, meaning any variable declared outside of a function body, will live throughout runtime and can be accessed and altered in any scope. Local variables exist only within the function body of which they are defined and will have a different scope for every call of that function. There it is subject for value assignment, retrieval, and manipulation only within that call and is not accessible outside of that scope.

JavaScript presently does not support block scope which is the ability to define a variable to the scope of an if statement, switch statement, for loop, or while loop. This means the variable will not be accessible outside the opening and closing curly braces of the block. Currently any variables defined inside a block are accessible outside the block. However, this is soon to change, the let keyword has officially been added to the ES6 specification. It can be used as an alternative to the var keyword in order to support the declaration of block scope local variables.

What is “this” Context（this指针上下文）

Context is most often determined by how a function is invoked. When a function is called as a method of an object, this is set to the object the method is called on:

var object = {
    foo: function(){
        alert(this === object); 
    }
};

object.foo(); // true

The same principle applies when invoking a function with the new operator to create an instance of an object. When invoked in this manner, the value of this within the scope of the function will be set to the newly created instance:

function foo(){
    alert(this);
}

foo() // window
new foo() // foo

When called as an unbound function, this will default to the global context or window object in the browser. However, if the function is executed in strict mode, the context will default to undefined.

Execution Context and Scope Chain（运行时上下文和作用域链）

JavaScript is a single threaded language, meaning only one thing can be done at a time in the browser. When the JavaScript interpreter initially executes code, it first enters into a global execution context by default. Each invocation of a function from this point on will result in the creation of a new execution context.

This is where confusion often sets in, the term “execution context” is actually for all intents and purposes referring to scope and not context as previously discussed. It is an unfortunate naming convention, however it is the terminology as defined by the ECMAScript specification, so were kinda stuck with it.

Each time a new execution context is created, it is appended to the top of what is called a scope chain, sometimes referred to as an execution or call stack. The browser will always execute the current execution context that is atop the scope chain. Once completed, it will be removed from the top of the stack and control will return to the execution context below. For example:

function first(){
    second();
    function second(){
        third();
        function third(){
            fourth();
            function fourth(){
                // do something
            }
        }
    }   
}
first();

Running the preceeding code will result in the nested functions being executed all the way down to the fourth function. At this point the scope chain would be, from top to bottom: fourth, third, second, first, global. The fourth function would have access to global variables and any variables defined within the first, second and third functions as well as the functions themselves. Once the fourth function has completed execution, it will be removed from the scope chain and execution will return to the third function. This process continues until all code has completed executing.

Name conflicts amongst variables between different execution contexts are resolved by climbing up the scope chain, moving locally to globally. This means that local variables with the same name as variables higher up the scope chain take precedence.

An execution context can be divided into a creation and an execution phase. In the creation phase, the interpreter will first create a variable object (also called an activation object) that is composed of all the variables, function declarations and arguments defined inside the execution context. From there the scope chain is initialized next and the value of this is determined last. Then in the execution phase, code is interpreted and executed.

To put it simply, each time you attempt to access a variable within a function’s execution context, the look-up process will always begin with its own variable object. If the variable is not found in the variable object, the search continues into the scope chain. It will climb up the scope chain examining the variable object of every execution context looking for a match to the variable name.

Closures（闭包）

A closure is formed when a nested function is made accessible outside of the function in which it was defined, so that it may be executed after the outer function has returned. It maintains access to the local variables, arguments, and inner function declarations of its outer function. Encapsulation allows us to hide and preserve the execution context from outside scopes while exposing a public interface and thus is subject to further manipulation. A simple example of this looks like the following:

function foo(){
    var local = 'private variable';
    return function bar(){
        return local;
    }
}

var getLocalVariable = foo();
getLocalVariable() // private variable

One of the most popular types of closures is what is widely known as the module pattern. It allows you to emulate public, private and privileged members:

var Module = (function(){
    var privateProperty = 'foo';

    function privateMethod(args){
        //do something
    }

    return {

        publicProperty: "",

        publicMethod: function(args){
            //do something
        },

        privilegedMethod: function(args){
            privateMethod(args);
        }
    }
})();

The module acts as if it were a singleton, executed as soon as the compiler interprets it, hence the opening and closing parenthesis at the end of the function. The only available members outside of the execution context of the closure are your public methods and properties located in the return object (Module.publicMethod for example). However, all private properties and methods will live throughout the life of the application as the execution context is preserved, meaning variables are subject to further interaction via the public methods.

Another type of closure is what is called an immediately-invoked function expression (IIFE) which is nothing more than a self-invoked anonymous function executed in the context of the window:

function(window){

    var a = 'foo', b = 'bar';

    function private(){
        // do something
    }

    window.Module = {

        public: function(){
            // do something 
        }
    };

})(this);

This expression is most useful when attempting to preserve the global namespace as any variables declared within the function body will be local to the closure but will still live throughout runtime. This is a popular means of encapsulating source code for applications and frameworks, typically exposing a single global interface to interact with.

Call and Apply（函数调用）

These two simple methods, inherent to all functions, allow you to execute any function in any desired context. The call function requires the arguments to be listed explicitly while the apply function allows you to provide the arguments as an array:

function user(first, last, age){
    // do something 
}
user.call(window, 'John', 'Doe', 30);
user.apply(window, ['John', 'Doe', 30]);

The result of both calls is exactly the same, the user function is invoked in the context of the window and provided the same three arguments.

ECMAScript 5 (ES5) introduced the Function.prototype.bind method that is used for manipulating context. It returns a new function that is permanently bound to the first argument of bind regardless of how the function is being used. It works by using a closure that is responsible for redirecting the call in the appropriate context. See the following polyfill for unsupported browsers:

if(!('bind' in Function.prototype)){
    Function.prototype.bind = function(){
        var fn = this, context = arguments[0], args = Array.prototype.slice.call(arguments, 1);
        return function(){
            return fn.apply(context, args);
        }
    }
}

It is commonly used where context is frequently lost: object-orientation and event handling. This is necessary because the addEventListener method of a node will always execute the callback in the context of the node the event handler is bound to, which is the way it should be. However if your employing advanced object-oriented techniques and require your callback to be a method of an instance, you will be required to manually adjust the context. This is where bind comes in handy:

function MyClass(){
    this.element = document.createElement('div');
    this.element.addEventListener('click', this.onClick.bind(this), false);
}

MyClass.prototype.onClick = function(e){
    // do something
};

While reviewing the source of the bind function, you may have also noticed what appears to be a relatively simple line of code involving a method of an Array:

Array.prototype.slice.call(arguments, 1);

What is interesting to note here is that the arguments object is not actually an array at all, however it is often described as an array-like object much like a nodelist (anything returned by document.getElementsByTagName()). They contain a length property and indexed values but they are still not arrays, and subsequently don’t support any of the native methods of arrays such as slice and push. However, because of their similar behavior, the methods of Array can be adopted or hijacked, if you will, and executed in the context of an array-like object, as in the case above.

This technique of adopting another object’s methods also applies to object-orientation when emulating classical inheritance in JavaScript:

MyClass.prototype.init = function(){
    // call the superclass init method in the context of the "MyClass" instance
    MySuperClass.prototype.init.apply(this, arguments);
}

By invoking the method of the superclass (MySuperClass) in the context of an instance of a subclass (MyClass), we can mimic this powerful design pattern.

Conclusion

It is important to understand these concepts before you begin to approach advanced design patterns, as scope and context play a significant and fundamental role in modern JavaScript. Whether were talking about closures, object-orientation and inheritance, or various native implementations, context and scope play an important role in all of them. If your goal is to master the JavaScript language and better understand all it encompasses, then scope and context should be one of your starting points.

参考文章：http://flippinawesome.org/2013/08/26/understanding-scope-and-context-in-javascript/

解读JavaScript的Scope和Context，首发于润物无声。

网站SEO优化之CSS JS代码合并

润物无声 — Fri, 30 Aug 2013 03:34:48 +0000

在优化网站的过程中，其中一个规则就是尽量减少HTTP的请求数量，比如图片的合并，JS，CSS代码的合并等，本文介绍了一款PHP的自动合并脚本，可以在网站中使用，只要将原来需要引用JS和CSS的地方，换成该脚本的函数调用，那么脚本就会自动将过个请求合并成一个请求，重而提高网站的打开速度。

Combining Assets

One of the basic tenets of making a web-page load quickly is reducing the number of HTTP requests that your page makes. One very common way of doing this, is assuring that all of your CSS files are combined into one request (ideally in the tag), and all of your javscript files are combined into one request (ideally at the bottom of the tag).

The Solution

I’ve worked with several large sites which each had their own solutions, but recently I found myself needing to speed up a fairly simple site: Burndown for Trello.

To make things simple (and so that I’d never have to write this again), I made a StaticResourcessystem which will allow me to put just one PHP script into the root directory of the site, and use a few simple calls to add files to the header or footer of the page. The script requires no setup, installation, or configuration to run correctly. However, it has some optional advanced settings (which we’ll discuss at the end).

Usage

Usage is very simple. Just make a call to add files to the system, so that they’re included in the header or footer. Both local and external files are added with the same kind of call.
StaticResources - how to add files
PHP

StaticResources::addHeaderFile("css/GoogleWebfont_Tauri_Latin.css");
StaticResources::addFooterFile("jquery-ui.js");
StaticResources::addFooterFile("http://code.jquery.com/ui/1.9.1/jquery-ui.js");

After you’ve added the files, make sure that somewhere in your code you print the HTML which will contain all of the files that were added
StaticResources - printing the script and style tags
PHP

// put this at the bottom of the HEAD tag
print StaticResources::getHeaderHtml();

// put this at the bottom of the BODY tag
print StaticResources::getFooterHtml();

Here’s an example file of how you’d include a bunch of JS / CSS using this StaticResources system. It obviously won’t work if you don’t create JS/CSS files in the locations referenced, but this is very simple code to show the system in action.

StaticResources - EXAMPLE USAGE PAGE
PHP



    
        
        StaticResources example page
        
    
    
        
            Created for Burndown for Trello.
        

        
            StaticResources example page
            This page is an example of loading static resources in combined files.
        

        
            © 2013 - Sean Colombo

The Code

Without further delay, this is the code of static.php that you should put in the main (eg: public_html) directory of your app.
static.php - THE ACTUAL CODE
PHP

 TAG.
*        print StaticResources::getHeaderHtml();
*
* To output the footer files - YOU MUST ADD THIS CALL. PUT IT RIGHT BEFORE THE END OF THE  TAG.
*        print StaticResources::getFooterHtml();
*
* To add files to the HEAD tag or to the bottom of the page:
*        StaticResources::addHeaderFile("css/GoogleWebfont_Tauri_Latin.css");
*        StaticResources::addFooterFile("jquery-ui.js");
*        StaticResources::addFooterFile("http://code.jquery.com/ui/1.9.1/jquery-ui.js");
*
* To add a file which doesn't have an extension (eg: ".js") at the end.
*        StaticResources::addFooterFile("https://www.google.com/jsapi", "js");
*
* Optional: to specify that this file should be served from a different URL (eg: a Content Delivery Network).
* Put this right below where you include() this static.php file:
*        StaticResources::setRootUrl("http://cdn.example.com/"); // use a trailing slash
*
*
*
* TODO: Add minification
* TODO: LATER: Add options to allow the files to use HTML5 async and deferred attributes.
*/

/**
* For security reasons, we limit the types of files that can be outputted.
* If this wasn't here, someone could request each of your .php files and read all of
* your source-code (and password files, etc.), so please only change this if you understand
* the implications.
*
* NOTE: See STATICRESOURCES_ALLOWED_FILE_TYPES below for the actual array.
*/

// Need to define this way (serialized and inside of define()) because arrays can't be class-constants.
define("STATICRESOURCES_ALLOWED_FILE_TYPES", serialize( array( "js", "css" ))); // all types must be lowercase!

// Character(s) used in the URL to separate file names. This should be a character that's not
// allowed in filenames, otherwise a real file could be split into two filenames.
// For example: "bob-vila.txt" would be interpreted as "bob" and "vila.txt" if the delimiter was "-".
// There is no perfect result for this (since different characters are allowed on different operating systems).
define("STATICRESOURCES_FILE_DELIMITER", "||");

// If this script is being run as the page (rather than just included) then serve up the files
// being requested.
if( $_SERVER['SCRIPT_FILENAME'] == __FILE__ ){
    $files = (isset($_GET['files']) ? $_GET['files'] : "");
    $files = explode(STATICRESOURCES_FILE_DELIMITER, $files); // turn it into an array.

    if(count($files) == 0){
        print "/* NOTE: No files found in the URL.\n";
        print "Please specify the file names in the 'file' parameter, separated by \"".STATICRESOURCES_FILE_DELIMITER."\"\n";
        print "See ".basename(__FILE__)." for documentation on how to use this system.\n";
        print "*/\n";
    } else {
        $fileType = ""; // don't know the fileType until we examine the file names.

        foreach($files as $fileName){
            $fileName = StaticResources::sanitizeFileName($fileName);

            $ext = StaticResources::getFileExtension($fileName);
            if( (!empty($fileType)) && ($ext != $fileType) ){
                // Warn the user that they're mixing file-types.
                print "\n\n/* ===== WARNING: \"$fileName\" is of wrong file type. ";
                print "It is a '$ext' file, but this is a '$fileType' file. Skipped. ===== */\n\n\n\n";

                // Don't output this file since it's the wrong type. Skip to next file.
                continue;
            } else {
                // If fileType is still empty, this is the first file encountered.  Set correct headers.
                if(empty($fileType)){
                    $fileType = $ext;

                    // Set the content-type headers
                    $allowMimeSniffing = false; // usually, listen to our Content-types instead of sniffing Mime-type. Only exception is when we don't set a Content-type.
                    if($fileType == "css"){
                        header("Content-type: text/css");
                    } else if($fileType == "js"){
                        header("Content-type: application/javascript");
                    } else {
                        $allowMimeSniffing = true;
                        print "/* WARNING: Don't know what Content-type header to set for files with extension: '$fileType' */\n";
                    }
                    if(!$allowMimeSniffing){
                        // Disables IE mime-type sniffing so it always listens to Content-type.
                        header("X-Content-Type-Options: nosniff");
                    }

                    // Set reasonable caching headers.
                    // LATER: Could add a configuration array for tweaking the expiration by file-type. This is a reasonable default though.
                    $SECONDS_IN_MONTH = 60*60*24*30;
                    header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + $SECONDS_IN_MONTH)); // needs to be after session_start if session_start is used.
                }
            }

            // If there is a query-string, chop that off before looking for the file.
            if(strpos($fileName, "?") !== false){
                $fileName = substr($fileName, 0, strpos($fileName, "?"));
            }

            // Read, preprocess (eg: minify), and print the file contents.
            print "/* File: \"$fileName\" */\n";
            @$content = file_get_contents($fileName);
            if($content === false){
                print "/* FILE NOT FOUND */\n\n";
            } else {

                // TODO: PRE-PROCESS THE CONTENT.  MINIFICATION, ETC.
                // TODO: PRE-PROCESS THE CONTENT.  MINIFICATION, ETC.

                // Prints the content.
                print "$content\n\n";
            }
        }
    }
}

/**
* Helper class for creating tags which will import several static resources in a single
* request.
*
* The most common way to interface with this class is through the static functions at the
* bottom of the class (which will all operate on the same singleton).
*/
class StaticResources {
    const ERR_WRONG_FILETYPE = "Error in StaticResources: Tried to add a file with a file-type that isn't allowed.  File had extension '.%s' which is not in ALLOWED_FILE_TYPES in %s\n";
    const ERR_CANT_OUTPUT_FILETYPE = "Error in StaticResources: Don't know how to include code for files of type '%s'\n";
    const ERR_ALREADY_OUTPUT_HEADER = "Error in StaticResources: Tried to add a head file after the head files have already been retrieved. The file that was added late was: \"%s\".";
    const ERR_ALREADY_OUTPUT_FOOTER = "Error in StaticResources: Tried to add a footer file after the footer files have already been retrieved. The file that was added late was: \"%s\".";

    private static $ALLOWED_FILE_TYPES; // we have to initialize this in the constructor because arrays can't be class-constants.
    private $staticResourcesRootUrl = "./";

    // NOTE: Inclusion-order matters for both js and css, so never sort the array of fileNames... always output them in the order
    // received.
    private $_headerFilesByType = array('js' => array(), 'css' => array());
    private $_footerFilesByType = array('js' => array(), 'css' => array());

    private $_headerAlreadyReturned = false;
    private $_footerAlreadyReturned = false;

    /**
     * Basic constructor - note that most of the interaction with this class will
     * be done using static functions which grab a singleton.
     */
    public function __construct(){
        self::$ALLOWED_FILE_TYPES = unserialize( STATICRESOURCES_ALLOWED_FILE_TYPES );

        foreach(self::$ALLOWED_FILE_TYPES as $type){
            $this->_headerFilesByType[$type] = array();
            $this->_footerFilesByType[$type] = array();
        }
    } // end constructor

    /**
     * If your static resources are served from another domain (such as cdn.yoursite.com), then set
     * that here. This string is prepended to the filename (eg: "static.php") when building the URL for the combined-file.
     */
    public function mySetRootUrl($rootUrl){
        $this->staticResourcesRootUrl = $rootUrl;
    }

    /**
     * Adds the filename to the list of files to include in the head tag for its given
     * filetype.  If the fileName does not have an extension of one of the ALLOWED_FILE_TYPES,
     * then the file will NOT be added and a warning will be given instead.
     *
     * For these files to be used, the calling code must remember to print the results of
     * getHeaderHtml() in the  tag.
     *
     * NOTE: The fileName must be structured relative to where THIS (StaticResources) file is,
     * and should not be in normal URL format, but rather in a format that this file can be read
     * from disk.  So doing "/directory/filename.ext" to get to the root of public_html will not work
     * unless the StaticResources file happens to be in public_html.  If this sounds confusing,
     * the simplest fix is to put this StaticResources file in your public_html directory, then you
     * can write file names exactly the way you would have written them in  tags.
     *
     * @param fileType - if this is empty, the fileType will be detected from the filename. Sometimes
     * the filename might not have an extension (some JS libraries don't have file extensions) so you may
     * need to specify this value. Should be "js" or "css".
     */
    public function myAddHeaderFile($fileName, $fileType="", $warnIfAddedLate=true){
        // Make sure this file wasn't added after the header files were already displayed.
        if( $warnIfAddedLate && $this->_headerAlreadyReturned){
            $errorString = sprintf(self::ERR_ALREADY_OUTPUT_HEADER, $fileName);
            trigger_error($errorString, E_USER_WARNING);
        }

        // If this file type is allowed, then remember it for later.
        if( $this->fileIsAllowed($fileName) ){
            $ext = (empty($fileType) ? StaticResources::getFileExtension($fileName) : strtolower($fileType));
            $this->headerFilesByType[ $ext ][] = $fileName;
        } else {
            $ext = (empty($fileType) ? StaticResources::getFileExtension($fileName) : strtolower($fileType));
            $errorString = sprintf(self::ERR_WRONG_FILETYPE, $ext, __FILE__);
            trigger_error($errorString, E_USER_WARNING);
        }
    } // end addHeaderFile()

    /**
     * Adds the filename to the list of files to include at the bottom of the BODY tag.
     * If the fileName does not have an extension of one of the ALLOWED_FILE_TYPES,
     * then the file will NOT be added and a warning will be given instead.
     *
     * For these files to be used, the calling code must remember to print the results of
     * getFooterHtml() somewhere very late in the document, ideally at the very bottom of
     * the  tag (right before ).
     *
     * @param fileType - if this is empty, the fileType will be detected from the filename. Sometimes
     * the filename might not have an extension (some JS libraries don't have file extensions) so you may
     * need to specify this value. Should be "js" or "css".
     */
    public function myAddFooterFile($fileName, $fileType="", $warnIfAddedLate=true){
        // Make sure this file wasn't added after the footer files were already displayed.
        if( $warnIfAddedLate && $this->_footerAlreadyReturned){
            $errorString = sprintf(self::ERR_ALREADY_OUTPUT_FOOTER, $fileName);
            trigger_error($errorString, E_USER_WARNING);
        }

        // If this file type is allowed, then remember it for later.
        if( $this->fileIsAllowed($fileName) ){
            $ext = (empty($fileType) ? StaticResources::getFileExtension($fileName) : strtolower($fileType));
            $this->footerFilesByType[ $ext ][] = $fileName;
        } else {
            $ext = (empty($fileType) ? StaticResources::getFileExtension($fileName) : strtolower($fileType));
            $errorString = sprintf(self::ERR_WRONG_FILETYPE, $ext, __FILE__);
            trigger_error($errorString, E_USER_WARNING);
        }
    } // end addFooterFile()

    /**
     * Returns a string which contains the HTML that's needed to
     * import the files in the HEAD tag.  This should be called exactly
     * once (and it's results should be printed in the  tag) on every
     * page.
     */
    public function myGetHeaderHtml(){
        $html = "\n" . $this->getHtmlForArray( $this->headerFilesByType );
        $_headerAlreadyReturned = true;
        return $html;
    } // end getHeaderHtml()

    /**
     * Returns a string which contains the HTML that's needed to
     * import the files at the bottom of the BODY tag.  This should be called exactly
     * once (and it's results should be printed at the bottom of the  tag - right
     * before ) on every page.
     */
    public function myGetFooterHtml(){
        $html = "\n" . $this->getHtmlForArray( $this->footerFilesByType );
        $_footerAlreadyReturned = true;
        return $html;
    } // end getFooterHtml()

    /**
     * Given an associative array of static resources whose keys are
     * resource types and whose values are arrays of fileNames (local
     * and/or remote), this will return a string which contains the
     * HTML that's needed to import those files.
     */
    private function getHtmlForArray($filesByType){
        $html = "";

        // The URL of this script (which will act as an endpoint and serve up the actual content.
        $url = $this->staticResourcesRootUrl . basename(__FILE__);
        foreach($filesByType as $fileType => $files){
            $localFiles = array();

            foreach($files as $fileName){
                if(StaticResources::isRemoteFile($fileName)){
                    // Add the HTML for including the remote file.
                    if($fileType == "css"){
                        $html .= "        \n";
                    } else if($fileType == "js"){
                        $html .= "        \n";
                    } else {
                        // Each file type needs to be included a certain way, and we don't recognize this fileType.
                        $errorString = sprintf(self::ERR_CANT_OUTPUT_FILETYPE, $fileType);
                        trigger_error($errorString, E_USER_WARNING);
                    }
                } else {
                    $localFiles[] = $fileName;
                }
            }

            // Output the HTML which makes the request for the combined-file of all local files of the same fileType.
            if(count($localFiles) > 0){

                // TODO: TWEAK SO THAT THE DELIMITER ISN'T URL-ENCODED. MAKES IT MORE READABLE AND SHORTER.
                // TODO: TWEAK SO THAT THE DELIMITER ISN'T URL-ENCODED. MAKES IT MORE READABLE AND SHORTER.

                $fullUrl = $url . "?files=".rawurlencode( implode(STATICRESOURCES_FILE_DELIMITER, $localFiles) );

                if($fileType == "css"){
                    $html .= "        \n";
                } else if($fileType == "js"){
                    $html .= "        \n";
                } else {
                    // Each file type needs to be included a certain way, and we don't recognize this fileType.
                    $errorString = sprintf(self::ERR_CANT_OUTPUT_FILETYPE, $fileType);
                    trigger_error($errorString, E_USER_WARNING);
                }
            }
        }

        return $html;
    } // end getHtmlForArray()

    /**
     * Returns true if the given fileName is allowed to be included, false otherwise.
     * The reason a file may not be allowed is that it's of the wrong file-type. One
     * reason for this is that we don't want attackers to request file types that may
     * contain password-files or source code that some users of this script might not
     * want to make public, etc..
     */
    private function fileIsAllowed($fileName){
        $fileIsAllowed = true;
        if( !StaticResources::isRemoteFile($fileName)){
            $fileExtension = strtolower( StaticResources::getFileExtension($fileName) );
            $fileIsAllowed = in_array($fileExtension, self::$ALLOWED_FILE_TYPES);
        }
        return $fileIsAllowed;
    } // end fileIsAllowed()

    /**
     * Returns true if the fileName is from another site and false if it is from this site.
     */
    public static function isRemoteFile($fileName){
        // If it starts with a protocol (ftp://, http://, https://, etc.) then it is remote (not local).
        return (0 <  preg_match("/^[a-z0-9]+:\/\//i", $fileName));
    }

    /**
     * If the 'fileName' is a local file, this will return that fileName in such a way
     * that the fileName can be loaded from disk safely (without allowing the user to
     * jump out of the current directory with "../" or absolute directories such
     * as "/usr/bin/").
     */
    public static function sanitizeFileName($fileName){
        // Only local files need to be sanitized.
        if( !StaticResources::isRemoteFile($fileName)){
            // Make sure the user can't get above the current directory using "../".
            while(strpos($fileName, "../") !== false){
                $fileName = str_replace("../", "", $fileName);
            }

            // Starting out with current directory avoids abusing absolute paths such as "/usr/bin"
            if(strpos($fileName, "./") !== 0){ // if path already starts with ./, don't duplicate it.
                if(strpos($fileName, "/") === 0){ // path already starts with "/", just turn it into "./".
                    $fileName = ".$fileName";
                } else {
                    $fileName = "./$fileName"; // all other paths that start 'normally' (not "./" or "/").
                }
            }
        }

        return $fileName;
    }

    public static function getFileExtension($fileName){
        // If there is a query-string, chop that off before looking for the extension.
        if(strpos($fileName, "?") !== false){
            $fileName = substr($fileName, 0, strpos($fileName, "?"));
        }

        return pathinfo($fileName, PATHINFO_EXTENSION);
    }

    // ----- STATIC HELPERS -----
    /**
     * Gets a singleton object of the StaticResources type to make it easy for the
     * script to use StaticResources throughout the web-app without passing the object
     * around.  This is probably the most common use-case.
     */
    public static function getSingleton(){
        global $staticResourcesSingleton;
        if(empty($staticResourcesSingleton)){
            $staticResourcesSingleton = new StaticResources();
        }
        return $staticResourcesSingleton;
    } // end getSingleton()

    public static function addHeaderFile($fileName, $fileType="", $warnIfLateAdded=true){
        $singleton = StaticResources::getSingleton();
        $singleton->myAddHeaderFile($fileName, $fileType, $warnIfLateAdded);
    }
    public static function addFooterFile($fileName, $fileType="", $warnIfLateAdded=true){
        $singleton = StaticResources::getSingleton();
        $singleton->myAddFooterFile($fileName, $fileType, $warnIfLateAdded);
    }
    public static function getHeaderHtml(){
        $singleton = StaticResources::getSingleton();
        return $singleton->myGetHeaderHtml();
    }
    public static function getFooterHtml(){
        $singleton = StaticResources::getSingleton();
        return $singleton->myGetFooterHtml();
    }
    public static function setRootUrl( $rootUrl ){
        $singleton = StaticResources::getSingleton();
        $singleton->mySetRootUrl($rootUrl);
    }

} // end class StaticResources

Using this script with a CDN

One drawback of serving a combined file is that your server has to read in all of the files, then print them all. This makes the call slightly slower than it has to be. One solution is to use a CDN to cache the files on your site. This way, even if it takes your server a second or so to generate the file the first time, it can be served to the next user instantly, from the CDN.

For Burndown for Trello, we use Fastly as our CDN (disclosure: my fiance works there, but we use it because it’s free for one backend and it’s crazy fast).

The code to make this work with a CDN is very simple: one extra line below the include call:

How to serve the static assets from a CDN
PHP

include 'static.php';
StaticResources::setRootUrl("http://b4t.global.ssl.fastly.net/");

Code minification

Another common performance trick is to use a minifier to reduce file-size. This hasn’t been added to the script yet, but may come in the future. If you have a favorite minifier, I’ve conspicuously commented in the code where it would make sense to run the minifier.

Minification takes a little while to run, so it’s highly recommended that you get a CDN if you’re using minificaiton.

The End

Hope you found the script useful. If you use it on your site, please link to it in the comments!
Thanks,

参考文章：

1. http://bluelinegamestudios.com/blog/posts/simple-single-file-php-script-for-combining-js-css-assets

网站SEO优化之CSS JS代码合并，首发于润物无声。

一种更符合自然语意的PHP正则表达式

润物无声 — Thu, 15 Aug 2013 14:07:37 +0000

在编程的过程中，尤其是文本的处理，我们很多时候都需要正则表达式，比如，验证用户输入的Email是否格式正确，电话号码是否符合规范，或者其他的自定义规则。对新手来说，熟记正则表达式的规则比较困难，那么有没有一种更符合自然语义的正则表达式呢，本文会给你答案。

Most newbie (and some seasoned) programmers have difficultly constructing Regular Expressions. Many a times one needs to create a Regexp quickly to test a a particular piece of code. However, not being comfortable withe Regexps can be a problem. VerbalExpressions is a PHP library that enables you to construct regular expressions using natural language like constructs. Think of it like a DSL for building Regexps.
verbalexpressions 已经实现了多个语言版本的库，可以从这里得到。

Below is a sample PHP code that constructs a regular expression which tests whether a given string is a valid url.

如下示例用来测试给定的一个string是否是有效的url地址。

startOfLine()
        ->then("http")
        ->maybe("s")
        ->then("://")
        ->maybe("www.")
        ->anythingBut(" ")
        ->endOfLine();

if($regex->test("http://www.codediesel.com"))
    echo "valid url";
else
    echo "invalid url";

?>

The main part of the code the DSL like interface that helps you build a Regexp.

$regex  ->startOfLine()
        ->then("http")
        ->maybe("s")
        ->then("://")
        ->maybe("www.")
        ->anythingBut(" ")
        ->endOfLine();

If you want to see what regular expression the code has built, we can use the getRegex function of the class.

startOfLine()
        ->then("http")
        ->maybe("s")
        ->then("://")
        ->maybe("www.")
        ->anythingBut(" ")
        ->endOfLine();

echo $regex->getRegex();

This will print the Regexp given below.

打印输出正则表达式。

/^(http)(s)?(\:\/\/)(www\.)?([^ ]*)$/m

We can now use the above Regexp in our code to accomplish the same thing as above.

$myRegexp = '/^(http)(s)?(\:\/\/)(www\.)?([^ ]*)$/m';

if (preg_match($myRegexp, 'http://www.codediesel.com')) {
    echo 'valid url';
} else {
    echo 'invalud url';
}

We can also use the $regex object given in the above example directly in our code where the particular Regexp is required.

可以使用函数 getRegex 获取正则表达式规则，或者直接可以用 $regex 对象，库内部已经实现了转换。

内部的转换函数：

/**
* Object to string
*
* PHP Magic method to return a string representation of the object.
*
* @access public
* @return string
*/
    public function __toString()
    {
        return $this->getRegex();
    }

include_once('VerbalExpressions.php');

$regex = new VerEx;

$regex  ->startOfLine()
        ->then("http")
        ->maybe("s")
        ->then("://")
        ->maybe("www.")
        ->anythingBut(" ")
        ->endOfLine();

if (preg_match($regex, 'http://www.codediesel.com')) {
    echo 'valid url';
} else {
    echo 'invalud url';
}

The PHP version of VerbalExpressions is a port of the original JavaScript version,JSVerbalExpressions. Additional modifiers that will help you build regular expressions can be found here.

文章节选：constructing-hard-regular-expressions-with-verbalexpressions

一种更符合自然语意的PHP正则表达式，首发于润物无声。

PHP中Session的使用

润物无声 — Thu, 15 Aug 2013 13:38:34 +0000

php中使用session的场合主要是用户登录信息的记录和页面之间数据的传递，session的有效期为浏览器的生存期，直到用户关闭浏览器，服务器中的session数据才清除。本文介绍了怎么样利用session来存储变量。

In this article I’m going to show you some simple things to work with sessions in php, these are mostly used to store information about your users, like usernames, choices selected by users and similar, these however are stored on the server and deleted once the user closes the browser. To interact with session variables you need to carefully create them and then check them and accordingly do something based on their value. This is actually the main topic of this article, how to check and create php session variables.

Starting sessions …【启用session】

It is imperative that you first and foremost start the session on your website, otherwise the session variables will be lost as soon as the page is refreshed or goes to a different page. This can be easily done using the session_start() php function.

Some content here

It is important that you use the session_start() function before any other code on your website.

Creating php session variables【创建session变量】

As you can see bellow, working wish session is similar to associative php arrays, the variable however needs to be $_SESSION. Then you create a session variable (more like an array element) by assigning it a value:

The above code will store the session variable ‘logged’ with the value ‘yes’ and based on this, you can probably show some specific links for a section that’s meant for logged users. Will show you in a second bellow.

How to check session variable【访问session变量】

Checking the session variable is important, else you’re just storing them for nothing, you need to make use of them in certain ways. Bellow its an example of using the above ‘logged’ session variable:

Account settings
"; echo "

Some other page
"; } // session is set, this will show similar as bellow: // Account settings // Edit account // Some other page ?>

Printing session variable【打印输出session变量】

You can also print the session value wherever you need its value, for example:

";
        echo "Answer is: " . (isset($_SESSION['logged']) && $_SESSION['logged']=='yes' ? $_SESSION['logged'] : "no");
    }
// Is Teddy logged in?
// Answer is: yes
?>

Heads up! If you are testing this, do not forget that sessions are being stored until you close your browser or until you clear your browser cookies and cache!

As you can see, this is not exactly hard, but needs a bit of attention. Sessions are normally used for logged section, where you rely on session to show account level section for your users.

Do not forget that this is only an example to see how session work, you will need to secure these if you really wish to use them in production … but that’s another article that may come soon.

That’s it for now, don’t forget to share and follow our website for new articles!

文章节选：how-to-check-and-create-php-session-variables

PHP中Session的使用，首发于润物无声。

怎样写出更有效率的CSS

润物无声 — Thu, 15 Aug 2013 01:18:22 +0000

在页面设计的过程中，总会使用CSS来进行样式设计，样式的选择器也无非常用4种，ID，Class，Tag和Universal，优先级从高到底，那么怎么样设计选择器和样式，可以提高CSS的解析效率，平时的设计中又会出现哪些误区，那么如下的文章值得一看。

Writing good CSS code can speed up page rendering. Essentially, the fewer rules the engine has to evaluate the better. MDN groups CSS selectors in four primary categories, and these actually follow the order of how efficient they are:

ID Rules
Class Rules
Tag Rules
Universal Rules

The efficiency is generally quote from Even Faster Websites by Steve Souders which was published in 2009. Souders list is more detailed, though, and you can find the full list referenced here. You can find more details in Google’s best practices for efficient CSS selectors.

In this article I wanted to share some simple examples and guidelines that I use for writing efficient and performant CSS. This is inspired by, and follows a similar format to, MDN’s guide to writing efficient CSS.

Don’t Overqualify[过多的修饰符]

As a general rule, don’t supply more information than is necessary.

// bad
ul#someid {..}
.menu#otherid{..}

// good
#someid {..}
#otherid {..}

Descendant Selectors are the Worst[少用后代选择器]

Not only is this not performant but it is fragile, as changes to the HTML can easily break your CSS.

// very bad
html div tr td {..}

Avoid Chaining[少用链式]

This is similar to overqualifying and it is preferable to simply create a new CSS class selector.

// bad
.menu.left.icon {..}

// good
.menu-left-icon {..}

Stay KISS[简洁]

Let’s imagine we have a DOM like this:


    Twitter
    Facebook
    Dribbble

Following upon the prior rules…

// bad
#navigator li a {..}

// good
#navigator {..}

Use a Compact Syntax[采用缩写]

Whenever possible, use the shorthand syntax.

// bad
.someclass {
 padding-top: 20px;
 padding-bottom: 20px;
 padding-left: 10px;
 padding-right: 10px;
 background: #000;
 background-image: url(../imgs/carrot.png);
 background-position: bottom;
 background-repeat: repeat-x;
}

// good
.someclass {
 padding: 20px 10px 20px 10px;
 background: #000 url(../imgs/carrot.png) repeat-x bottom;
}

Avoid Needless Namespacing[多余的命名空间]

// bad
.someclass table tr.otherclass td.somerule {..}

//good
.someclass .otherclass td.somerule {..}

Avoid Needless Duplication[规则重复]

Whenever you can, combine duplicate rules.

// bad

.someclass {
 color: red;
 background: blue;
 font-size: 15px;
}

.otherclass {
 color: red;
 background: blue;
 font-size: 15px;
}

// good

.someclass, .otherclass {
 color: red;
 background: blue;
 font-size: 15px;
}

Condense Rules When You Can[继承压缩]

Following on the prior rule, you can combine duplicate rules but still differentiate classes.

// bad
.someclass {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
 font-size: 16px;
}

.otherclass {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
 font-size: 8px;
}

// good
.someclass, .otherclass {
 color: red;
 background: blue;
 height: 150px;
 width: 150px;
}

.someclass {
 font-size: 16px;
}

.otherclass {
 font-size: 8px;
}

Avoid Unclear Naming Conventions[命名规范]

It is preferable to use semantic names. A good CSS class name should describe what it is about.

Avoid !importants[避免!importants标签的使用]

When possible, you should instead use good qualified selectors.

Follow a Standard Declaration Order[标准顺序]

While there are a number of common ways to order CSS properties, this is a commonly used one that I follow.

.someclass {
 /* Positioning */
 /* Display & Box Model */
 /* Background and typography styles */
 /* Transitions */
 /* Other */
}

Format Your Code Properly[格式化]

Code that is easier to read is easier to maintain. Here’s the format I follow:

// bad
.someclass-a, .someclass-b, .someclass-c, .someclass-d {
 ...
}

// good
.someclass-a, 
.someclass-b, 
.someclass-c, 
.someclass-d {
 ...
}

// good practice
.someclass {
    background-image:
        linear-gradient(#000, #ccc),
        linear-gradient(#ccc, #ddd);
    box-shadow:
        2px 2px 2px #000,
        1px 4px 1px 1px #ddd inset;
}

Where to Go From Here

Obviously these are just a handful of rules that I try to follow in my own CSS to make it both more efficient and easier to maintain. If you want to read more on the topic, I suggest reading Writing Efficient CSS on MDN and Google’s guide to optimize browser rendering.

文章节选：writing performant and quality css

怎样写出更有效率的CSS，首发于润物无声。

你需要了解的SQL注入技术

润物无声 — Sat, 03 Aug 2013 02:43:47 +0000

开发WEB的同学都应该听说过SQL注入，如果开发过程中，直接利用parameter中传入的值来进行数据库查询的话就有SQL注入的风险，那么到底有哪些高级的SQL注入手法，相信读过本文，了解的就不是一点点了，看看黑客们是怎样注入的，那么，自己在以后的开发过程中也要适时留意，防范这种风险。

Put on your black hats folks, it’s time to learn some genuinely interesting things about SQL injection. Now remember – y’all play nice with the bits and pieces you’re about to read, ok?

SQL injection is a particularly interesting risk for a few different reasons:

It’s getting increasingly harder to write vulnerable code due to frameworks that automatically parameterise inputs – yet we still write bad code.
You’re not necessarily in the clear just because you use stored procedures or a shiny ORM (you’re aware thatSQLi can still get through these, right?) – we still build vulnerable apps around these mitigations.
It’s easily detected remotely by automated tools which can be orchestrated to crawl the web searching for vulnerable sites – yet we’re still putting them out there.

It remains number one on the OWASP Top 10 for a very good reason – it’s common, it’s very easy to exploit and the impact of doing so is severe. One little injection risk in one little feature is often all it takes to disclose every piece of data in the whole system – and I’m going to show you how to do this yourself using a raft of different techniques.

I demonstrated how to protect against SQLi a couple of years back when I wrote about the OWASP Top 10 for .NET developers so I’m not going to focus on mitigation here, this is all about exploiting. But enough of the boring defending stuff, let’s go break things!

All your datas are belong to us (if we can break into the query context)

Let’s do a quick recap on what it is that makes SQLi possible. In a nutshell, it’s about breaking out of the datacontext and entering the query context. Let me visualise this for you; say you have URL that includes a query string parameter such as “id=1” and that parameter makes its way down into a SQL query such as this:

The entire URL probably looked something like this:

Pretty basic stuff, where it starts to get interesting is when you can manipulate the data in the URL such that it changes the value passed to the query. Ok, changing “1” to “2” will give you a different widget and that’s to be expected, but what if you did this:

http://widgetshop.com/widget/?id=1 or 1=1

That might then persist through to the database server like so:

SELECT * FROM Widget WHERE ID = 1 OR 1=1

What this tells us is that the data is not being sanitised – in the examples above the ID should clearly be an integer yet the value “1 OR 1=1” has been accepted. More importantly though, because this data has simply been appended to the query it has been able to change the function of the statement. Rather than just selecting a single record, this query will now select all records as the “1=1” statement will always be true. Alternatively, we could force the page to return no records by changing “or 1=1” to “and 1=2” as it will always be false hence no results. Between these two alternatives we can easily assess if the app is at risk of an injection attack.

This is the essence of SQL injection – manipulating query execution with untrusted data – and it happens when developers do things like this:

query = "SELECT * FROM Widget WHERE ID = "+ Request.QueryString["ID"];
// Execute the query...

Of course what they should be doing is parameterising the untrusted data but I’m not going to go into that here (refer back to part one of my OWASP series for more info on mitigation), instead I want to talk more about exploiting SQLi.

Ok, so that background covers how to demonstrate that a risk is present, but what can you now do with it? Let’s start exploring some common injection patterns.

Joining the dots: Union query-based injection

Let’s take an example where we expect a set of records to be returned to the page, in this case it’s a list of widgets of “TypeId” 1 on a URL like this:

http://widgetshop.com/Widgets/?TypeId=1

The result on the page then looks like so:

We’d expect that query to look something like this once it hits the database:

SELECT Name FROM Widget WHERE TypeId = 1

But if we can apply what I’ve outlined above, namely that we might be able to just append SQL to the data in the query string, we might be able to do something like this:

http://widgetshop.com/Widgets/?TypeId=1 union all select name from sysobjects where xtype='u'

Which would then create a SQL query like so:

SELECT Name FROM Widget WHERE TypeId = 1 union all select name from sysobjects where xtype='u'

Now keep in mind that the sysobjects table is the one that lists all the objects in the database and in this case we’re filtering that list by xtype “u” or in other words, user tables. When an injection risk is present that would mean the following output:

This is what’s referred to as a union query-based injection attack as we’ve simply appended an additional result set to the original and its made its way out directly into the HTML output – easy! Now that we know there’s a table called “User” we could do something like this:

http://widgetshop.com/Widgets/?TypeId=1 union all select password from [user]

SQL Server gets a bit uppity if the table name of “user” is not enclosed in square brackets given the word has other meanings in the DB sense. Regardless, here’s what that gives us:

Of course the UNION ALL statement only works when the first SELECT statement has the same number of columns as the second. That’s easily discoverable though, you just try going with a bit of ”union all select ‘a’” then if that fails “union all select ‘a’, ‘b’” and so on. Basically you’re just guessing the number of columns until things work.

We could go on and on down this path and pull back all sorts of other data, let’s move on to the next attack though. There are times when a union-based attack isn’t going to play ball either due to sanitisation of the input or how the data is appended to the query or even how the result set is displayed to the page. To get around that we’re going to need to get a bit more creative.

Making the app squeal: Error-based injection

Let’s try another pattern – what if we did this:

http://widgetshop.com/widget/?id=1 or x=1

Hang on, that’s not valid SQL syntax, the “x=1” piece won’t compute, at least not unless there’s a column called “x” so won’t it just throw an exception? Precisely, in fact it means you’ll see an exception like this:

This an ASP.NET error and other frameworks have similar paradigms but the important thing is that the error message is disclosing information about the internal implementation, namely that there is no column called “x”. Why is this important? It’s fundamentally important because once you establish that an app is leaking SQL exceptions, you can do things like this:

http://widgetshop.com/widget/?id=convert(int,(select top 1 name from sysobjects where id=(select top 1 id from (select top 1 id from sysobjects where xtype='u' order by id) sq order by id DESC)))

That’s a lot to absorb and I’ll come back to it in more detail, the important thing is though that it will yield this result in the browser:

And there we have it, we’ve now discovered that there is a table in the database called “Widget”. You’ll often see this referred to as “Error-based SQL injection” due to the dependency on internal errors. Let’s deconstruct the query from the URL:

convert(int, (
    select top 1 name from sysobjects where id=(
      select top 1 id from (
        select top 1 id from sysobjects where xtype='u' order by id
      ) sq order by id DESC
    )
  )
)

Working from the deepest nesting up, get the first record ID from the sysobjects table after ordering by ID. From that collection, get the last ID (this is why it orders in descending) and pass that into the top select statement. That top statement is then only going to take the table name and try to convert it to an integer. The conversion to integer will almost certainly fail (please people, don’t name your tables “1” or “2” or any other integer for that matter!) and that exception then discloses the table name in the UI.

Why three select statements? Because it means we can go into that innermost one and change “top 1” to “top 2” which then gives us this result:

Now we know that there’s a table called “User” in the database. Using this approach we can discover all the column names of each table (just apply the same logic to the syscolumns table). We can then extend that logic even further to select data from table columns:

In the screen above, I’d already been able to discover that there was a table called “User” and a column called “Password”, all I needed to do was select out of that table (and again, you can enumerate through all records one by one with nested select statements), and cause an exception by attempting to convert the string to an int (you can always append an alpha char to the data if it really is an int then attempt to convert the whole lot to an int which will cause an exception). If you want to get a sense of just how easy this can be, I recorded a little video last year where I teach my 3 year old to automate this with Havij which uses the technique.

But there’s a problem with all this – it was only possible because the app was a bit naughty and exposed internal error messages to the general public. In fact the app quite literally told us the names of the tables and columns and then disclosed the data when we asked the right questions, but what happens when it doesn’t? I mean what happens when the app is correctly configured so as not to leak the details of internal exceptions?

This is where we get into “blind” SQL injection which is the genuinely interesting stuff.

Hacking blind

In the examples above (and indeed in many precedents of successful injection attacks), the attacks are dependent on the vulnerable app explicitly disclosing internal details either by joining tables and returning the data to the UI or by raising exceptions that bubble up to the browser. Leaking of internal implementations is always a bad thing and as you saw earlier, security misconfigurations such as this can be leveraged to disclose more than just the application structure, you can actually pull data out through this channel as well.

A correctly configured app should return a message more akin to this one here when an unhandled exception occurs:

This is the default error page from a brand new ASP.NET app with custom errors configured but again, similar paradigms exist in other technology stacks. Now this page is exactly the same as the earlier ones that showed the internal SQL exceptions but rather than letting them bubble up to the UI they’re being hidden and a friendly error message shown instead. Assuming we also couldn’t exploit a union-based attack, the SQLi risk is entirely gone, right? Not quite…

Blind SQLi relies on us getting a lot more implicit or in other words, drawing our conclusions based on other observations we can make about the behaviour of the app that aren’t quite as direct as telling us table names or showing column data directly in the browser by way of unions or unhandled exceptions. Of course this now begs the question – how can we make the app behave in an observable fashion such that it discloses the information we had earlier without explicitly telling us?

We’re going to look at two approaches here: boolean-based and time-based.

Ask, and you shall be told: Boolean-based injection

This all comes down to asking the right questions of the app. Earlier on, we could explicitly ask questions such as “What tables do you have” or “What columns do you have in each table” and the database would explicitly tell us. Now we need to ask a little bit differently, for example like this:

http://widgetshop.com/widget/?id=1 and 1=2

Clearly this equivalency test can never be true – one will never be equal to two. How an app at risk of injection responds to this request is the cornerstone of blind SQLi and it can happen in one of two different ways.

Firstly, it might just throw an exception if no record is returned. Often developers will assume that a record referred to in a query string exists because it’s usually the app itself that has provided the link based on pulling it out of the database on another page. When there’s no record returned, things break. Secondly, the app might not throw an exception but then it also won’t display a record either because the equivalency is false. Either way, the app is implicitly telling us that no records were returned from the database.

Now let’s try this:

1 and
(
  select top 1 substring(name, 1, 1) from sysobjects where id=(
    select top 1 id from (
      select top 1 id from sysobjects where xtype='u' order by id
    ) sq order by id desc
  )
) = 'a'

Keeping in mind that this entire block replaces just the query string value so instead of “?id=1” it becomes “?id=1 and…”, it’s actually only a minor variation on the earlier requests intended to retrieve table names. In fact the main different is that rather than attempting to cause an exception by converting a string to an integer, it’s now an equivalency test to see if the first character of the table name is an “a” (we’re assuming a case-insensitive collation here). If this request gives us the same result as “?id=1” then it confirms that the first table in sysobjects does indeed begin with an “a” as the equivalency has held true. If it gives us one of the earlier mentioned two scenarios (an error or shows no record), then we know that the table doesn’t begin with an “a” as no record has been returned.

Now all of that only gives us the first character of the table name from sysobjects, when you want the second character then the substring statement needs to progress to the next position:

select top 1 substring(name, 2, 1) from sysobjects where id=(

You can see it now starts at position 2 rather than position 1. Of course this is laborious; as well as enumerating through all the tables in sysobjects you end up enumerating through all the possible letters of the alphabet until you get a hit then you have to repeat the process for each character of the table name. There is, however, a little shortcut that looks like this:

1 and
(
  select top 1 ascii(lower(substring(name, 1, 1))) from sysobjects where id=(
    select top 1 id from (
      select top 1 id from sysobjects where xtype='u' order by id
    ) sq order by id desc
  )
) > 109

There’s a subtle but important difference here in that what’s it doing is rather than checking for an individual character match, it’s looking for where that character falls in the ASCII table. Actually, it’s first lowercasing the table name to ensure we’re only dealing with 26 characters (assuming alpha-only naming, of course), then it’s taking the ASCII value of that character. In the example above, it then checks to see if the character is further down the table than the letter “m” (ASCII 109) and then of course the same potential outcomes as described earlier apply (either a record comes back or it doesn’t). The main difference is that rather than potentially making 26 attempts at guessing the character (and consequently making 26 HTTP requests), it’s now going to exhaust all possibilities in only 5 – you just keep halving the possible ASCII character range until there’s only one possibility remaining.

For example, if greater than 109 then it must be between “n” and “z” so you split that (roughly) in half and go greater than 115. If that’s false then it must be between “t” and “z” so you split that bang in half and go greater than 112. That’s true so there’s only three chars left which you can narrow down to one in a max of two guesses. Bottom line is that the max of 26 guesses (call it average of 13) is now done in only 5 as you simply just keep halving the result set.

By constructing the right requests the app will still tell you everything it previously did in that very explicit, rich error message way, it’s just that it’s now being a little coy and you have to coax the answers out of it. This is frequently referred to as “Boolean-based” SQL injection and it works well where the previously demonstrated “Union-based” and “Error-based” approaches won’t fly. But it’s also not fool proof; let’s take a look at one more approach and this time we’re going to need to be a little more patient.

Disclosure through patience: Time-based blind injection

Everything to date has worked on the presumption that the app will disclose information via the HTML output. In the earlier examples the union-based and error-based approaches gave us data in the browser that explicitly told us object names and disclosed internal data. In the blind boolean-based examples we were implicitly told the same information by virtue of the HTML response being different based on a true versus a false equivalency test. But what happens when this information can’t be leaked via the HTML either explicitly or implicitly?

Let’s imagine another attack vector using this URL:

http://widgetshop.com/Widgets/?OrderBy=Name

In this case it’s pretty fair to assume that the query will translate through to something like this:

SELECT * FROM Widget ORDER BY Name

Clearly we can’t just starting adding conditions directly into the ORDER BY clause (although there are other angles from which you could mount a boolean-based attack), so we need to try another approach. A common technique with SQLi is to terminate a statement and then append a subsequent one, for example like this:

http://widgetshop.com/Widgets/?OrderBy=Name;SELECT DB_NAME()

That’s a pretty innocuous one (although certainly discovering the database name can be useful), a more destructive approach would be to do something like “DROP TABLE Widget”. Of course the account the web app is connecting to the database with needs the rights to be able to do this, the point is that once you can start chaining together queries then the potential really starts to open up.

Getting back to blind SQLi though, what we need to do now is find another way to do the earlier boolean-based tests using a subsequent statement and the way we can do that is to introduce is a delay using the WAITFOR DELAY syntax. Try this on for size:

Name;
IF(EXISTS(
  select top 1 * from sysobjects where id=(
    select top 1 id from (
      select top 1 id from sysobjects where xtype='u' order by id
    ) sq order by id desc
  ) and ascii(lower(substring(name, 1, 1))) > 109
)) 
WAITFOR DELAY '0:0:5'

This is only really a slight variation of the earlier examples in that rather than changing the number of records returned by manipulating the WHERE clause, it’s now just a totally new statement that looks for the presence of a table at the end of sysobjects beginning with a letter greater than “m” and if it exists, the query then takes a little nap for 5 seconds. We’d still need to narrow down the ASCII character range and we’d still need to move through each character of the table name and we’d still need to look at other tables in sysobjects (plus of course then look at syscolumns and then actually pull data out), but all of that is entirely possible with a bit of time. 5 seconds may be longer than needed or it may not be long enough, it all comes down to how consistent the response times from the app are because ultimately this is all designed to manipulate the observable behaviour which is how long it takes between making a request and receiving a response.

This attack – as with all the previous ones – could, of course, be entirely automated as it’s nothing more than simple enumerations and conditional logic. Of course it could end up taking a while but that’s a relative term; if a normal request takes 1 second and half of the 5 attempts required to find the right character return true then you’re looking at 17.5 seconds per character, say 10 chars in an average table name is about 3 minutes a table then maybe 20 tables in a DB so call it one hour and you’ve discovered every table name in the system. And that’s if you’re doing all this in a single-threaded fashion.

It doesn’t end there…

This is one of those topics with a heap of different angles, not least of which is because there are so many different combinations of database, app framework and web server not to mention a whole gamut of defences such as web application firewalls. An example of where things can get tricky is if you need to resort to a time-based attack yet the database doesn’t support a delay feature, for example an Access database (yes, some people actually do put these behind websites!) One approach here is to use what’s referred to as heavy queries or in other words, queries which by their very nature will cause a response to be slow.

The other thing worth mentioning about SQLi is that two really significant factors play a role in the success an attacker has exploiting the risk: The first is input sanitisation in terms of what characters the app will actually accept and pass through to the database. Often we’ll see very piecemeal approaches where, for example, angle brackets and quotes are stripped but everything else is allowed. When this starts happening the attacker needs to get creative in terms of how they structure the query so that these roadblocks are avoided. And that’s kind of the second point – the attacker’s SQL prowess is vitally important. This goes well beyond just your average TSQL skills of SELECT FROM, the proficient SQL injector understands numerous tricks to both bypass the input sanitisation and select data from the system in such a way that it can be retrieved via the web UI. For example, little tricks like discovering a column type by using a query such as this:

http://widgetshop.com/Widget/?id=1 union select sum(instock) from widget

In this case, error-based injection will give tell you exactly what type the “InStock” column is when the error bubbles up to the UI (and no error will mean it’s numeric):

Or once you’re totally fed up with the very presence of that damned vulnerable site still being up there on the web, a bit of this:

http://widgetshop.com/Widget/?id=1;shutdown

But injection goes a lot further than just pulling data out via HTTP, for example there are vectors that will grant the attacker shell on the machine. Or take another tangent – why bother trying to suck stuff out through HTML when you might be able to just create a local SQL user and remotely connect using SQL Server Management Studio over port 1433? But hang on – you’d need the account the web app is connecting under to have the privileges to actually create users in the database, right? Yep, and plenty of them do, in fact you can find some of these just by searching Google (of course there is no need for SQLi in these cases, assuming the SQL servers are publicly accessible).

Lastly, if there’s any remaining doubt as to both the prevalence and impact of SQLi flaws in today’s software, just last week there was news of what is arguably one of the largest hacking schemes to date which (allegedly) resulted in losses of $300 million:

The indictment also suggest that the hackers, in most cases, did not employ particularly sophisticated methods to gain initial entry into the corporate networks. The papers show that in most cases, the breach was made via SQL injection flaws -- a threat that has been thoroughly documented and understood for well over than a decade.

Perhaps SQLi is not quite as well understood as some people think.

文章选自：everything-you-wanted-to-know-about-sql

你需要了解的SQL注入技术，首发于润物无声。

配置wordpress博客阻止部分IP访问

润物无声 — Thu, 02 Aug 2012 09:31:59 +0000

上个月，博客安装了没一个星期，就被莫名的IP攻击了，一个月的流量早早用完了，导致博客整整歇业了将近20天，这个月的第一天，8月1号，估计攻击的ip还在沉睡中，没出现什么异常，到了8月2号，就又开始攻击了。

今天下载分析了一下apache日志文件，找到了这几个攻击的ip，详情如下：

113.108.76.195 - - [02/Aug/2012:00:10:02 -0400] "GET /favicon.ico HTTP/1.0" 301 584 "-" "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1) QQBrowser/6.0"
113.108.76.196 - - [02/Aug/2012:00:10:04 -0400] "GET /favicon.ico HTTP/1.1" 301 584 "-" "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1) QQBrowser/6.0"
114.86.181.181 - - [02/Aug/2012:00:10:05 -0400] "GET /favicon.ico HTTP/1.1" 301 583 "-" "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1) QQBrowser/6.0"
116.237.76.204 - - [02/Aug/2012:03:04:37 -0400] "GET /favicon.ico HTTP/1.1" 301 583 "-" "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1) QQBrowser/6.0"
202.105.139.117 - - [02/Aug/2012:04:02:01 -0400] "GET /favicon.ico HTTP/1.1" 301 584 "-" "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2)"
218.17.162.137 - - [02/Aug/2012:04:12:04 -0400] "GET /favicon.ico HTTP/1.1" 301 584 "-" "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; CIBA; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2)"

主要就是这六个IP，反复请求favicon.ico文件，平均每秒发送几十个数据请求，导致博客一天的最大流量能达到3.5个G，太可怕了。

实在没有找到更好的解决办法，目前只能配置.htaccess文件来阻止这些ip的访问，暂时加入黑名单，配置如下，在文件的最开头加入：

Order Allow,Deny
Deny from 113.108.76.195
Deny from 113.108.76.196
Deny from 114.86.181.181
Deny from 116.237.76.204
Deny from 202.105.139.117
Deny from 218.17.162.137
Allow from all

先过几天看看情况，如果还不能解决的话就写一个插件，动态记录ip地址的访问，把那些每秒访问几十次的ip全部加入黑名单，定时清理和更新！

配置wordpress博客阻止部分IP访问，首发于润物无声。

为WordPress建立Html格式的Sitemap

润物无声 — Sun, 24 Jun 2012 03:56:39 +0000

熟悉wordpress建站的童鞋都知道sitemap的重要性，尤其是对网站的SEO以及各大重要搜索引擎的索引都有重要的作用，wordpress已经有许多优秀的sitemap生成插件可以使用，不过他们大部分生成的都只是xml格式的数据，可以直接提交到搜索引擎，方便搜索引擎的索引，但是不方便访客的阅读。

本文介绍一下怎样客制化和建立自己的Sitemap Page页面，可以包括或者排除特定的页面，特定的分类，加入自己定制的信息等等。

建立步骤

1. 为了代码的重用，我们需要利用wordpress主题模板的特性（theme partial），在当前的主题文件夹下面新建立一个partials文件夹，然后在里面新建立一个sitemap.php文件，内容如下：

Authors

 false,
)
);
?>


Pages

 '',
'title_li' => '',
)
);
?>


Posts

".$cat->cat_name."";
echo "";
query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
while(have_posts()) {
the_post();
$category = get_the_category();
// Only display a post link once, even if it's in multiple categories
if ($category[0]->cat_ID == $cat->cat_ID) {
echo ''.get_the_title().'';
}
}
echo "";
echo "";
}

//Add Custom Post Types to your HTML Sitemap
foreach( get_post_types( array('public' => true) ) as $post_type ) {
if ( in_array( $post_type, array('post','page','attachment') ) )
continue;

$pt = get_post_type_object( $post_type );

echo ''.$pt->labels->name.'';
echo '';

query_posts('post_type='.$post_type.'&posts_per_page=-1');
while( have_posts() ) {
the_post();
echo ''.get_the_title().'';
}

echo '';
}
?>

2. 拷贝一份当前主题下面的page.php，并重新命名为page-sitemap.php,编辑内容如下：







现在位置 ＞首页 ＞
RSS

主要修改两个地方，一个是在文件的顶部加入

另一个是调用sitemap.php,加入

3. 新建立一个页面，模板选择“Sitemap Page”，示例 http://blog.zhourunsheng.com/sitemap/

为WordPress建立Html格式的Sitemap，首发于润物无声。