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>
以外的其他标签)?
答案 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>