要 Hook innerHTML 属性并提取传入的 HTML 字符串中的所有原始 URL，可以通过 JavaScript Proxy 或 Object.defineProperty 拦截 innerHTML 的赋值操作，然后使用正则表达式或 DOM 解析方法提取 URL。以下是实现方法：
方法 1：Hook innerHTML 并提取 URL（Proxy/defineProperty）
步骤
- 拦截
innerHTML的 setter
通过修改元素的innerHTML属性，在赋值时捕获 HTML 字符串。 - 从 HTML 中提取所有 URL
使用正则表达式或 DOM 解析（如DOMParser）提取链接。
代码实现
// Hook单个元素的innerHTML
function hookElementInnerHTML(element) {
const originalDescriptor = Object.getOwnPropertyDescriptor(
Object.getPrototypeOf(element),
'innerHTML'
);
Object.defineProperty(element, 'innerHTML', {
set: function(value) {
// 提取URL的逻辑
extractUrlsFromHtml(value);
// 继续原始赋值操作
originalDescriptor.set.call(this, value);
},
get: function() {
return originalDescriptor.get.call(this);
}
});
}
// 从HTML文本中提取URL
function extractUrlsFromHtml(html) {
const urls = [];
// 方法1：正则匹配（简单场景）
const regex = /(href|src)=["'](https?:\/\/[^"']+)["']/gi;
let match;
while ((match = regex.exec(html)) !== null) {
urls.push(match[2]); // match[2]是URL部分
}
// 方法2：DOM解析（更准确）
const doc = new DOMParser().parseFromString(html, 'text/html');
['a', 'img', 'script', 'link'].forEach(tag => {
doc.querySelectorAll(tag).forEach(el => {
const url = el.href || el.src;
if (url && url.startsWith('http')) urls.push(url);
});
});
console.log('Extracted URLs:', urls);
}
// Example: Hook某个div的innerHTML
const targetDiv = document.querySelector('#myDiv');
hookElementInnerHTML(targetDiv);
//测试：设置innerHTML时会触发URL提取
targetDiv.innerHTML = '<a href="https://example.com">Link</a><img src="http://test.com/image.png">';
方法2：批量Hook所有元素的innerHTML
如果需要监控页面中所有动态插入的内容，可以劫持 Element.prototype.innerHTML：
(function() {
const originalInnerHTML = Object.getOwnPropertyDescriptor(
Element.prototype,
'innerHTML'
).set;
Object.defineProperty(Element.prototype, 'innerHTML', {
set: function(value) {
extractUrlsFromHtml(value); //调用之前的提取函数
originalInnerHTML.call(this, value);
}
});
})();
注意事项
- 性能影响
HookinnerHTML可能对性能有轻微影响，建议仅在调试或分析时使用。 - 兼容性
DOMParser需要现代浏览器支持。- Proxy方案无法直接拦截原生属性，优先用
Object.defineProperty。
- 动态内容
如果URL是通过JavaScript动态生成的（非直接写在HTML中），需额外Hook相关API（如fetch、appendChild）。
输出示例
当设置以下代码时：
document.body.innerHTML = '<a href="https://google.com">Google</a>';
控制台会输出：
Extracted URLs: ["https://google.com"]
这种方法可用于爬虫、安全分析或前端监控场景。
内容由零声教学AI助手提供，问题来源于学员提问
