I'm using a Vue component which expects a string. I like to use template values in the string, but of course is should be XSS safe.
Current unsafe example
This is unsafe, as this.name is unsafe. I could use a NPM package to html encode the name, but I really prefer to use Vue.
import Vue from 'vue';
export default Vue.extend({
props: {
name: { type: String, required: false },
},
methods: {
showModal() {
this.$buefy.dialog.confirm({
title: 'myTitle',
message: `
Hello ${this.name}
`, // unsafe - possible XSS!cancelText: 'Cancel',
confirmText: 'OK',
type: 'is-success',
onConfirm: async () => {
// something
},
});
},
},
});
This is an issue of the used Buefy component, as documented here:
Desired Setup
I've created a new component, in this example I call it ModalMessage.Vue
Hello {{name}}
import Vue from 'vue';
export default Vue.extend({
props: {
name: { type: String, required: true },
},
});
Then I like to render the ModalMessage.Vue to a string in Typescript:
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
},
});
},
},
});
Question
How could I render the ModalMessage.Vue, and passing the name prop, to a string?
I'm pretty sure this is possible - I have seen it in the past. Unfortunately I cannot find it on the web or StackOverflow. I could only find questions with rendering a template from string, but I don't need that - it needs to be to string.
4343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
