假设1是一个表达式，1+2是两个表达式相加的表达式，(1+2)是一个括号表达式。我们用符号E来表示一个表达式，那么这三种表达式分别可以定义为：
E → 1
E → E + E
E → ( E )
那么上面这些鸟语是什么意思呢，这些鸟语就叫作产生式，E叫做非终结符，表示E可以产生新的东西。而 →右边表示一个E能够产生啥东西。
注意上面 + （还有1 这些符号不能产生别的东西，因此这些符号称作 终结符

那说了这么些鸟语是为了干什么呢？我们的目标是将一个表达式推导，把里面所有的E都产生出来，那么这个推导的结果顺便就生成了一个语法分析树

我们现在来推导一下表达式 (1+2)+3 推导的方式有两种，每次把最左边的E“产生”跟最右边的E“产生”，其实就是两种不同的分析方法。

从左边产生：
E => E + E => (E) + E => (E + E) + E => (1 + E) + E => (1 + 2) + E => (1 + 2) + 3
从右边产生
E => E + E => E + 3 => (E) + 3 => (E + E) + 3 => (E + 2) + 3 => (1 + 2) + 3

如果我们把推导的这个过程变成一棵树，树的每一个节点都是一个非终结符E或者终结符，其中终结符都是树的叶子结点（没有子节点），而非终结符E都是有子节点的，那么我们就得到了语法分析树。举例来讲，刚才的推导过程我们会得到这么一颗树。

tree

注意一点，两种方法推导都会得到同样一颗树。这说明这是两种不同的分析方法。
但另外一些语法分析的输入，可能存在多种语法分析树，这称为歧义。

我们再看一个例子:
1*2+3
从左边产生：E => E + E => E * E + E => a * E + E => a * b + E => 1 * 2 + 3

从左边产生：E => E * E => a * E => a * E + E => a * b + E => 1 * 2 + 3

注意了吗，第一步是不一样的，我们可以认为1*2是一个E，同样也可以认为1是一个E，2+3是一个E，而这两步得到的语法分析树显然是不一样的：

tree2

上面两个图的不同其实是体现了运算符优先级的不同。如果按照推导1的语法树，应该先将a和b相乘，再加上c；而如果按照推导2的语法树，则应该先把b和c相加，再和a相乘。我们如果要避免这种情况，就需要人为去规定产生式：

F → id
F → ( E )
T → T * F
T → F
E → E + T
E → T

