赞
踩
本篇先简单介绍模板字面量及标签模板,再引出其应用——防止XSS攻击
- <div id="es6"></div>
- <script>
- var es6 = document.querySelector('#es6');
- var es6words = '我是es6的模板字面量!';
-
- es6.innerHTML = `<p>
- Hello!这里是es6!${es6words}我的写法很简洁
- </p>`
- </script>
- <div id="es5"></div>
- <script>
- var es5 = document.querySelector('#es5');
- var es5words = '我是es5的传统输出模板!';
-
- es5.innerHTML = '<p>Hi!这里是es5'
- + es5words +
- '我的写法很麻烦</p>';
- </script>
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}`;
- 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);
- 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>`;
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。