Рендеринг html из string vuejs


Рендеринг html из string vuejs

16.10.2020 09:52:17 Просмотров 3 Источник

Я борюсь с проблемой, я хочу создать чат-приложение, и пользователи смогут помечать друг друга с помощью @. Например, user1 вводит в чат ввод "привет @user2", вывод должен выглядеть так же, но "@user2 " будет ссылкой вместо простого текста, я понял, как это сделать, но проблема в том, что если пользователь вводит, например, html-теги, то он визуализируется как html.

HTML:

<span v-html="chatFormat(chat.text)"></span>

Вью:

chatFormat(text) {
  var words = text.split(" ");
  var newStr = '';
  words.forEach(function (word) {
  if (word.includes('@') >= 1) {
    if (word.charAt(0) == '@') {
      word = '{{ <a href="/user" class="font-weight-bold" style="text-decoration:none">' + word + '</a> }}';
    }
  }
  newStr = newStr + ' ' + word;
  });
  return newStr;
}
У вопроса есть решение - Посмотреть?

Ответы - Рендеринг html из string vuejs / Render html from string vuejs

Является ответом!
Jan Madeyski

16.10.2020 10:11:49

Ну, с помощью директивы v-html значение отображается как HTML - оно не анализируется для переменных. Вы можете изменить свой код и избавиться от {{}}, чтобы в выходных данных появлялась только ссылка.

word = '<a href="/user" class="font-weight-bold" style="text-decoration:none">' + word + '</a>';

Но имейте в виду, что использование v-html для отображения пользовательского ввода-это рискованная вещь. Пользовательский ввод должен быть экранирован в первую очередь, чтобы избавиться от потенциального вредоносного кода. (Вы можете проверить очистку пользовательского ввода перед добавлением его в DOM в Javascript, как предложил Михал Леви)

Я бы также предложил использовать функции стрелок и шаблонные литералы

chatFormat(text) {
  // using let instead of var for declaring variables in the local scope
  let safeText= this.sanitizeHTML(text), // for security reasons
      words = safeText.split(" "),
      newStr = '';

  words.forEach(word => { // arrow function
    if (word.includes('@') >= 1) {
      if (word.charAt(0) == '@') {
        word = `<a href="/user" class="font-weight-bold" style="text-decoration:none">${word}</a>`; // template literal
      }
    }
    newStr = newStr + ' ' + word;
  });

  return newStr;
},

// This should be a secure sanitization method from some library
sanitizeHTML(string) {
  return string
},
MAMY Sébastien

16.10.2020 10:24:34

Тема, которая обсуждалась много раз.

в Vuejs.org: https://vuejs.org/v2/api/#v-html

в stackoverflow.com: (один из многих) рендеринг html-тегов в Vue.js

Помочь в развитии проекта:
Закрыть X