将链接显示为 <a> 标签但不允许其他标签？

Question

所以，我正在使用Vue.js并希望显示一些包含链接的文本。文本由用户输入。

例子：

这是一个比 www.oldexample.com 更好的网站 www.example.com

我希望它显示为：

这是一个比www.oldexample.com更好的网站www.example.com

所以，我希望链接是超链接的。问题是这是用户输入，所以它必须受到 XSS 保护。我目前将它显示为文本，所以我不能在其中使用 HTML 标签。如果我要使用v-html所有链接并将其包装在a标签中，那就太不安全了，因为用户可以输入任何HTML.

我正在考虑按 URL 拆分字符串，并将不是链接的每个部分包装在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>