知识点：
1、Web攻防-XSS跨站-浏览器&转换-UXSS&MXSS
2、Web攻防-XSS跨站-框架和库-VUE&React&Electron&JQuery
分类：
1、框架或三方库的XSS(Vue、React、Electron、JQuery)
2、浏览器或插件的XSS(UXSS)
3、客户端预览内核的XSS(MXSS)
说明：使用框架开发的或第三方库引用操作的，默认安全写法会自带过滤，所以测试此类的应用需存在漏洞版本或不安全写法导致XSS；同样UXSS也需要存在漏洞的浏览器版本或插件导致；MXSS也要不同环境下的转变解析导致，需多测试。
一、演示案例-WEB攻防-XSS跨站-框架&库
Vue框架-XSS
搭建：
npm create vite@latest
cd vue-xss-demo
npm install修改：App.vue:
<template><div><h1>XSS 漏洞演示</h1><input v-model="userInput" placeholder="输入你的内容" /><button @click="showContent">显示内容</button><div v-html="displayContent"></div></div>
</template><script>
export default {data() {return {
userInput: '', // 用户输入
displayContent: '' // 显示的内容};},
methods: {showContent() {// 直接将用户输入的内容渲染到页面this.displayContent = this.userInput;}}
};
</script><style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
margin-top: 60px;
}
</style>
启动：npm run dev
测试
<img src="x" onerror="alert('XSS')" />
修复：使用文本插值（{{}}）代替 v-html
React库-XSS
React 是一个由 Facebook 开发并开源的 JavaScript 库，用于构建用户界面（UI）。它的核心价值在于通过组件化的方式高效创建交互式 Web 应用
搭建：
npx create-react-app react-xss-example
cd react-xss-example修改：
App.js
import React, { useState } from 'react';
import ReactDOM from 'react-dom';function App() {const [userInput, setUserInput] = useState('');const [displayedInput, setDisplayedInput] = useState('');const handleInputChange = (e) => {setUserInput(e.target.value);};const displayInput = () => {setDisplayedInput(userInput);};return (<div><input type="text" value={userInput} onChange={handleInputChange} placeholder="输入内容" /><button onClick={displayInput}>显示输入</button><div dangerouslySetInnerHTML={{__html: displayedInput}}/>{/*<div>{displayedInput}</div>*/}</div>);
}
export default App;
启动：npm start
测试
<img src="x" onerror="alert('XSS')" />
修复：直接使用{displayedInput}来显示
Electron框架-XSS
Electron 是一个由 GitHub 开发的开源框架，用于使用 Web 技术（HTML/CSS/JavaScript）构建跨平台的桌面应用程序。它通过将 Chromium 渲染引擎和 Node.js 运行时结合，让开发者能用前端技术栈开发原生体验的桌面应用。
搭建：
mkdir electron-xss-example
cd electron-xss-example
npm init -y安装修改：
npm install electron --save-dev
main.js 和 index.html 文件复制到项目根目录下
// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');function createWindow() {const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false}});win.loadFile('index.html');
}app.whenReady().then(() => {createWindow();app.on('activate', function () {if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit();
});// index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Electron XSS Example</title>
</head><body><input type="text" id="userInput" placeholder="输入内容"><button onclick="displayInput()">显示输入</button><div id="displayArea"></div><script>function displayInput() {const input = document.getElementById('userInput').value;const displayArea = document.getElementById('displayArea');
displayArea.innerHTML = input;}</script>
</body></html>配置package.json
{"name": "electron-xss-example","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "electron ."},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^23.2.1"}
}
启动：npm start
测试
<img src="x" onerror="alert('XSS')" />
修复：使用 textContent 代替 innerHTML 来显示文本
JQuery库-XSS
参考：
水洞：https://mp.weixin.qq.com/s/FsFvQlVrb_J4wsyE8gpprA
介绍：https://mp.weixin.qq.com/s/EMsK1c901-bDYapvHxs-VQ
漏扫：
https://github.com/mahp/jQuery-with-XSS
二、演示案例-WEB攻防-XSS跨站-MXSS&UXSS&转换&浏览器
MXSS(突变型XSS)
mXSS中文是突变型XSS，指的是原先的Payload提交是无害不会产生XSS，而由于一些特殊原因，如反编码等，导致Payload发生变异，导致的XSS。
参考：
https://mp.weixin.qq.com/s/31zaBzZ1e6rNobYCrn7Qhg
模拟
靶场：https://portswigger-labs.net/mxss/<math><mtext><table><mglyph><style><!--</style><img title="--><img src=1 onerror=alert(1)>">
这是一个故意实例化的XSS语句，是执行不了XSS的。
复盘
https://www.fooying.com/the-art-of-xss-1-introduction/
UXSS(针对浏览器或浏览器插件漏洞)
UXSS利用浏览器或者浏览器扩展漏洞来制造产生XSS并执行代码的攻击类型。
复盘：
MICROSOFT EDGE uXSS CVE-2021-34506
Edge浏览器翻译功能导致JS语句被调用执行https://www.bilibili.com/video/BV1fX4y1c7rX
