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

【问题标题】：Display links as <a> tags but don't allow other tags?将链接显示为 <a> 标签但不允许其他标签？
【发布时间】：2017-06-29 09:19:00
【问题描述】：

所以，我正在使用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>之外的其他标签）？

【问题讨论】：

检查这个：stackoverflow.com/questions/1500260/…
您是要在用户键入时替换用户输入的文本，还是在页面的其他位置替换？就地替换有点棘手，您可能需要一个可以标记输入的库，以支持退格删除超链接之类的操作（想想 Word/Outlook 如何使用文本中的超链接执行此操作）。受 XSS 保护的意思是用户可能输入链接文本，例如 www.gmail.com，实际上具有 www.steal-my-password.io 的 href 吗？
没有到位。我有一个评论部分，我想让链接可以点击。
@AndrewLyndem 是的，它将链接包装在<a> 标签中，但我的问题实际上并不是如何做到这一点。但是如何输出 HTML 以便不允许其他标签并阻止 XSS 成为问题。如果我要使用 jQuery，我可以使用 $.text() 或 $.html()。如果我使用text()，a 标签将不起作用，如果我使用html()，任何标签都将被解释为HTML。
你能用element.innerHMTL ="<a href='" + url + "'> " + user input +" </a>"吗？还是由于某种原因这不起作用？

【解决方案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>

【讨论】：