我正在尝试使用v-html而不出现xss问题。我认为我正在以一种安全的方式使用v-html。你能看看我是否在避免xss问题吗？
用户可以输入一个文本字段（“words”），这个字段将被存储在数据库中。当内容从数据库中提取时，javascript将把两个标签“/b/”之间的单词呈现为粗体单词。
下面是一个codepen：https://codepen.io/kiggs1881/pen/KKxEJbx
下面是代码：
const VueApp = defineComponent({
setup() {
const words = ref("Hello /b/World/b/, I am a
/b/friend/b/.")
const parseWords = (text) => {
return text
.split("/b/")
.map((part, i) => {
return i % 2 ? `<strong>${part}</strong>` : part;
})
.join(" ");
}
return {
parseWords,
words
}
},
template: `
<input v-model="words">
<div v-html="parseWords(words)"></div>`
})我知道v-html很容易受到xss攻击，但我希望我提出的有限的使用方式可以消除攻击的可能性。
1条答案
按热度按时间tag5nh1u1#
根据你的代码，我会说是的。它容易受到
XSS攻击。当你从用户那里获取输入时，在这种情况下，用户可以通过输入框输入任何恶意的标签或脚本，在渲染/保存数据时，这些数据将攻击你的应用程序。
**解决方案：**在用户输入后，提交到数据库前，需要对用户输入进行清理，可以将字符串中的黑名单字符删除。
为了更好地理解，我在Vanilla JavaScript中添加了一个工作演示（您可以让它像Vue一样工作），此外，您可以在黑名单正则表达式中添加更多无效字符。