将链接显示为<a> tags but don&#39;t allow other tags?

时间:2017-02-10 21:55:54

标签: javascript html vue.js xss

So, I am using Vue.js and want to display some text that contains links. The text is input by the users.

Example:

This is a site www.example.com which is better than www.oldexample.com

I want it to appear as:

This is a site www.example.com,优于www.oldexample.com

所以,我希望链接是超链接的。问题是这是用户输入,因此必须受XSS保护。我目前将其显示为文本,因此我无法在其中使用HTML标记。如果我使用v-html并将a标记中的所有链接包装起来,那么用户可以输入任何HTML就太不安全了。

我正在考虑按网址拆分字符串,并将span标记中不属于链接的每个部分以及a标记中的每个链接包装起来。但这似乎有点太多的处理只是为了超链接URL。

是否有更简单的方法,即XSS安全(用户无法输入<a>以外的其他标签)?

1 个答案:

答案 0 :(得分:2)

使用vue-linkify创建一个v-linkified指令,完全按照您的需要

new Vue({
  el:'#app',
  data:{
    input:'Hello from vuejs.org'
  }
})
<div id="app">
  <input v-model="input"/>

  <div v-html="input" v-linkified>
  </div>

</div>