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

Question

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>以外的其他标签）？

Answer 1

使用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>