node服务器渲染

当浏览器请求到node的路由，以详情页（./details/52314 数字部分为详情id）请求为比方，根据请求地址，node的路由会转发到详情页的逻辑处理中，由于详情页中带着ID，

模板渲染

node模板渲染过程。.png

• xss（跨站脚本）过滤、模板helper函数

使用node的VM模块将数据渲染成模板；

var vm =  require('vm');
var data = {
    name:"小余"
}
console.log(vm.runInNewContext("`<h2>${data.name}</h2>`",{data}))
运行结果：<h2>小余</h2>

当数据改成标签；

var vm =  require('vm');
var data = {
    name:"<script></script>"
}
console.log(vm.runInNewContext("`<h2>${data.name}</h2>`",{data}))
运行结果：<h2><script></script></h2>

script标签被原封不动的渲染在H2标签内，如果script内部有代码出现，它将在浏览器渲染后，马上被执行。

所以我们需要一个xss过滤函数；

var vm = require('vm');
// var data = {
//     name:"小余"
// }
var data = {
    name: "<script></script>"
}
console.log(vm.runInNewContext("`<h2>${filterXss(data.name)}</h2>`", {
    data, filterXss: function (str) {
        if (!str) return "";
        return String(str).replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, "&quot;").replace(/'/g, "&#039;");
    }
}))
运行结果：<h2>&lt;script&gt;&lt;/script&gt;</h2>

helper函数和上述的filterXss函数写法是一样的。

• include子模板

var vm = require('vm');
// var data = {
//     name:"小余"
// }
var data = {
    name: "<script></script>"
}
console.log(vm.runInNewContext("`<h2>${filterXss(data.name)}</h2>`", {
    data, filterXss: function (str) {
        if (!str) return "";
        return String(str).replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, "&quot;").replace(/'/g, "&#039;");
    }
}))