Node.js 服務(wù)器端渲染（SSR）

1.11.1 【必須】安全的Vue服務(wù)器端渲染(Vue SSR)

• 禁止直接將不受信的外部?jī)?nèi)容傳入{{{ data }}}表達(dá)式中

• 模板內(nèi)容禁止被污染

// bad: 將用戶輸入替換進(jìn)模板
const app = new Vue({
    template: appTemplate.replace("word", __USER_INPUT__),
});
renderer.renderToString(app);

• 對(duì)已渲染的HTML文本內(nèi)容（renderToString后的html內(nèi)容）。如需再拼不受信的外部輸入，應(yīng)先進(jìn)行安全過(guò)濾，具體請(qǐng)參考1.6.3

// bad: 渲染后的html再拼接不受信的外部輸入
return new Promise(((resolve) => {
    renderer.renderToString(component, (err, html) => {
        let htmlOutput = html;
        htmlOutput += `${__USER_INPUT__}`;
        resolve(htmlOutput);
    });
}));

1.11.2 【必須】安全地使用EJS、LoDash、UnderScore進(jìn)行服務(wù)器端渲染

• 使用render函數(shù)時(shí)，模板內(nèi)容禁止被污染

lodash.Template:

  // bad: 將用戶輸入送進(jìn)模板
  const compiled = _.template(`<b>${__USER_INPUT__}<%- value %></b>`);
  compiled({ value: "hello" });

ejs:

  // bad: 將用戶輸入送進(jìn)模板
  const ejs = require("ejs");
  const people = ["geddy", "neil", "alex"];
  const html = ejs.render(`<%= people.join(", "); %>${__USER_INPUT__}`, { people });

• Ejs、LoDash、UnderScore提供的HTML插值模板默認(rèn)形似<%= data %>，盡管在默認(rèn)情況下<%= data %>存在過(guò)濾，在編寫HTML插值模板時(shí)需注意:

1. 用戶輸入流入html屬性值時(shí)，必須使用雙引號(hào)包裹：<base data-id = "<%= __USER_INPUT__ %>">
2. 用戶輸入流入<script></script>標(biāo)簽或on*的html屬性中時(shí)，如<script>var id = <%= __USER_INPUT__ %></script> ，須按照1.6.3中的做法或白名單方法進(jìn)行過(guò)濾，框架/組件的過(guò)濾在此處不起作用

1.11.3 【必須】在自行實(shí)現(xiàn)狀態(tài)存儲(chǔ)容器并將其JSON.Stringify序列化后注入到HTML時(shí)，必須進(jìn)行安全過(guò)濾