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

所以，我使用Vue.js并希望显示一些包含链接的文本。文本由用户输入。显示链接为<a>标签，但不允许其他标签？

例子：

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

我希望它出现更好的为：

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

所以，我想链接超链接。问题是这是用户输入，所以它必须被XSS保护。我目前将其显示为文本，因此我无法在其中使用HTML标记。如果我要使用v-html并将所有链接包含在a标记中，那么用户可能会输入任何HTML会太不安全。

我在考虑按URL拆分字符串，并将每个不是span标记中的链接的部分以及a标记中的每个链接都包裹起来。但是，这只是为了超链接URL而完成的。

是否有更简单的方法，即XSS安全（用户不能输入除<a>以外的其他标签）？

来源

2017-02-10 Cristy

检查：http://stackoverflow.com/questions/1500260/detect-urls-in-text-with -javascript –

您是否试图用用户输入的文本替换用户输入的文本，还是放在页面的其他位置？就地替换有点棘手，您可能需要一个库，可以标记输入以支持退格删除超链接等事情（想想Word/Outlook如何通过文本中的超链接执行此操作）。通过XSS保护你的意思是用户可能输入链接文本，如www.gmail.com，其实际上有www.steal-my-password.io？ –

这不是就地。我有一个评论部分，我想让链接可点击。 – Cristy

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

来源

2017-02-10 22:36:39 AldoRomo88

你知道它是否将HTML呈现为HTML或文本？ –

但它有'v-html ='输入''指令，所以它意味着整个输入将是'HTML'或只有'a'标签？ – Cristy

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

回答

相关问题