在以上的产生式中，我们发现，T跟F里面都不能产生出+号，只能出现括号跟id。且如果遇到了多个+或者*，要首先从左侧开始运算。这样的结果是乘法比加法的优先级更高，且运算符符合左结合率。(http://en.wikipedia.org/wiki/Order_of_operations)

说完了这么多后，我们的理论基础也差不多了，可以根据这样的思想进行编码了。我们采用从左到右推导的方式，也就是所谓递归下降（recursive descent）法。(更多可参考http://en.wikipedia.org/wiki/Parsing#Parser)

我们来看看编写递归下降语法分析器的一般步骤：

使用一个索引来记录当前扫描的位置。通常将它做成一个整数字段。
为每个非终结符编写一个方法。
如果一个非终结符有超过一个的产生式，则在这个方法中对采用哪个产生式进行分支预测。
处理单一产生式时，遇到正确终结符则将第一步创建的扫描索引位置向前移动；如遇到非终结符则调用第二步中创建的相应方法。
如果需要产生解析的结果，在方法返回之前将它构造出来。

之后开始写代码，我们首先要列一下产生式

Primary → Identifier
Primary → Number
Primary → '(' Assignment ')'
Unary → Primary
Unary → '-' Unary
Multiplicative → Unary
Multiplicative → Multiplicative '*' Unary 
Multiplicative → Multiplicative '/' Unary
Additive → Multiplicative
Additive → Additive '+' Multiplicative
Additive → Additive '-' Multiplicative    
Assignment → Identifier '=' Assignment
Assignment → Additive

Primary → Identifier

Primary → Number

Primary → '(' Assignment ')'

Unary → Primary

Unary → '-' Unary

Multiplicative → Unary

Multiplicative → Multiplicative '*' Unary

Multiplicative → Multiplicative '/' Unary

Additive → Multiplicative

Additive → Additive '+' Multiplicative

Additive → Additive '-' Multiplicative

Assignment → Identifier '=' Assignment

Assignment → Additive

上面其实也是运算顺序：括号>一元操作符>乘法除法>加法减法> ＝号

另外上面提到了分支预测，分支预测怎么做呢？分支预测的方法是超前查看（look ahead）。就是说我们先“偷窥”当前位置前方的字符，然后判断应该用哪个产生式继续分析。非终结符Multiplicative的三个产生式会产生三种结果，于是我们“观察”产生式右侧所有出现Multiplicative的地方，根据实际情况来处理。反应到代码里就是 token = lexer.peek(); 这一句了。peek跟next的实现是这样的：

function peek() {
    var token, idx;

    idx = index;
    try {
        token = next();
    } catch (e) {
        token = undefined;
    }
    index = idx;

    return token;
}

return {
    reset: reset,
    next: next,
    peek: peek
};

function next() {
    var token;

    skipSpaces();
    if (index &gt;= length) {
        return undefined;
    }

    marker = index;

    token = scanNumber();
    if (typeof token !== 'undefined') {
        return token;
    }

    token = scanOperator();
    if (typeof token !== 'undefined') {
        return token;
    }

    token = scanIdentifier();
    if (typeof token !== 'undefined') {
        return token;
    }


    throw new SyntaxError('Unknown token from character ' + peekNextChar());
}

function peek() {

var token, idx;

idx = index;

try {

token = next();

} catch (e) {

token = undefined;

}

index = idx;

return token;

}

return {

reset: reset,

next: next,

peek: peek

};

function next() {

var token;

skipSpaces();

if (index >= length) {

return undefined;

}

marker = index;

token = scanNumber();

if (typeof token !== 'undefined') {

return token;

}

token = scanOperator();

if (typeof token !== 'undefined') {

return token;

}

token = scanIdentifier();

if (typeof token !== 'undefined') {

return token;

}

throw new SyntaxError('Unknown token from character ' + peekNextChar());

}

我们分别为上面的非终结符编写parser，并带有运算顺序：

最开始 assignment

// Assignment ::= Identifier '=' Assignment |
//                Additive
function parseAssignment() {
//debugger
    var token, expr;

    expr = parseAdditive();//加法乘法在其之前

    if (typeof expr !== 'undefined' &amp;&amp; expr.Identifier) {
        token = lexer.peek();//下面会讲到，分支预测的用法
        if (matchOp(token, '=')) {
            lexer.next();     //匹配到了这个token，则生成一个只有一个叶子的树，并解析下一个token

            return {
                'Assignment': {
                    name: expr,
                    value: parseAssignment() 
                }
            };
        }
        return expr;
    }

    return expr;
}

// Assignment ::= Identifier '=' Assignment |

// Additive

function parseAssignment() {

//debugger

var token, expr;

expr = parseAdditive();//加法乘法在其之前

if (typeof expr !== 'undefined' && expr.Identifier) {

token = lexer.peek();//下面会讲到，分支预测的用法

if (matchOp(token, '=')) {

lexer.next(); //匹配到了这个token，则生成一个只有一个叶子的树，并解析下一个token

return {

'Assignment': {

name: expr,

value: parseAssignment()

}

};

}

return expr;

}

return expr;

}

接下来 Additive，处理加法操作

// Additive ::= Multiplicative |
//              Additive '+' Multiplicative |
//              Additive '-' Multiplicative
function parseAdditive() {
    var expr, token;

    expr = parseMultiplicative(); //乘除法在前
    token = lexer.peek();

    while (matchOp(token, '+') || matchOp(token, '-')) {
        token = lexer.next();
        expr = { //生成一个二叉树，树根是操作符，左右节点
            'Binary': {
                operator: token.value,
                left: expr,
                right: parseMultiplicative()
            }
        };
        token = lexer.peek();
    }
    return expr;
}

// Additive ::= Multiplicative |

// Additive '+' Multiplicative |

// Additive '-' Multiplicative

function parseAdditive() {

var expr, token;

expr = parseMultiplicative(); //乘除法在前

token = lexer.peek();

while (matchOp(token, '+') || matchOp(token, '-')) {

token = lexer.next();

expr = { //生成一个二叉树，树根是操作符，左右节点

'Binary': {

operator: token.value,

left: expr,

right: parseMultiplicative()

}

};

token = lexer.peek();

}

return expr;

}

接下来是 Multiplicative，处理乘除法

// Multiplicative ::= Unary |
//                    Multiplicative '*' Unary |
//                    Multiplicative '/' Unary
function parseMultiplicative() {
    var expr, token;

    expr = parseUnary(); //符号的优先级还要高
    token = lexer.peek();
    while (matchOp(token, '*') || matchOp(token, '/')) { 
        token = lexer.next();
        expr = { //生成一个二叉树，树根是操作符，左右节点
            'Binary': {
                operator: token.value,
                left: expr,
                right: parseUnary()
            }
        };
        token = lexer.peek();
    }
    return expr;
}

// Multiplicative ::= Unary |

// Multiplicative '*' Unary |

// Multiplicative '/' Unary

function parseMultiplicative() {

var expr, token;

expr = parseUnary(); //符号的优先级还要高

token = lexer.peek();

while (matchOp(token, '*') || matchOp(token, '/')) {

token = lexer.next();

expr = { //生成一个二叉树，树根是操作符，左右节点

'Binary': {

operator: token.value,

left: expr,

right: parseUnary()

}

};

token = lexer.peek();

}

return expr;

}

接下来是Unary 这里会存在多个+-的情况，剩下的+-继续交到parseUnary中

// Unary ::= Primary |
//           '-' Unary
function parseUnary() {
    var token, expr;

    token = lexer.peek();

    if (matchOp(token, '-') || matchOp(token, '+')) {
        token = lexer.next();
        expr = parseUnary();
        return {
            'Unary': {
                operator: token.value,
                expression: expr
            }
        };
    }

    return parsePrimary();//符号的优先级比括号高
}

// Unary ::= Primary |

// '-' Unary

function parseUnary() {

var token, expr;

token = lexer.peek();

if (matchOp(token, '-') || matchOp(token, '+')) {

token = lexer.next();

expr = parseUnary();

return {

'Unary': {

operator: token.value,

expression: expr

}

};

}

return parsePrimary();//符号的优先级比括号高

}

在我们实际应用中，还有一种表达式是类似 x= sin(3)这种函数的，这样的函数也可以归类到Primary中，因此我们补充产生式

ArgumentList → Expression 
ArgumentList → Expression ',' ArgumentList
FunctionCall  →  Identifier '(' ')' 
FunctionCall  →  Identifier '(' ArgumentList ')'
Primary → FunctionCall

ArgumentList → Expression

ArgumentList → Expression ',' ArgumentList

FunctionCall → Identifier '(' ')'

FunctionCall → Identifier '(' ArgumentList ')'

Primary → FunctionCall

同样在这里我们认为函数调用优先级最高。这时候就可以写Primary的解析了：

// Primary ::= Identifier |
//             Number |
//             '(' Assignment ')' |
//             FunctionCall
function parsePrimary() {
    var token, expr;

    token = lexer.peek(); //偷窥

    if (typeof token === 'undefined') {
        throw new SyntaxError('Unexpected termination of expression');
    }

    if (token.type === T.Identifier) { //发现是Identifier
        token = lexer.next();//继续解析下一个token
        if (matchOp(lexer.peek(), '(')) {//发现下一个token是(
            return parseFunctionCall(token.value); //认为是函数调用。
        } else {
            return {
                'Identifier': token.value
            };
        }
    }

    if (token.type === T.Number) { //纯数字
        token = lexer.next();
        return {
            'Number': token.value
        };
    }

    if (matchOp(token, '(')) { //处理括号
        lexer.next();
        expr = parseAssignment(); //括号内认为是一个Assignment
        token = lexer.next();//解析到最外层前一个后
        if (!matchOp(token, ')')) {//发现缺少) 报错
            throw new SyntaxError('Expecting )');
        }
        return {
            'Expression': expr
        };
    }

    throw new SyntaxError('Parse error, can not process token ' + token.value);
}

// Primary ::= Identifier |

// Number |

// '(' Assignment ')' |

// FunctionCall

function parsePrimary() {

var token, expr;

token = lexer.peek(); //偷窥

if (typeof token === 'undefined') {

throw new SyntaxError('Unexpected termination of expression');

}

if (token.type === T.Identifier) { //发现是Identifier

token = lexer.next();//继续解析下一个token

if (matchOp(lexer.peek(), '(')) {//发现下一个token是(

return parseFunctionCall(token.value); //认为是函数调用。

} else {

return {

'Identifier': token.value

};

}

if (token.type === T.Number) { //纯数字

token = lexer.next();

return {

'Number': token.value

};

}

if (matchOp(token, '(')) { //处理括号

lexer.next();

expr = parseAssignment(); //括号内认为是一个Assignment

token = lexer.next();//解析到最外层前一个后

if (!matchOp(token, ')')) {//发现缺少) 报错

throw new SyntaxError('Expecting )');

}

return {

'Expression': expr

};

}

throw new SyntaxError('Parse error, can not process token ' + token.value);

}

下面是functioncall 仍然采用分支预测的方法处理：

function parseArgumentList() {
    var token, expr, args = [];

    while (true) { //循环处理参数
        expr = parseExpression();
        if (typeof expr === 'undefined') {
            break;
        }
        args.push(expr); 
        token = lexer.peek();
        if (!matchOp(token, ',')) {//发现参数后面没有,后处理完毕
            break;
        }
        lexer.next();
    }

    return args;
}

function parseFunctionCall(name) {//处理函数
    var token, args = [];

    token = lexer.next();//identifier这个token的下一个
    if (!matchOp(token, '(')) {//发现不是(，报错
        throw new SyntaxError('Expecting ( in a function call "' + name + '"');
    }

    token = lexer.peek();//偷窥
    if (!matchOp(token, ')')) {//如果偷窥的结果不是)，认为有参数，需要解析参数。
        args = parseArgumentList();
    }

    token = lexer.next();//如果解析完参数这里会到达参数最后一个的位置，如果没有参数则是(的下一个位置
    if (!matchOp(token, ')')) {
        throw new SyntaxError('Expecting ) in a function call "' + name + '"');
    }

    return {
        'FunctionCall' : {
            'name': name,
            'args': args
        }
    };
}

function parseArgumentList() {

var token, expr, args = [];

while (true) { //循环处理参数

expr = parseExpression();

if (typeof expr === 'undefined') {

break;

}

args.push(expr);

token = lexer.peek();

if (!matchOp(token, ',')) {//发现参数后面没有,后处理完毕

break;

}

lexer.next();

}

return args;

}

function parseFunctionCall(name) {//处理函数

var token, args = [];

token = lexer.next();//identifier这个token的下一个

if (!matchOp(token, '(')) {//发现不是(，报错

throw new SyntaxError('Expecting ( in a function call "' + name + '"');

}

token = lexer.peek();//偷窥

if (!matchOp(token, ')')) {//如果偷窥的结果不是)，认为有参数，需要解析参数。

args = parseArgumentList();

}

token = lexer.next();//如果解析完参数这里会到达参数最后一个的位置，如果没有参数则是(的下一个位置

if (!matchOp(token, ')')) {

throw new SyntaxError('Expecting ) in a function call "' + name + '"');

}

return {

'FunctionCall' : {

'name': name,

'args': args

}

};

}

最终生成了语法树。完整代码可见：http://jsbin.alif2e.com/jug/1/edit

手把手教你写一个数学表达式解析器（1） tokenizer

1条回复

由于项目中需要解析一些表达式，但这些表达式直接使用eval进行解析的话会遇到不可预知的安全问题。因此最近学习了编译原理相关，给大家讲讲如何写一个数学表达式解析器。

第一部分是如何进行词法分析（Lexical analysis），也就是如何写一个lexer或scanner或tokenizer（就是经常看到的程序员约架手写tokenizer的tokenizer）。词法分析是什么东西呢？

词法分析阶段是编译过程的第一个阶段，是编译的基础。这个阶段的任务是从左到右一个字符一个字符地读入源程序，即对构成源程序的字符流进行扫描然后根据构词规则识别单词(也称单词符号或符号)，按照过程来讲：

输入：一堆字符，即我们写的语法代码，一个文件，也就是一堆字符；
经过lexer处理；
输出：一系列的token，相当于一堆的变量或者说符号；

词法分析生成的token只是第一部，第二部是语法分析，我们接下来的文章再讲。

因此编写词法分析需要两个阶段
单词化，即把输入的字符串分割
评估器是为了把单词“评估”为固定的值。举例来讲
x = 6 + 7 进行词法分析后的结果：

类型	值
Identifier	x
Operator	=
Number	6
Operator	+
Number	7

了解了词法分析的原理，我们就可以开始coding了，我们的目标是解析出identifier，operator以及number三种类型的token。

首先我们写三个工具函数来判断字符类型，这三个工具函数用来判断是否是空白字符、是否是英文字符、是否是数字。

function isWhiteSpace(ch) {
    return (ch === 'u0009') || (ch === ' ') || (ch === 'u00A0');
}

function isLetter(ch) {
    return (ch &gt;= 'a' &amp;&amp; ch &lt; = 'z') || (ch &gt;= 'A' &amp;&amp; ch &lt; = 'Z');
}

function isDecimalDigit(ch) {
    return (ch &gt;= '0') &amp;&amp; (ch &lt; = '9');
}

function isWhiteSpace(ch) {

return (ch === 'u0009') || (ch === ' ') || (ch === 'u00A0');

}

function isLetter(ch) {

return (ch >= 'a' && ch < = 'z') || (ch >= 'A' && ch < = 'Z');

}

function isDecimalDigit(ch) {

return (ch >= '0') && (ch < = '9');

}

另外我们有一个工具函数来返回每个字符(token)的类型跟值

function createToken(type, value) {
    return {
        type: type,
        value: value
    };
}

function createToken(type, value) {

return {

type: type,

value: value

};

}

之前提到我们需要从左到右一个字符一个字符的去读源码，那么这个读取源码的工具也需要写一下

function getNextChar() {
    var ch = 'x00',
        idx = index;
    if (idx &lt; length) {
        ch = expression.charAt(idx);
        index += 1;
    }
    return ch;
}

function peekNextChar() {
    var idx = index;
    return ((idx &lt; length) ? expression.charAt(idx) : 'x00');
}

function getNextChar() {

var ch = 'x00',

idx = index;

if (idx < length) {

ch = expression.charAt(idx);

index += 1;

}

return ch;

}

function peekNextChar() {

var idx = index;

return ((idx < length) ? expression.charAt(idx) : 'x00');

}

在数学表达式中，空格我们可以直接忽略掉

function skipSpaces() {
    var ch;

    while (index &lt; length) {
        ch = peekNextChar();
        if (!isWhiteSpace(ch)) {
            break;
        }
        getNextChar();
    }
}

function skipSpaces() {

var ch;

while (index < length) {

ch = peekNextChar();

if (!isWhiteSpace(ch)) {

break;

}

getNextChar();

}

之后我们就可以写第一个operator的评估器：判断是否为操作符，我们先支持简单的加减乘除括号的解析：

function scanOperator() {
    var ch = peekNextChar();
    if ('+-*/()='.indexOf(ch) &gt;= 0) {
        return createToken('Operator', getNextChar());
    }
    return undefined;
}

function scanOperator() {

var ch = peekNextChar();

if ('+-*/()='.indexOf(ch) >= 0) {

return createToken('Operator', getNextChar());

}

return undefined;

}

还有一点要提到的是，很多语言中变量都可以以_开头的，且变量也可以由数字或者字母组成。因此我们对于identifier的评估器可以这么写
两个工具函数：

function isIdentifierStart(ch) {
    return (ch === '_') || isLetter(ch);
}

function isIdentifierPart(ch) {
    return isIdentifierStart(ch) || isDecimalDigit(ch);
}

function isIdentifierStart(ch) {

return (ch === '_') || isLetter(ch);

}

function isIdentifierPart(ch) {

return isIdentifierStart(ch) || isDecimalDigit(ch);

}

解析一串连续的字符，并判断这一串字符是一个identifier
function scanIdentifier() {
var ch, id;

    ch = peekNextChar();
    if (!isIdentifierStart(ch)) {
        return undefined;
    }

    id = getNextChar();
    while (true) {
        ch = peekNextChar();
        if (!isIdentifierPart(ch)) {
            break;
        }
        id += getNextChar();
    }

    return createToken('Identifier', id);
}

ch = peekNextChar();

if (!isIdentifierStart(ch)) {

return undefined;

}

id = getNextChar();

while (true) {

ch = peekNextChar();

if (!isIdentifierPart(ch)) {

break;

}

id += getNextChar();

}

return createToken('Identifier', id);

}

最后我们要写最复杂的number的解析了。

function scanNumber() {

    //如果这串字符不是数字返回undefined
}

function scanNumber() {

//如果这串字符不是数字返回undefined

}

我们认为数字的开头一定是数字或者小数点。

ch = peekNextChar();
if (!isDecimalDigit(ch) &amp;&amp; (ch !== '.')) {
    return undefined;
}

ch = peekNextChar();

if (!isDecimalDigit(ch) && (ch !== '.')) {

return undefined;

}

注意number可能有几种类型以及分别处理：
最简单的纯数字 99及
小数点 0.1415

    if (ch === '.') {
        number += getNextChar();
        while (true) {
            ch = peekNextChar();
            if (!isDecimalDigit(ch)) {
                break;
            }
            number += getNextChar();
        }
    }

if (ch === '.') {

number += getNextChar();

while (true) {

ch = peekNextChar();

if (!isDecimalDigit(ch)) {

break;

}

number += getNextChar();

}

科学计数法
2.4e-20

if (ch === 'e' || ch === 'E') {
    number += getNextChar();
    ch = peekNextChar();
    if (ch === '+' || ch === '-' || isDecimalDigit(ch)) {
        number += getNextChar();
        while (true) {
            ch = peekNextChar();
            if (!isDecimalDigit(ch)) {
                break;
            }
            number += getNextChar();
        }
    } else {
        throw new SyntaxError('Unexpected character after the exponent sign');
    }
}

if (ch === 'e' || ch === 'E') {

number += getNextChar();

ch = peekNextChar();

if (ch === '+' || ch === '-' || isDecimalDigit(ch)) {

number += getNextChar();

while (true) {

ch = peekNextChar();

if (!isDecimalDigit(ch)) {

break;

}

number += getNextChar();

}

} else {

throw new SyntaxError('Unexpected character after the exponent sign');

}

然后呢，最终我们需要一个函数来让整个字符都“流过”以上三个解析器。

function next() {
    var token;

    skipSpaces();
    if (index &gt;= length) {
        return undefined;
    }

    token = scanNumber();
    if (typeof token !== 'undefined') {
        return token;
    }

    token = scanOperator();
    if (typeof token !== 'undefined') {
        return token;
    }

    token = scanIdentifier();
    if (typeof token !== 'undefined') {
        return token;
    }

    throw new SyntaxError('Unknown token from character ' + peekNextChar());
}

function next() {

var token;

skipSpaces();

if (index >= length) {

return undefined;

}

token = scanNumber();

if (typeof token !== 'undefined') {

return token;

}

token = scanOperator();

if (typeof token !== 'undefined') {

return token;

}

token = scanIdentifier();

if (typeof token !== 'undefined') {

return token;

}

throw new SyntaxError('Unknown token from character ' + peekNextChar());

}

ok，完成了，demo可以见http://jsbin.alif2e.com/xab/3，我们完成了第一步，词法解析

应用限流策略(待写)

发表回复

令牌桶算法及解释

http://www.cnblogs.com/zhengyun_ustc/archive/2012/11/17/topic1.html

nodejs令牌桶实现

https://github.com/jhurliman/node-rate-limiter

走redis的

https://github.com/joshdevins/node-rate-limiter-proxy/blob/master/node-rate-limiter-proxy.js

https://github.com/ivolo/express-rate

https://github.com/ded/express-limiter

https://github.com/tj/node-ratelimiter

基于stream

https://github.com/einaros/ratelimit

强制限流

https://github.com/AdamPflug/express-brute

loopback的

http://strongloop.com/strongblog/node-js-loopback-api-gateway-sample-applications/

https://github.com/strongloop/loopback-gateway

基于ip

https://github.com/cloudkick/rate-limiter

nodejs应用安全方案

发表回复

1.安全相关http头控制

X-XSS-Protection

http://wangye.org/blog/archives/596/

默认开启此头，提供配置关闭这个头，因为这个头可能会对页面内脚本造成影响。

X-Content-Type-Options:nosniff
默认开启减少 MIME 类型的安全风险,主要防范MIME sniffing功能的跨站点脚本攻击 http://tech.hexun.com/2009-03-02/115137005.html
http://technet.microsoft.com/zh-cn/gg622941(v=vs.85)

X-Download-Options:noopen
默认开启，禁止浏览器打开下载的文件。让浏览器随便打开这些用户上载的文件，非常危险。http://www.cnblogs.com/kaneboy/archive/2011/05/16/2437077.html

X-Powered-By
为了隐藏服务器细节，防止针对性的漏洞攻击，默认设置为null。用户可以自定义。

X-Frame-Options 主要为了防止页面内嵌iframe造成攻击，为了避免影响页面其他需求，提供三个属性可以让用户配置，DENY,SAMEORIGIN,ALLOW-FROM
https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options?redirectlocale=en-US&redirectslug=The_X-FRAME-OPTIONS_response_header

Strict-Transport-Security 主要为了使用户在使用http访问要求用https访问的网页时，自动跳转到http。

Access-Control-Allow-Origin
禁止使用*,限制在白名单内，且跨域请求必须经过审核才可以上线。

2.模板引擎层面控制

模版引擎默认转码。
提供七个工具函数做为输出转码工具：

HTML转义：escapeHtml

XML转义：escapeXml()

文本转义 escapeText

JS转义：escapeJs

URL转义：escapeUrl

URL安全转义：escapeSeUrl 转义时同时检查是否是安全url

JSON转义：escapeJson 对json的value进行html和javascript转义

3.应用层控制

重写redirect

加入白名单，若出现不良跳转（如攻击者构造url）一律block掉。

sla限流策略

对应用限制最大连接数，防止崩坏

禁止trace

关闭应用对trace方法的支持

crossdomain

对于涉及flash的站点，提供corssdomain文件，但是限制其访问的域
http://blog.csdn.net/summerhust/article/details/7721627

4.csrf攻击防御与jsonp安全策略

1、登陆状态下，所有请求默认强制校验cToken。可以绕过但是绕过之后，则强制检查请求Reffer是否在白名单中，也可以额外添加信任的域名。

2、对callback做长度(128字符)和字符([0-9a-zA-Z_])限制,对输出json数据过滤。防止utf-7攻击，flash，xss。

3、ContentType标准化, json为application/json, jsonp为application/javascript。应用层面已经实现并且挂载了nosniff

4、对jsonp输出内容前，加了2个\r\n。配合防止utf-7，flash攻击。

5.CSP(Content Security Policy)

cors,postmessage,eventsource相关

发表回复

http://www.ibm.com/developerworks/cn/web/1301_jiangjj_html5message/

https://developer.mozilla.org/zh-CN/docs/Server-sent_events/Using_server-sent_events

https://github.com/Yaffle/EventSource

ajax分段上传

http://www.atatech.org/article/detail/11502/0

cors

http://www.atatech.org/article/detail/9010/0

做真正的全栈开发工程师(1)

发表回复

最近我厂的前后端分离非常火。很多同事也在研究。但事实上给我启发最大的是http://www.zhihu.com/question/23512853 这个问答第一个回答：

1，不可忽视的后端技术门槛。
不能不提这茬，即便midway很务实的只挑选了视图层作为主攻方向，但不可避免的控制器层还会带进来大量技术问题需要解决，比如配管、部署、日志监控、运维工具、SOA、加解密、事务、缓存策略、消息队列、异步调用、安全问题，总有避不开的暗礁。对阿里目前的后端技术栈来说，这些技术背后是无数的系统和平台，缺一不可，midway目前还是个玩具。更何况nodejs/web framework本身都在飞速演变之中，ES5到ES6，技术特性变化剧烈。即便由前期探路者完成了基础设施建设，后期他人进入的学习成本也非常高。时间长了，前端工程师本身又自然会分化成纯前端和nodejs工程师，如此前后端天然又产生了隔阂，呵呵，分久必合，合久必分。

事实上阿里巴巴有非常多非常多的平台，但对于我这个前端工程师来讲，很多东西在我的知识体系内都无法理解。为了让自己真正能“进化”成一个有理想有抱负的工程师，我计划学习后端相关的内容。

1 日志解析我来公司做的第一个项目就是基于日志解析出的结果来做的，但如何从海量的日志中解析出东西？

2 事务事务这种东西应用在什么场景上？

3 消息队列，同事务

4 后端安全，如何保证服务器的稳定性？如何保证服务器在出错或者高并发之类不会挂掉？

5 监控监控一个系统是否稳定，指标是什么？如何通过某种具体场景来检验/测试某系统的稳定性？

6 数据库操作事务脏读，不可重复读，幻读都怎样避免？

7 接口设计，如何设计一个优雅的restful接口？

8 多线程，多进程，多核。。

今天的收获 http://www.cnblogs.com/adforce/archive/2011/04/20/2021929.html

脏读、不可重复读共享锁、悲观锁和事务五种隔离级别

浏览器缩放检测

发表回复

测试代码

http://jsbin.com/dipijeqi/11

效果：

chrome

window.devicePixelRatio : 2 (准确)
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 2
document.documentElement.offsetHeight / window.innerHeight : 0.020618556701030927 (有相关性)
window.top.outerWidth / window.top.innerWidth : 2

ff
window.devicePixelRatio : 1.5 (准确)
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 1.0114583333333333
document.documentElement.offsetHeight / window.innerHeight : 0.023391812865497075 (有相关性)
window.top.outerWidth / window.top.innerWidth : 1.0114583333333333
ie 8
window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1.5416666666666667 (大致准确)
window.outerWidth / window.innerWidth : NaN
document.documentElement.offsetHeight / window.innerHeight : NaN
window.top.outerWidth / window.top.innerWidth : NaN

ie11
window.devicePixelRatio : 1.5 (准确)
screen.deviceXDPI / screen.logicalXDPI : 1.5
window.outerWidth / window.innerWidth : 1.0084033613445377
document.documentElement.offsetHeight / window.innerHeight : 0.02203856749311295 (有相关性)
window.top.outerWidth / window.top.innerWidth : 1.0084033613445377
ie10
window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1.5 (准确)
window.outerWidth / window.innerWidth : 1.0084033613445377
document.documentElement.offsetHeight / window.innerHeight : 1
window.top.outerWidth / window.top.innerWidth : 1.0084033613445377
ie9
window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1.5 (准确)
window.outerWidth / window.innerWidth : 1.0084033613445377
document.documentElement.offsetHeight / window.innerHeight : 1
window.top.outerWidth / window.top.innerWidth : 1.0084033613445377

360 6.3(完全没反应)

window.devicePixelRatio : undefined
screen.deviceXDPI / screen.logicalXDPI : 1
window.outerWidth / window.innerWidth : NaN
document.documentElement.offsetHeight / window.innerHeight : NaN
window.top.outerWidth / window.top.innerWidth : NaN

360极速浏览器
window.devicePixelRatio : 1
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 1.5
document.documentElement.offsetHeight / window.innerHeight : 0.015267175572519083
window.top.outerWidth / window.top.innerWidth : 1.5(准确)

搜狗高速浏览器 (完全没反应)

window.devicePixelRatio : 1
screen.deviceXDPI / screen.logicalXDPI : NaN
window.outerWidth / window.innerWidth : 2.0710059171597632 (大致准确)
document.documentElement.offsetHeight / window.innerHeight : 0.022988505747126436
window.top.outerWidth / window.top.innerWidth : 2.0710059171597632

在canvas中插入html(网页截图技术的实现)(翻译稿)

发表回复

mdn上翻译的文章，里面其实涉及了非常多的知识，值得学习，这个技术也是一些在线截图工具的解决方案吧。。

https://developer.mozilla.org/zh-CN/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

尽管不常见(出于安全考虑), 但是将DOM内容—比如HTML—绘制到画布中是有可能的. 这篇文章源自Robert O’Callahan的博客, 讲到如何有把握地, 安全地实现它, 并且按照规范来.

概览

你不能把HTML画到canvas上。相反,你需要使用一个SVG图像,其中包含你想要呈现的内容。可以使用<foreignobject> 元素包含HTML内容,之后把这个svg绘制到你的canvas中。

步骤

唯一真正棘手的事情——这可能是一个夸张——创建SVG图像。所有你需要做的是创建一个包含XML字符串的SVG，然后按照下面的步骤构造一个 Blob

blob对象的媒体类型mime为 “image/svg+xml”.
<svg> 元素.
在svg元素中包含 <foreignobject> 元素.
(格式化好的) HTML ,被包裹到<foreignobject>中.

By using a object URL as described above, we can inline our HTML instead of having to load it from an external source. You can, of course, use an external source if you prefer, as long as the origin is the same as the originating document.

如上所述通过使用一个object URL,我们可以内联HTML而不是从外部源加载它。当然,如果你喜欢你可以使用外部源,只要域与原始文件相同。

Example

<!DOCTYPE html>
<html>
<body>
<p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                 "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +

"<foreignObject width='100%' height='100%'>" +

"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +

"<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +

"</div>" +

"</foreignObject>" +

"</svg>";

var DOMURL = self.URL || self.webkitURL || self;

var img = new Image();

var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

var url = DOMURL.createObjectURL(svg);

img.onload = function() {

ctx.drawImage(img, 0, 0);

DOMURL.revokeObjectURL(url);

};

img.src = url;

</script>

</body>

</html>

例子的效果:

data变量设置了SVG图像的内容(这包括HTML)我们希望绘制到我们的canvas中。

通过调用 new Image()我们建立一个新的html <img> 元素,添加数据进去，指定一个object URL, 之后在图片onload的时候调用 drawImage() 来把图片绘制到画布中.

安全性

您可能想知道这种方式是否安全,担心canvas会读取敏感数据。答案是这样的:这个解决方案的实现依赖的SVG图像是非常严格的。SVG图像不允许加载任何外部资源,即使似乎来自同一个域。资源(如栅格图像(如JPEG图像)或<iframe>s 需要用 data: URIs来内联引入.

此外,你不能在一个SVG图像中引入脚本文件,所以没有从其他脚本访问DOM的风险,而且DOM元素在SVG图像中不能接收事件的输入,所以没有办法通过把隐私信息加载到一个表单控件(如一个文件的完整路径 <input> 元素)然后渲染出来,之后通过读取像素把这些信息取出。

访问过的链接风格并不应用于SVG图像中呈现的链接,所以历史信息也不能被检索,本地的主题也不呈现在SVG图像中,这使得它很难确定用户的平台。(这里的意思应该是windows跟mac风格吧)

生成的canvas元素是纯净的,意味着你可以通过调用 toBlob(function(blob){…})来返回canvas的blob ，或者 toDataURL()来返回 Base64-编码的 data: URI.

Testing origin from their containing documents.

绘制HTML

SVG必须是合法的XML，你需要解析并把HTML转为规范的符合格式的。下面的代码可以很方便的解析HTML

var doc = document.implementation.createHTMLDocument("");
doc.write(html);

// You must manually set the xmlns if you intend to immediately serialize the HTML
// document to a string as opposed to appending it to a <foreignObject> in the DOM
doc.documentElement.setAttribute("xmlns", doc.documentElement.namespaceURI);

// Get well-formed markup
html = (new XMLSerializer).serializeToString(doc);

var doc = document.implementation.createHTMLDocument("");

doc.write(html);

// You must manually set the xmlns if you intend to immediately serialize the HTML

// document to a string as opposed to appending it to a <foreignObject> in the DOM

doc.documentElement.setAttribute("xmlns", doc.documentElement.namespaceURI);

// Get well-formed markup

html = (new XMLSerializer).serializeToString(doc);

git如何处理别人的pull request及解决冲突

发表回复

出过两次了，每次都查很多资料，太蛋疼，记录在此。

当你的项目比较牛逼的时候，有人给你贡献代码，但他修改的地方恰恰你前阵子也修改了，这样在github中就不能够自动merge了。

因此你需要手动去解决冲突。首先要在本机安装好命令行工具gitbash，之后用clone拉下你的项目，之后

按照以下命令输入

git checkout -b 某人-master master

git pull https//github.com/某人的/某项目的.git master

git checkout -b 某人-master master

git pull https//github.com/某人的/某项目的.git master

这时候命令行会提示你有冲突，冲突文件是啥，那如何解决冲突呢，很简单

在同步代码的过程中，git会自动检查冲突，并尝试进行**自动合并**。最好的情况应该是大家同时修改一个文件，但是大家修改的地方不同了。在这样的情况下，git会进行非冲突合并，这时，在调用 git pull 的时候，git会尝试进行非冲突合并。
而在合并过程中有冲突的时候， git 会把修改记录直接保存在文件中，让开发者判断文件如何解决合并。例如，在一个描述文件中同时修改了一句话，在合并的时候，git会这么做：

<<<<<<< HEAD
It's not a project cool enough for you to enjoy the code but a mix of my thoughts in the year 2012~2013. I didn't know where the project leads to. Hope it will became useful after practice.
=======
It's not a project cool enough for you to enjoy the code but it's a mix of my thoughts in the year 2012~2013. I didn't know where the project leads to. Hope it will became useful after practice.
>>>>>>> 2b41083cf969979d8e4a1eedc987976af544d129

<<<<<<< HEAD

It's not a project cool enough for you to enjoy the code but a mix of my thoughts in the year 2012~2013. I didn't know where the project leads to. Hope it will became useful after practice.

=======

It's not a project cool enough for you to enjoy the code but it's a mix of my thoughts in the year 2012~2013. I didn't know where the project leads to. Hope it will became useful after practice.

>>>>>>> 2b41083cf969979d8e4a1eedc987976af544d129

即把两个更改都写在文件上，但是用=======来区别发生冲突的位置，在=======以上是 HEAD，即本地的代码；而=======以下则是来自远程的更改了。这个时候，你可以选择保留远程或本地的修改或者都不要（简单地说，把不需要的内容删除即可）。

也就是说我们把文件修改好后，把增加的那几行head >>><<<之类删掉就ok啦。之后冲突修改完毕，我们继续输入

git commit -a //把修改提交到这个人的分支上，会提示你成功merge本地代码到这个人的代码库

git checkout master //切换到自己的分支上

git merge 某人-master //把那个人的分支merge到你的主干上

git push origin master //push上去，成功！

git commit -a //把修改提交到这个人的分支上，会提示你成功merge本地代码到这个人的代码库

git checkout master //切换到自己的分支上

git merge 某人-master //把那个人的分支merge到你的主干上

git push origin master //push上去，成功！

还要记着一点，本地修改代码前一定要先pull一下看看，记得慎用github的在线编辑功能

node-sass的介绍及使用(官方文档)

发表回复

其实我很少写第三方库的介绍的，主要是node-sass确实蛮好用，而且我对ruby缺乏好感。。

node-sass

Node-sass is a library that provides binding for Node.js to libsass, the C version of the popular stylesheet preprocessor, Sass.

It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.

node-sass提供了一个nodejs到libsass的桥梁.libsass是广受欢迎的css预处理器sass的c版本.

这个东东提供了难以想象的效率来本地编译sass到css文件，甚至可以通过中间件的方式自动编译。

Find it on npm: https://npmjs.org/package/node-sass

Install 安装

npm install node-sass

1	npm install node-sass

Usage 使用

var sass = require('node-sass');
sass.render({
    file: scss_filename,
    success: callback
    [, options..]
    });
// OR
var css = sass.renderSync({
    data: scss_content
    [, options..]
});

var sass = require('node-sass');

sass.render({

file: scss_filename,

success: callback

[, options..]

});

// OR

var css = sass.renderSync({

data: scss_content

[, options..]

});

Options 选项（这里仔细看）

The API for using node-sass has changed, so that now there is only one variable – an options hash. Some of these options are optional, and in some circumstances some are mandatory.

node-sass的api已经变化，只需要一个参数-options对象。有些选项是可选的，有些选项在某种环境下是必须的。

file

file is a String of the path to an scss file for libsass to render. One of this or data options are required, for both render and renderSync.

file表示libsass需要编译的文件，以字符串表示。这个选项或者data选项必须在render或者renderSync中指定

data

data is a String containing the scss to be rendered by libsass. One of this or file options are required, for both render and renderSync. It is recommended that you use the includePaths option in conjunction with this, as otherwise libsass may have trouble finding files imported via the @import directive.

data表示scss字符串.这个选项或file选项必须在在render或者renderSync中指定.我们建议你使用includePaths选项来为@import(sass中的import命令)指定来源,不然有些时候libsass在寻找@import引入的文件时会出错

success

success is a Function to be called upon successful rendering of the scss to css. This option is required but only for the render function. If provided to renderSync it will be ignored.

当scss被编译为css后,success指定的函数被调用.这个选项在render函数中是必须的,但renderSync会忽略

error

error is a Function to be called upon occurance of an error when rendering the scss to css. This option is optional, and only applies to the render function. If provided to renderSync it will be ignored.

当scss被编译为css的过程中出错,error指定的函数被调用.这个选项在render函数中是可选的,但renderSync会忽略

includePaths

includePaths is an Array of path Strings to look for any @imported files. It is recommended that you use this option if you are using the data option and have any @import directives, as otherwise libsass may not find your depended-on files.

includePaths是一个由字符串组成的数组,表示路径,来表明任何@imported所引入的文件在哪。如果你使用了data选项,且包含@import,建议你使用这个选项,否则libsass可能找不到依赖文件。

imagePath

imagePath is a String that represents the public image path. When using the image-url() function in a stylesheet, this path will be prepended to the path you supply. eg. Given an imagePath of /path/to/images, background-image: image-url('image.png') will compile to background-image: url("/path/to/images/image.png")

imagePath 表示图片路径. 当在样式表中使用 image-url() 函数时, 这个函数将会载入你用imagePath指定的图片路径比如说你设置了imagePath为/path/to/images，样式表中写的是background-image: image-url(‘image.png’)，将会被编译为 background-image: url("/path/to/images/image.png")

outputStyle

outputStyle is a String to determine how the final CSS should be rendered. Its value should be one of 'nested', 'expanded', 'compact', 'compressed'. [Important: currently the argument outputStyle has some problem which may cause the output css becomes nothing because of the libsass, so you should not use it now!]

outputStyle是一个字符串，表示最终的CSS是什么样的。它的值应该是下列值其中一个：“nested”,“expanded”,“compact”,“compressed”。(重要:目前outputStyle有一些问题,libsass的缘故可能会导致不输出css,所以建议现在不应该使用!)

sourceComments

sourceComments is a String to determine what debug information is included in the output file. Its value should be one of 'none', 'normal', 'map'. The default is 'none'. The map option will create the source map file in your CSS destination. [Important: souceComments is only supported when using the file option, and does nothing when using data flag.]

sourceMap

If your sourceComments option is set to map, sourceMap allows setting a new path context for the referenced Sass files. The source map describes a path from your CSS file location, into the the folder where the Sass files are located. In most occasions this will work out-of-the-box but, in some cases, you may need to set a different output.

Examples

var sass = require('node-sass');
sass.render({
    data: 'body{background:blue; a{color:black;}}',
    success: function(css){
        console.log(css)
    },
    error: function(error) {
        console.log(error);
    },
    includePaths: [ 'lib/', 'mod/' ],
    outputStyle: 'compressed'
});
// OR
console.log(sass.renderSync({
    data: 'body{background:blue; a{color:black;}}',
    outputStyle: 'compressed'
}));

var sass = require('node-sass');

sass.render({

data: 'body{background:blue; a{color:black;}}',

success: function(css){

console.log(css)

error: function(error) {

console.log(error);

includePaths: [ 'lib/', 'mod/' ],

outputStyle: 'compressed'

});

// OR

console.log(sass.renderSync({

data: 'body{background:blue; a{color:black;}}',

outputStyle: 'compressed'

}));

Edge-case behaviours

In the case that both file and data options are set, node-sass will only attempt to honour the filedirective.
当file跟data选项都设置了，node-sass只会以file选项为准

Connect/Express middleware

connect跟express的中间件

Recompile .scss files automatically for connect and express based http servers

下面的例子可以让node-sass变为express/connect的中间件，来自动编译scss文件

var server = connect.createServer(
  sass.middleware({
      src: __dirname
    , dest: __dirname + '/public'
    , debug: true
    , outputStyle: 'compressed'
    , prefix:  '/prefix'
  }),
  connect.static('/prefix', __dirname + '/public')
);

var server = connect.createServer(

sass.middleware({

src: __dirname

, dest: __dirname + '/public'

, debug: true

, outputStyle: 'compressed'

, prefix: '/prefix'

}),

connect.static('/prefix', __dirname + '/public')

);

Heavily inspired by https://github.com/LearnBoost/stylus

DocPad Plugin docpad的插件

@jking90 wrote a DocPad plugin that compiles .scss files using node-sass:https://github.com/jking90/docpad-plugin-nodesass

Grunt extension grunt的插件(grunt的sass插件就是基于这货)

@sindresorhus has created a set of grunt tasks based on node-sass: https://github.com/sindresorhus/grunt-sass

Gulp extension gulp的插件

@dlmanning has created a gulp sass plugin based on node-sass: https://github.com/dlmanning/gulp-sass

Harp

@sintaxi’s Harp web server implicitly compiles .scss files using node-sass: https://github.com/sintaxi/harp

Meteor plugin

@fourseven has created a meteor plugin based on node-sass: https://github.com/fourseven/meteor-scss

Mimosa module

@dbashford has created a Mimosa module for sass which includes node-sass:https://github.com/dbashford/mimosa-sass

Example App

There is also an example connect app here: https://github.com/andrew/node-sass-example

Rebuilding binaries

Node-sass includes pre-compiled binaries for popular platforms, to add a binary for your platform follow these steps:

Check out the project:

git clone https://github.com/andrew/node-sass.git cd node-sass git submodule init git submodule update npm install npm install -g node-gyp node-gyp rebuild

1	git clone https://github.com/andrew/node-sass.git cd node-sass git submodule init git submodule update npm install npm install -g node-gyp node-gyp rebuild

Replace the prebuild binary with your newly generated one

cp build/Release/binding.node precompiled/*your-platform*/binding.node

1	cp build/Release/binding.node precompiled/your-platform/binding.node

Command Line Interface

The interface for command-line usage is fairly simplistic at this stage, as seen in the following usage section.

Output will be saved with the same name as input SASS file into the current working directory if it’s omitted.

使用命令行接口是相当简单的,见以下使用部分。
若不指定输出文件，输出文件名将与输入的SASS文件名相同，且保存到当前工作目录。

Usage

node-sass [options] <input.scss> [<output.css>]

Options:

 --output-style CSS output style (nested|expanded|compact|compressed) [default: "nested"] --source-comments Include debug info in output (none|normal|map) [default: "none"] --include-path Path to look for @import-ed files [default: cwd] --help, -h Print usage info

1	--output-style CSS output style (nested\|expanded\|compact\|compressed) [default: "nested"] --source-comments Include debug info in output (none\|normal\|map) [default: "none"] --include-path Path to look for @import-ed files [default: cwd] --help, -h Print usage info

Post-install Build

Install runs a series of Mocha tests to see if your machine can use the pre-built libsass which will save some time during install. If any tests fail it will build from source.

If you know the pre-built version will work and do not want to wait for the tests to run you can skip the tests by setting the environment variable SKIP_NODE_SASS_TESTS to true.

 SKIP_NODE_SASS_TESTS=true npm install

1	SKIP_NODE_SASS_TESTS=true npm install

Contributors

Special thanks to the following people for submitting patches:

Dean Mao Brett Wilkins litek gonghao Dylan Greene

Note on Patches/Pull Requests

Fork the project.
Make your feature addition or bug fix.
Add documentation if necessary.
Add tests for it. This is important so I don’t break it in a future version unintentionally.
Send a pull request. Bonus points for topic branches.

上回我们研究了一下词法分析的原理跟简单实现，那么这篇我们来了解下编译器中更加复杂的 语法分析的实现。

1.安全相关http头控制

2.模板引擎层面控制

3.应用层控制

重写redirect

sla限流策略

禁止trace

crossdomain

4.csrf攻击防御与jsonp安全策略

5.CSP(Content Security Policy)

概览

步骤

Example

安全性

绘制HTML

See also

node-sass

Install 安装

Usage 使用

Options 选项（这里仔细看）

file

data

success

error

includePaths

imagePath

outputStyle

sourceComments

sourceMap

Examples

Edge-case behaviours

Connect/Express middleware

DocPad Plugin docpad的插件

Grunt extension grunt的插件(grunt的sass插件就是基于这货)

Gulp extension gulp的插件

Harp

Meteor plugin

Mimosa module

Example App

Rebuilding binaries

Command Line Interface

Usage

Post-install Build

Contributors

Note on Patches/Pull Requests

Copyright

上回我们研究了一下词法分析的原理跟简单实现，那么这篇我们来了解下编译器中更加复杂的语法分析的实现。