顯示鏈接爲<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>標籤，但不允許其他標籤？

回答

相關問題