Vue - 确认消息中的样式用户输入（允许特定的 html 标签）

Question

我想使用 Vue 显示一个确认模式，上面写着类似 "Are you sure you want to delete '{{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 KB 重量的缺点。但也有更小的包裹可用：

DOMPurify (15 KB)
js-xss (28 KB)

编辑 2：

有一个包vue-dompuritfy-html，我们现在正在我们的项目中使用。安装后你可以简单地使用

<div v-dompurify-html="itemName" />

奖励：使用这个包你覆盖了推荐的 eslint 规则 vue/no-v-html

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 */
}

然后在companant中使用你的模态：

模板

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

Answer 3

我看过其他答案，我推荐Rashad Saleh的答案，一个带插槽的模型，你可以用v-if显示你的模型并用v-*指令切换内容，然后你不需要为每个案例创建每个模板

我post另一个答案，它完全不同，sweet-alert它不会与你的vue冲突并且完全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>">

虽然已经足够漂亮，但您可能需要自定义 sweet alert 的样式，有关更多信息，请参阅 https://sweetalert2.github.io/

Vue - 确认消息中的样式用户输入（允许特定的 html 标签）

Vue - style user input in confirm message (allow specific html tags)

xss

vue.js

vuejs2