ES6-模板字符串（标签模板-XSS攻击）

• 1. 模板字符串
  • 保存字符串中的格式
  • 使用变量/常量或者表达式/方法
• 2. 标签模板 函数调用的特殊形式
  • 使用形式
  • 过滤HTML字符串 防XSS攻击

1. 模板字符串

ES6中引入的新的声明字符串的方式 xxxxx
ES5声明字符串的方式 '' 和 ""

保存字符串中的格式

可以在内容中出现换行符

var str = `
    <div>1</div>
    <div>2</div>
    <p>3</p>
`

使用变量/常量或者表达式/方法

• 使用形式：${xxx}

var xm = {
    age:18,
    height:180,
    name:'xiaoming'
}
var { age ,name, height } =xm;
var str = 'name' + name + 'age' + age + 'height' + height;
var newStr = `name: ${name} age: ${age} height: ${height}`; 
str === newStr // true

2. 标签模板 函数调用的特殊形式

使用形式

• 函数名xxx ${params} xxx
• 函数的第一位参数是数组 存放的是模板字面量``中 所有的非参数集合
• 非参数集合的最后一位是个空字符串
• 函数的剩余的参数对应调用时传递的参数(${params})

function say(str, name, city) {
    console.log(str)  // ['Hello ', ', Welcome to ', '']
    console.log(name) // xxx
    console.log(city) // BeiJing
}
const name = 'xxx'
const city = 'BeiJing'
say`Hello ${name} ,Welcome to ${city}`

过滤HTML字符串 防XSS攻击

• 可以利用标签模板 对用户输入的内容进行处理 避免用户输入异常的js代码 对网页及浏览器造成影响

// 点击出现弹窗的代码经过处理（替换特殊字符）后 显示的只是字符串 不会按照js代码来执行
function SaferHTML(templateData) {
    let s = templateData[0];
    for (let i = 1; i < arguments.length; i++) {
        let arg = String(arguments[i]);
    
        s += arg.replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;");
        s += templateData[i]         
    }
    return s
}
var demo1 = document.querySelector('.demo1')
var demo2 = document.querySelector('.demo2')
let sender = '<a οnclick="alert(1)">test demo</a>';
demo1.innerHTML = `<p>${sender} has sent you a message.</p>`
demo2.innerHTML = SaferHTML`<p>${sender} has sent you a message.</p>` 
//<p>&lt;a&gt;alert("abc")&lt;/a&gt; has sent you a message.</p>

• html页面中最后呈现的内容 进过处理的js代码 变成了字符串，没有经过处理的js代码依旧存在交互效果，点击后出现弹窗