前端防XSS攻击——模板字面量(模板字符串)之模板标签的应用
本篇先简单介绍模板字面量及标签模板,再引出其应用——防止XSS攻击
一.简介模板字面量(即模板字符串,MDN已更新为"模板字面量"的说法,此文以后都用“模板字面量”)
ES6中引入了模板字面量来代替传统JS的输出模板,直接看代码最清楚吧
模板字面量(看es6.innerHTML
段代码):
<div id="es6"></div> <script> var es6 = document.querySelector('#es6'); var es6words = '我是es6的模板字面量!'; es6.innerHTML = `<p> Hello!这里是es6!${es6words}我的写法很简洁 </p>` </script>
显示如下:(注意
上面代码中前后为 `
,而不是 ‘
,我之前就因为打错了傻逼了5分钟)
传统js的输出模板(看es5.innerHTML
段代码):
<div id="es5"></div> <script> var es5 = document.querySelector('#es5'); var es5words = '我是es5的传统输出模板!'; es5.innerHTML = '<p>Hi!这里是es5' + es5words + '我的写法很麻烦</p>'; </script>
显示如下:
相比较之下,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,"<").replace(/>/g,">"); s += templateData[i]; } return s; } var sender = '<script>alert(111)</script>'; var message = SaferHTML`<p>这里面可能有恶意代码,比如${sender}</p>`;
假如你是一个社交网站的用户,你发现发帖子时可以嵌入js脚本的漏洞,于是在内容里写入了一段恶意代码(比如死循环
致浏览器未响应或者无限弹出广告
),如果这篇帖子被发布并且吸引了很多人,后果可想而知。
如果我们对要上传至服务器的内容先进行过滤,则可能可以防止这种情况发生。
相关推荐
zjcheerup 2020-05-14
gaohuirong0 2020-04-08
Hwaphon 2020-04-08
鹤啸九天 2020-04-08
cmsmdn 2020-01-10
GoatSucker 2019-11-08
huizhejian 2019-06-27
VitaLemon 2019-06-27
ThinkingLink 2015-04-21
huangxb00 2014-11-20
88241243 2014-08-29
bangrenzhuce 2016-11-02
82467413 2015-04-13
么么茶技术网录 2019-04-25
黄玮鹏 2012-01-15
ljscoding 2016-06-06
ljscoding 2019-04-09
xiaoheizhuoer 2012-05-23
paiooo 2012-03-21