前端防XSS攻擊——模板字面量（模板字符串）之模板標簽的應用

nifhlheimr 發布于2019-08-26 12:21 / 865人閱讀

摘要：如例子中，內容被分割為三部分，以及最后空白的存放模板字面量中的第一個變量。如果我們對要上傳至服務器的內容先進行過濾，則可能可以防止這種情況發生。

本篇先簡單介紹模板字面量及標簽模板，再引出其應用——防止XSS攻擊

一.簡介模板字面量（即模板字符串，MDN已更新為"模板字面量"的說法，此文以后都用“模板字面量”）

ES6中引入了模板字面量來代替傳統JS的輸出模板，直接看代碼最清楚吧

模板字面量（看es6.innerHTML段代碼）：

顯示如下：（注意上面代碼中前后為? `? ?，而不是 ‘? ?，我之前就因為打錯了傻逼了5分鐘）

傳統js的輸出模板（看es5.innerHTML段代碼）：

顯示如下：

相比較之下，es6的模板字面量更顯簡潔并容易修改

es6變量嵌入的簡易性使得打代碼時不用再抓狂于傳統js中麻煩的格式

但這只是模板字面量的優點之一

這里我們引出它的一個功能——”標簽模板“功能及它的一個重要應用——過濾HTML字符串，防止用戶輸入惡意內容（防XSS攻擊）（此應用學習于阮老師的《es6標準入門（第3版）》）

二.標簽模板介紹及其使用

”標簽模板“功能：模板字面量可以緊跟在一個函數名后面，函數會處理這個模板字面量

舉個最簡單的例子

alert`111`;

相當于

alert(111);

注意，”標簽模板其實不是模板，而是函數調用的一種特殊形式。’標簽‘指的就是函數，緊跟在后面的模板字面量就是它的參數“

下面我們用代碼說明一下問題，再依次解釋各個形參

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：放置所有`不是變量替換的部分`，即把字符串都放進去，且按各變量和頭尾進行分割。如例子中，內容被分割為三部分”Hello！“，”and“以及最后空白的”“

value1：存放模板字面量中的第一個變量。如例子中，存放了變量a

value2：存放模板字面量中的第二個變量。如例子中，存放了變量b

當然，這種寫法也可以使函數返回結果

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);

結果如下：

三.標簽模板的應用——過濾HTML字符串，防止用戶輸入惡意內容（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}
`;

假如你是一個社交網站的用戶，你發現發帖子時可以嵌入js腳本的漏洞，于是在內容里寫入了一段惡意代碼（比如死循環致瀏覽器未響應或者無限彈出廣告），如果這篇帖子被發布并且吸引了很多人，后果可想而知。

如果我們對要上傳至服務器的內容先進行過濾，則可能可以防止這種情況發生。

云服務器 GPU云服務器模板標簽 dede模板標簽 asp 模板標簽前端模板

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108552.html

說說對JSX的認識

摘要：認識引子最近幾個月做的一個項目，使用了技術體系，自然而然的用到了。下面就總結一下自己對的認識。而這無疑增加了框架的門檻和復雜度。在被渲染之前，所有的數據都被轉義成為了字符串處理。以避免跨站腳本攻擊。表示對象將編譯成調用。 JSX認識引子最近幾個月做的一個項目，使用了react技術體系，自然而然的用到了JSX。下面就總結一下自己對JSX的認識。什么是JSX 即JavaScript...

clasnake 2019-08-20 16:20 評論0 收藏0
ES6—字符串模板引擎（4）

摘要：字符串模板引擎中的字符串缺乏多行字符串字符串格式化轉義等特性。字符串中嵌入變量模板字面量看上去僅僅是普通字符串的升級版，但二者之間真正的區別在于模板字面量的變量占位符。黑子在上面的代碼中，就是模板標簽。字符串模板引擎 ES5中的字符串缺乏多行字符串、字符串格式化、HTML轉義等特性。而ES6通過模板字面量的方式進行了填補，模板字面量試著跳出JS已有的字符串體系，通過一些全新的方法來...

cnio 2019-08-23 17:17 評論0 收藏0
Tornado-06、Tornado模板轉義和模板繼承

摘要：模板轉義和模板繼承模板的轉義默認會自動轉義模板中的內容，把標簽轉換為相應的實體。這樣可以防止后端為數據庫的網站被惡意腳本攻擊。 Tornado模板轉義和模板繼承 1.模板的轉義 Tornado 默認會自動轉義模板中的內容，把標簽轉換為相應的HTML實體。這樣可以防止后端為數據庫的網站被惡意腳本攻擊。比如，你的網站中有一個評論部分，用戶可以在這里添加任何他們想說的文字進行討論。雖然一些...

levius 2019-07-31 11:05 評論0 收藏0