Vue Toasted通知标题存在XSS漏洞问题求助

你碰到的这个问题是典型的第三方组件未默认开启HTML转义导致的XSS跨站脚本攻击。Vue本身在处理模板插值（比如{{ content }}）时会自动转义HTML特殊字符，但vue-toasted组件默认可能允许直接渲染HTML内容，这就给恶意代码注入开了口子——你输入的"><img src=1 onerror=prompt(document.cookie);>被组件当作合法HTML解析，触发了onerror事件执行弹窗获取Cookie的恶意逻辑。

问题根源分析 #

从你提供的代码片段来看：

handleFormSubmit: function(response) {
  this.showAddSiteModal = false;
  if (response.data.status === 'success') {
    console.log(response.data.message)
    // 这里应该是调用了vue-toasted的通知方法，直接传入了未转义的response.data.message
    this.$toasted.show(response.data.message);
  }
}

后端返回的response.data.message包含了用户输入的恶意HTML代码，而vue-toasted没有对其进行转义，直接渲染成了DOM元素，导致恶意脚本执行。

修复方案 #

这里有几种可靠的解决办法，按优先级推荐：

1. 禁用vue-toasted的HTML渲染功能

这是最直接的方式，强制组件把所有内容当作纯文本处理。你可以在全局配置或者单个通知调用时设置html: false：

// 全局初始化时配置（如果是通过Vue.use引入的）
import Toasted from 'vue-toasted';
Vue.use(Toasted, {
  html: false // 关闭HTML渲染，所有内容按纯文本显示
});

// 或者单个通知调用时单独配置
this.$toasted.show(response.data.message, {
  html: false
});

这样组件就会自动转义所有HTML特殊字符，恶意代码会被原样显示而不会执行。

2. 手动转义HTML内容再传入

如果你的业务场景确实需要渲染部分安全HTML，那可以先对用户输入的内容进行手动转义，过滤掉危险标签和事件：

// 实现一个简单的HTML转义函数
function escapeHtml(text) {
  const map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  return text.replace(/[&<>"']/g, m => map[m]);
}

// 调用toasted前先转义内容
this.$toasted.show(escapeHtml(response.data.message));

3. 后端层面加强输入验证与转义

前端防护只是补充，后端必须对用户提交的内容进行严格的验证和转义，比如过滤掉<script>、on*事件属性等危险内容，确保返回给前端的消息本身就是安全的。

额外提醒 #

XSS漏洞会直接威胁用户的账号安全（比如Cookie被盗取导致会话劫持），建议尽快修复。同时要注意：不要信任任何用户输入的内容，无论是前端还是后端，都要做相应的安全处理。

内容的提问来源于stack exchange，提问作者Khaled Alam