Vue - стиль ввода пользователя в сообщении подтверждения (разрешить определенные HTML-теги)

Question

Используя Vue, я хочу показать модальное подтверждение, которое говорит что-то вроде «Вы уверены, что хотите удалить« {{itemName}} »?».

Это достаточно просто с привязкой строки Javascript к переменной, встроенной в шаблон.

Однако, если я хочу выделить itemName курсивом, чтобы подчеркнуть его, единственноея могу найти способ использовать v-html, что, конечно, откроет его до XSS.

Есть ли способ стилизовать часть строки?

Answer 1

Вы можете попробовать использовать пакет типа sanitize-html .Вот как бы я это сделал:

Установить:

npm install sanitize-html

main.js:

import sanitizeHTML from 'sanitize-html';
Vue.prototype.$sanitize = sanitizeHTML;

YourComponent.vue:

<div v-html="$sanitize(itemName)" />

Ознакомьтесь с README для получения дополнительной информации о параметрах по умолчанию для разрешенных тегов и атрибутов.

РЕДАКТИРОВАТЬ соотв.Альтернативы:

sanitize-html имеет недостаток весом 327 КБ.Но доступны меньшие пакеты:

• DOMPurify (15 КБ)
• js-xss (28 КБ)

Answer 2

Определите ваш модальный как:

шаблон

<div class="modal">
  <slot></slot>
  <button @click="$emit(true)">Yes</button>
  <button @click="$emit(false)">No</button>
</div>

стиль

.modal > em {
  /* apply anything you want here */
}

Затем используйте вашмодальный в компананте:

шаблон

<template>
  ...
    <modal>Are you sure you want to delete <em>{{itemName}}</em>?</modal>
  ...
</template>

Answer 3

Я видел другие ответы, я рекомендую ответ Рашада Салеха, модель со слотом, вы можете показать свою модель с помощью v-if и переключать контент с помощью директив v-*, тогда вам не нужно создавать каждый шаблон для каждый случай

Я отправляю другой ответ, он идет совершенно по-другому, sweet-alert он не будет конфликтовать с вашим мнением и использовать полностью в формате javascript.

var something = document.getElementById('xss').value

var toshow = encodeURIComponent(something)

Swal.fire({
  title: 'Are you sure?',
  html: "You won't be able to revert <b><em>" + toshow + "</em></b>!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.all.min.js"></script>

<input id="xss" value="<script>alert('xss')</script>">

вам может потребоваться настроить стиль для сладкого оповещения, хотя этого достаточно, для получения дополнительной информации см. https://sweetalert2.github.io/