如何将Buefy的对话框组件与用户提供的内容一起使用，并确保XSS的安全性

How to use Buefy#39;s Dialog component with user provided content and be safe in terms of XSS(如何将Buefy的对话框组件与用户提供的内容一起使用，并确保XSS的安全性)

问题描述

当前不安全示例

这是不安全的，因为this.name不安全。我可以使用NPM包对名称进行html编码，但我真的更喜欢使用Vue。

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  props: {
    name: { type: String, required: false },
  },
  methods: {
    showModal() {
      this.$buefy.dialog.confirm({
        title: 'myTitle',
        message: `<p>Hello ${this.name}</p>`, // unsafe - possible XSS!
        cancelText: 'Cancel',
        confirmText: 'OK',
        type: 'is-success',
        onConfirm: async () => {
          // something
        },
      });
    },
  },
});
</script>

这是已使用的Buefy组件的问题，文档here：

所需设置

我已经创建了一个新组件，在本例中我将其命名为ModalMessage.Vue

<template>
    <p>Hello {{name}}</p>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  props: {
    name: { type: String, required: true },
  },
});
</script>

然后，我希望将ModalMessage.Vue呈现为string在TypeScript：

<script lang="ts">
import Vue from 'vue';
import ModalMessage from 'ModalMessage.vue';

export default Vue.extend({
  props: {
    name: { type: String, required: false },
  },
  methods: {
    showModal() {
      this.$buefy.dialog.confirm({
        title: 'myTitle',
        message:, // todo render ModalMessage and pass name prop
        cancelText: 'Cancel',
        confirmText: 'OK',
        type: 'is-success',
        onConfirm: async () => {
          // something
        },
      });
    },
  },
});
</script>

问题

如何将ModalMessage.Vue呈现并将名称prop传递给string？

我非常肯定这是可能的--我过去就见过。不幸的是，我在网络或StackOverflow上找不到它。我只能找到从到字符串呈现模板的问题，但我不需要它-它需要从到字符串。

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  methods: {
    showModal() {
      this.$buefy.dialog.confirm({
        title: 'myTitle',
        message: this.$slots.default, // <- this is important part
        cancelText: 'Cancel',
        confirmText: 'OK',
        type: 'is-success',
        onConfirm: async () => {
          // something
        },
      });
    },
  },
});
</script>

<MyDialog>
  <p>Hello {{name}}</p>
</MyDialog>

<MyDialog>
  <ModalMessage :name="name" />
</MyDialog>