前端防XSS攻击——模板字面量（模板字符串）之模板标签的应用

nifhlheimr 发布于2019-08-26 12:21 / 856人阅读

摘要：如例子中，内容被分割为三部分，以及最后空白的存放模板字面量中的第一个变量。如果我们对要上传至服务器的内容先进行过滤，则可能可以防止这种情况发生。

本篇先简单介绍模板字面量及标签模板，再引出其应用——防止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 模板标签前端模板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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