使用v-html造成的问题

485 阅读1分钟

1 正常使用v-html

export default {
  data() {
    return {
      msg: '<div>这是一个等待渲染的html</div>'
    }
  },
 }
 <div v-html="msg"></div>
 

渲染的结果是: 这是一个等待渲染的html

2. 特殊的数据

export default {
  data() {
    return {
      msg: '<div>这是一段文本<w56656565465</div>'
    }
  },
 }
 <div v-html="msg"></div>
 

你们是不是以为结果是:这是一段文本<w56656565465

但是现实是: 这是一段文本

3. 结论

我们在返回的数据不确定的情况下,要将返回数据做下转义,避免数据渲染出错同时也防止xss攻击