Показать ссылки как <a> теги, но не разрешать другие теги?

Question

Итак, я использую Vue.js и хочу отобразить текст, содержащий ссылки. Текст вводится пользователями.

Пример:

Это сайт www.example.com, который лучше, чем www.oldexample.com

Я хочу, чтобы она появилась как:

Это сайт www.example.com, который лучше, чем www.oldexample.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>