在 Henry Desroches（Henry Codes）的《A Website To Destroy All Websites》一文中，这位专注于 "删除代码" 的创意开发者提出了一个引人深思的观点：互联网正在被工业化、商业化的 Web 2.0 所侵蚀，而个人网站可能是重建互联网灵魂的答案。然而，在这个讨论的另一面，存在着一种技术现实 —— 客户端 JavaScript 网站破坏工具，这些工具利用浏览器的弱点，通过 DOM 操作、内存泄漏和资源耗尽技术，能够从内部瓦解一个网站。
客户端 JavaScript 破坏工具的技术本质
客户端 JavaScript 网站破坏工具通常以书签工具（bookmarklet）或浏览器扩展的形式存在，其核心原理是利用 JavaScript 在用户浏览器中直接执行破坏性操作。这类工具不依赖服务器端攻击，完全在客户端运行，这使得它们难以被传统的 Web 应用防火墙（WAF）检测和阻止。
以 GitHub 上的 "destroyer" 项目为例，这是一个典型的网站破坏书签工具。用户只需将其添加到书签栏，访问任何网站时点击该书签，就能激活一系列破坏性功能。这种工具的威力在于它利用了浏览器对 JavaScript 的完全信任 —— 一旦代码在浏览器中执行，它就能访问当前页面的完整 DOM、操作所有元素、修改样式、添加事件监听器，甚至创建无限循环来耗尽系统资源。
DOM 操作性能瓶颈：攻击者的切入点
DOM（文档对象模型）是现代 Web 应用的核心，但也是性能最敏感的部分。攻击者正是利用这一点，通过精心设计的 DOM 操作来制造性能瓶颈。
大规模 DOM 节点创建与删除
一个简单的攻击向量是创建大量 DOM 节点。考虑以下代码：
function createMemoryLeak() {
const container = document.createElement('div');
document.body.appendChild(container);
// 创建大量子节点但不释放引用
const nodes = [];
for (let i = 0; i < 10000; i++) {
const node = document.createElement('div');
node.textContent = `Node ${i}`;
container.appendChild(node);
nodes.push(node); // 保持引用，阻止垃圾回收
}
// 从DOM中移除但保留JavaScript引用
document.body.removeChild(container);
// nodes数组仍然持有所有节点的引用
}
这种攻击的关键在于：虽然节点从 DOM 树中被移除，但 JavaScript 中仍然保持着对它们的引用，这阻止了垃圾回收器释放内存。根据 Stack Overflow 上的讨论，当闭包或全局变量持有对 DOM 元素的引用时，即使这些元素已经从页面中移除，它们也不会被垃圾回收。
事件监听器泄漏
另一个常见的攻击向量是事件监听器泄漏。攻击者可以添加大量事件监听器，然后不正确地移除它们：
function addLeakingListeners() {
const elements = document.querySelectorAll('*');
elements.forEach(element => {
// 添加匿名函数作为事件处理器
element.addEventListener('click', () => {
console.log('Clicked:', element);
});
// 或者更隐蔽的方式：使用闭包捕获外部变量
const data = new Array(10000).fill('leak');
element.addEventListener('mouseover', function() {
// 闭包捕获了data变量，即使元素被移除也不会释放
console.log(data.length);
});
});
}
问题在于，当元素从 DOM 中移除时，如果事件监听器没有被正确移除，并且监听器函数捕获了外部变量（形成了闭包），那么这些元素和它们关联的数据就不会被垃圾回收。
内存泄漏攻击向量的工程化分析
闭包导致的泄漏模式
闭包是 JavaScript 中最容易导致内存泄漏的特性之一。攻击者可以利用这一点创建难以检测的泄漏：
function createClosureLeak() {
const largeObject = new Array(1000000).fill('leak_data');
return function() {
// 这个闭包捕获了largeObject，即使外部函数执行完毕
// largeObject也不会被释放
return largeObject.length;
};
}
const leakyFunction = createClosureLeak();
// 现在leakyFunction持有对largeObject的引用
// 即使我们不再需要它，它也不会被垃圾回收
在 DOM 破坏工具中，攻击者可以将这种模式与 DOM 操作结合，创建既消耗内存又影响性能的复杂泄漏。
定时器与回调函数泄漏
setInterval 和 setTimeout 也可能导致内存泄漏，特别是当它们引用 DOM 元素时：
function startMemoryLeakingTimer() {
const element = document.getElementById('target');
const data = new Array(50000).fill('timer_leak');
setInterval(() => {
// 定时器回调捕获了element和data
if (element) {
element.textContent = `Data size: ${data.length}`;
}
}, 100);
// 即使从DOM中移除element，定时器仍然持有引用
// element和data都不会被垃圾回收
}
浏览器资源耗尽技术
CPU 资源耗尽
攻击者可以通过创建无限循环或密集计算来耗尽 CPU 资源：
function cpuExhaustion() {
// 创建多个Web Worker进行并行计算攻击
for (let i = 0; i < navigator.hardwareConcurrency || 4; i++) {
const workerCode = `
while(true) {
// 密集数学计算
const result = Math.pow(Math.random(), Math.random());
postMessage(result);
}
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
workers.push(worker);
}
}
内存资源耗尽
通过创建大型对象和保持引用，攻击者可以快速耗尽可用内存：
function memoryExhaustion() {
const memoryHog = [];
// 每秒添加10MB数据
setInterval(() => {
const chunk = new Array(1024 * 1024 * 10).fill('X');
memoryHog.push(chunk);
console.log(`Memory used: ${memoryHog.length * 10}MB`);
// 当内存接近限制时，开始创建更多
if (performance.memory && performance.memory.usedJSHeapSize >
performance.memory.jsHeapSizeLimit * 0.8) {
// 触发更多内存分配
for (let i = 0; i < 5; i++) {
memoryHog.push(new Array(1024 * 1024 * 5).fill('Y'));
}
}
}, 1000);
}
存储资源耗尽
现代浏览器提供了多种存储 API，攻击者可以滥用这些 API：
async function storageExhaustion() {
// 尝试填满LocalStorage
try {
const key = 'destructive_data';
let data = '';
// 创建尽可能大的字符串
while (data.length < 5 * 1024 * 1024) { // 尝试5MB
data += 'A'.repeat(10000);
}
localStorage.setItem(key, data);
// 尝试IndexedDB
const dbName = 'destruction_db';
const request = indexedDB.open(dbName, 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
const store = db.createObjectStore('data', { autoIncrement: true });
// 添加大量数据
for (let i = 0; i < 1000; i++) {
store.add(new Array(10000).fill('storage_leak'));
}
};
} catch (error) {
console.log('Storage exhaustion attempt:', error.message);
}
}
防御策略与工程化解决方案
1. 内存泄漏检测与监控
在生产环境中实施内存监控：
// 内存使用监控
function setupMemoryMonitoring() {
if (performance.memory) {
setInterval(() => {
const used = performance.memory.usedJSHeapSize;
const total = performance.memory.totalJSHeapSize;
const limit = performance.memory.jsHeapSizeLimit;
const usagePercent = (used / total) * 100;
if (usagePercent > 80) {
console.warn('High memory usage detected:', usagePercent.toFixed(2) + '%');
// 触发内存清理或警告用户
}
if (used > limit * 0.9) {
console.error('Memory limit approaching!');
// 紧急处理：清理缓存、释放资源
}
}, 30000); // 每30秒检查一次
}
}
2. DOM 操作最佳实践
实施安全的 DOM 操作模式：
// 安全的DOM清理函数
function safeRemoveElement(element) {
if (!element || !element.parentNode) return;
// 1. 移除所有事件监听器
const events = ['click', 'mouseover', 'mouseout', 'keydown', 'keyup'];
events.forEach(eventType => {
element.removeEventListener(eventType, null);
});
// 2. 清理子元素
Array.from(element.children).forEach(child => {
safeRemoveElement(child);
});
// 3. 移除元素
element.parentNode.removeChild(element);
// 4. 清除引用（如果可能）
// 注意：这需要调用方配合
}
// 使用WeakRef避免内存泄漏
class DOMManager {
constructor() {
this.elementRefs = new WeakMap();
}
registerElement(element, data) {
// 使用WeakRef，当元素被垃圾回收时，引用自动消失
this.elementRefs.set(element, new WeakRef(data));
}
cleanup() {
// WeakMap不需要手动清理
}
}
3. 资源限制与配额管理
实施资源使用配额：
class ResourceQuotaManager {
constructor() {
this.quota = {
domNodes: 10000,
eventListeners: 1000,
timers: 50,
memoryMB: 100
};
this.usage = {
domNodes: 0,
eventListeners: 0,
timers: 0,
memory: 0
};
this.setupMonitoring();
}
setupMonitoring() {
// 监控DOM节点数量
this.domMonitor = setInterval(() => {
const nodeCount = document.querySelectorAll('*').length;
this.usage.domNodes = nodeCount;
if (nodeCount > this.quota.domNodes) {
this.handleQuotaExceeded('domNodes', nodeCount);
}
}, 5000);
// 监控定时器数量（需要重写setTimeout/setInterval）
this.patchTimers();
}
patchTimers() {
const originalSetTimeout = window.setTimeout;
const originalSetInterval = window.setInterval;
window.setTimeout = (callback, delay, ...args) => {
this.usage.timers++;
if (this.usage.timers > this.quota.timers) {
console.warn('Timer quota exceeded');
return null;
}
const timerId = originalSetTimeout(() => {
this.usage.timers--;
callback(...args);
}, delay);
return timerId;
};
// 类似地重写setInterval
window.setInterval = (callback, interval, ...args) => {
this.usage.timers++;
if (this.usage.timers > this.quota.timers) {
console.warn('Timer quota exceeded');
return null;
}
const intervalId = originalSetInterval(() => {
callback(...args);
}, interval);
return intervalId;
};
}
handleQuotaExceeded(resource, currentValue) {
console.error(`Resource quota exceeded: ${resource} (${currentValue} > ${this.quota[resource]})`);
// 根据严重程度采取不同措施
if (resource === 'memory' && currentValue > this.quota.memory * 1.5) {
// 紧急情况：强制清理
this.forceCleanup();
} else {
// 警告并建议清理
this.suggestCleanup(resource);
}
}
forceCleanup() {
// 清理所有定时器
let id = setTimeout(() => {}, 0);
while (id--) {
clearTimeout(id);
clearInterval(id);
}
// 清理事件监听器（需要更复杂的实现）
// 释放大对象
if (window.gc) {
window.gc();
}
}
}
4. 内容安全策略（CSP）增强
实施严格的 CSP 策略：
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval';
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
connect-src 'self';
font-src 'self';
object-src 'none';
media-src 'self';
frame-src 'none';
sandbox allow-forms allow-same-origin allow-scripts;
">
5. 实时异常检测系统
class AnomalyDetectionSystem {
constructor() {
this.baseline = {
domOperations: 0,
memoryAllocations: 0,
eventListeners: 0
};
this.thresholds = {
domOperations: 1000, // 每秒
memoryGrowth: 10, // MB/秒
eventListeners: 100 // 新增/秒
};
this.startMonitoring();
}
startMonitoring() {
// 监控DOM操作
let domOpCount = 0;
const originalAppendChild = Node.prototype.appendChild;
const originalRemoveChild = Node.prototype.removeChild;
Node.prototype.appendChild = function(child) {
domOpCount++;
if (domOpCount > this.thresholds.domOperations) {
this.detectAnomaly('excessive_dom_operations', domOpCount);
}
return originalAppendChild.call(this, child);
};
// 类似地重写其他DOM方法
// 重置计数器
setInterval(() => {
domOpCount = 0;
}, 1000);
// 监控内存分配
if (performance.memory) {
let lastMemory = performance.memory.usedJSHeapSize;
setInterval(() => {
const currentMemory = performance.memory.usedJSHeapSize;
const growth = (currentMemory - lastMemory) / (1024 * 1024); // MB
if (growth > this.thresholds.memoryGrowth) {
this.detectAnomaly('rapid_memory_growth', growth);
}
lastMemory = currentMemory;
}, 1000);
}
}
detectAnomaly(type, value) {
console.warn(`Anomaly detected: ${type} = ${value}`);
// 根据异常类型采取不同措施
switch(type) {
case 'excessive_dom_operations':
this.throttleDOMOperations();
break;
case 'rapid_memory_growth':
this.triggerGarbageCollection();
break;
case 'excessive_event_listeners':
this.cleanupEventListeners();
break;
}
// 上报到监控系统
this.reportToMonitoringSystem(type, value);
}
throttleDOMOperations() {
// 实施DOM操作速率限制
const originalMethods = {
appendChild: Node.prototype.appendChild,
insertBefore: Node.prototype.insertBefore,
replaceChild: Node.prototype.replaceChild
};
let operationsInWindow = 0;
const operationWindow = 100; // 毫秒
const maxOperations = 50; // 每100毫秒
const throttledOperation = (original, context, args) => {
operationsInWindow++;
if (operationsInWindow > maxOperations) {
console.warn('DOM operations throttled');
return null;
}
setTimeout(() => {
operationsInWindow--;
}, operationWindow);
return original.apply(context, args);
};
// 应用节流
Node.prototype.appendChild = function(...args) {
return throttledOperation(originalMethods.appendChild, this, args);
};
// 类似地处理其他方法
}
}
双重性质：破坏工具与安全测试
值得注意的是，这类客户端 JavaScript 破坏工具具有双重性质。在恶意攻击者手中，它们是破坏网站的工具；但在安全研究人员和开发者手中，它们成为了重要的测试工具。
作为安全测试工具的价值
- 压力测试：模拟极端条件下的客户端行为
- 内存泄漏检测：主动制造泄漏以测试应用的健壮性
- 边界测试：测试浏览器和应用的极限处理能力
- 安全审计：发现潜在的安全漏洞和资源耗尽风险
负责任的测试框架
对于希望使用这类工具进行安全测试的团队，建议建立负责任的测试框架：
class ResponsibleDestructionTester {
constructor(options = {}) {
this.options = {
maxDuration: 5000, // 测试最长5秒
autoCleanup: true,
userWarning: true,
...options
};
this.testStartTime = null;
this.cleanupHandlers = [];
}
async runTest(testName, testFunction) {
if (this.options.userWarning) {
const confirmed = confirm(
`即将运行破坏性测试：${testName}\n\n` +
`此测试可能会：\n` +
`• 暂时降低浏览器性能\n` +
`• 消耗大量内存\n` +
`• 修改页面内容\n\n` +
`测试将在${this.options.maxDuration / 1000}秒后自动停止。\n` +
`是否继续？`
);
if (!confirmed) return;
}
console.log(`开始测试：${testName}`);
this.testStartTime = Date.now();
// 设置超时自动停止
const timeoutId = setTimeout(() => {
console.log('测试超时，自动停止');
this.cleanup();
}, this.options.maxDuration);
this.cleanupHandlers.push(() => clearTimeout(timeoutId));
try {
await testFunction();
} catch (error) {
console.error('测试出错：', error);
} finally {
if (this.options.autoCleanup) {
this.cleanup();
}
}
}
cleanup() {
console.log('执行清理操作');
// 执行所有清理处理器
this.cleanupHandlers.forEach(handler => {
try {
handler();
} catch (error) {
console.warn('清理处理器出错：', error);
}
});
// 强制垃圾回收（如果可用）
if (window.gc) {
window.gc();
}
console.log('清理完成');
this.cleanupHandlers = [];
}
}
结论：平衡安全与性能
客户端 JavaScript 网站破坏工具揭示了现代 Web 应用的一个根本矛盾：为了提供丰富的用户体验，我们必须给予 JavaScript 强大的能力；但这也为攻击者提供了破坏的机会。
Henry Codes 在《A Website To Destroy All Websites》中呼吁回归个人网站的本质，这提醒我们 Web 的初心是连接、创造和分享，而不是破坏。作为开发者，我们的责任是：
- 理解风险：深入理解 DOM 操作、内存管理和浏览器资源模型
- 实施防御：采用工程化的防御策略，而不是依赖单一解决方案
- 持续监控：建立实时监控和异常检测系统
- 平衡性能与安全：在提供丰富功能的同时，确保应用的健壮性
- 负责任地测试：使用破坏性工具进行安全测试，但要遵循道德准则
最终，最好的防御是深度理解。通过理解攻击者如何利用客户端 JavaScript 的弱点，我们能够构建更安全、更健壮的 Web 应用。正如 Henry Codes 所倡导的，让我们用代码创造，而不是破坏；让我们建设一个更美好的 Web，而不是摧毁它。
资料来源
- Henry Desroches. "A Website To Destroy All Websites" - https://henry.codes/writing/a-website-to-destroy-all-websites
- LukeMason/destroyer GitHub repository - https://github.com/LukeMason/destroyer
- Stack Overflow: JavaScript DOM manipulation memory leak - https://stackoverflow.com/questions/34128953/javascript-dom-manipulation-memory-leak