資訊專欄INFORMATION COLUMN
摘要：如例子中，內(nèi)容被分割為三部分，以及最后空白的存放模板字面量中的第一個變量。如果我們對要上傳至服務器的內(nèi)容先進行過濾，則可能可以防止這種情況發(fā)生。
本篇先簡單介紹模板字面量及標簽模板，再引出其應用——防止XSS攻擊
一.簡介模板字面量（即模板字符串，MDN已更新為"模板字面量"的說法，此文以后都用“模板字面量”）ES6中引入了模板字面量來代替?zhèn)鹘y(tǒng)JS的輸出模板，直接看代碼最清楚吧
模板字面量（看es6.innerHTML段代碼）：
顯示如下：（注意上面代碼中前后為? `? ?，而不是 ‘? ?，我之前就因為打錯了傻逼了5分鐘）
傳統(tǒng)js的輸出模板（看es5.innerHTML段代碼）：
顯示如下：
相比較之下，es6的模板字面量更顯簡潔并容易修改
es6變量嵌入的簡易性使得打代碼時不用再抓狂于傳統(tǒng)js中麻煩的格式
但這只是模板字面量的優(yōu)點之一
這里我們引出它的一個功能——”標簽模板“功能及它的一個重要應用——過濾HTML字符串，防止用戶輸入惡意內(nèi)容（防XSS攻擊）（此應用學習于阮老師的《es6標準入門（第3版）》）
二.標簽模板介紹及其使用”標簽模板“功能：模板字面量可以緊跟在一個函數(shù)名后面，函數(shù)會處理這個模板字面量
舉個最簡單的例子
alert`111`;
相當于
alert(111);
注意，”標簽模板其實不是模板，而是函數(shù)調(diào)用的一種特殊形式。’標簽‘指的就是函數(shù)，緊跟在后面的模板字面量就是它的參數(shù)“
下面我們用代碼說明一下問題，再依次解釋各個形參
var a = "I am a";
var b = "I am b";
function display(stringArr, value1, value2) {
console.log(stringArr);
console.log(value1);
console.log(value2);
}
接著使用字面量模板
display`Hello！ ${a} and ${b}`;
看看控制臺：
各個變量意義：
stringArr：放置所有`不是變量替換的部分`，即把字符串都放進去，且按各變量和頭尾進行分割。如例子中，內(nèi)容被分割為三部分”Hello！“，”and“以及最后空白的”“ value1：存放模板字面量中的第一個變量。如例子中，存放了變量a value2：存放模板字面量中的第二個變量。如例子中，存放了變量b
當然，這種寫法也可以使函數(shù)返回結(jié)果
function display(stringArr, value1, value2) {
console.log(stringArr);
console.log(value1);
console.log(value2);
return "ok";
}
var result = display`Hello！ ${a} and ${b}`;
console.log(result);
結(jié)果如下：
三.標簽模板的應用——過濾HTML字符串，防止用戶輸入惡意內(nèi)容 （XSS攻擊）先貼代碼
function SaferHTML(templateData) {
let s = templateData[0];
for(let i = 1 ; i < arguments.length ; i++){
let arg = String(arguments[i]);
s += arg.replace(/&/g,"&").replace(//g,">");
s += templateData[i];
}
return s;
}
var sender = "";
var message = SaferHTML`這里面可能有惡意代碼，比如${sender}
`;
假如你是一個社交網(wǎng)站的用戶，你發(fā)現(xiàn)發(fā)帖子時可以嵌入js腳本的漏洞，于是在內(nèi)容里寫入了一段惡意代碼（比如死循環(huán)致瀏覽器未響應或者無限彈出廣告），如果這篇帖子被發(fā)布并且吸引了很多人，后果可想而知。
如果我們對要上傳至服務器的內(nèi)容先進行過濾，則可能可以防止這種情況發(fā)生。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108552.html
摘要：字符串模板引擎中的字符串缺乏多行字符串字符串格式化轉(zhuǎn)義等特性。字符串中嵌入變量模板字面量看上去僅僅是普通字符串的升級版，但二者之間真正的區(qū)別在于模板字面量的變量占位符。黑子在上面的代碼中，就是模板標簽。 字符串模板引擎 ES5中的字符串缺乏多行字符串、字符串格式化、HTML轉(zhuǎn)義等特性。 而ES6通過模板字面量的方式進行了填補，模板字面量試著跳出JS已有的字符串體系，通過一些全新的方法來...
摘要：模板轉(zhuǎn)義和模板繼承模板的轉(zhuǎn)義默認會自動轉(zhuǎn)義模板中的內(nèi)容，把標簽轉(zhuǎn)換為相應的實體。這樣可以防止后端為數(shù)據(jù)庫的網(wǎng)站被惡意腳本攻擊。 Tornado模板轉(zhuǎn)義和模板繼承 1.模板的轉(zhuǎn)義 Tornado 默認會自動轉(zhuǎn)義模板中的內(nèi)容，把標簽轉(zhuǎn)換為相應的HTML實體。這樣可以防止后端為數(shù)據(jù)庫的網(wǎng)站被惡意腳本攻擊。比如，你的網(wǎng)站中有一個評論部分，用戶可以在這里添加任何他們想說的文字進行討論。雖然一些...
閱讀 3402·2021-11-24 09:38
閱讀 3188·2021-11-22 09:34
閱讀 2097·2021-09-22 16:03
閱讀 2349·2019-08-29 18:37
閱讀 370·2019-08-29 16:15
閱讀 1760·2019-08-26 13:56
閱讀 853·2019-08-26 12:21
閱讀 2197·2019-08-26 12:15
