Question

我们正在使用此分析公司提供的第三方分析报告脚本。它将1x1像素图像添加到DOM中，并在图像的URL中报告数据。

在浏览器请求图片之前，有没有办法监控DOM并拦截这个<img>元素并更改其“src”属性？

我知道，这听起来真的很奇怪，但是我们想要破解这个报告脚本（脚本是封闭的）。

Answer 1

在非IE浏览器中，您可以使用DOMNodeInserted事件检测DOM节点的插入。我不知道在事件被触发时浏览器是否会发出HTTP请求;它似乎不是在Firefox中快速测试。由于这在IE中不起作用，因此无论如何这可能都不是可接受的解决方案。

document.body.addEventListener("DOMNodeInserted", function(evt) {
    var node = evt.target;
    if (node.nodeType == 1 && node.tagName == "IMG") {
        node.src = "http://www.gravatar.com/avatar/be21766f09e0e5fd3a2f8cc721ceba2e?s=32&d=identicon&r=PG"; // Your gravatar
    }
}, false);

Answer 2

放手一搏。我不知道它会有多大用处，但我觉得要修修补补，这在某种程度上说明了第三方故意加入延迟的情况：

$(document).ready(function() {
// match an image with specific dimension, return it
function imgNinja() {
    var $img =  $("img").filter(function() {
        return ($(this).height() == 1 && $(this).width() == 1);
    });
    return $img;
}

// periodically execute this to check for matches
function keepSeeking() {
    $img = imgNinja();
    if($img.length) {
        alert('found it');
        clearInterval(i);
        // do something with image
    }
}

// insert a fake into the DOM at a bit of an interval
function addNastyImage() {
   var $invader = $('<img src="foo.jpg" height="1px" width="1px"/>'); 
    $('html').append($invader);
}


setTimeout(addNastyImage, 5000);
var i = setInterval(keepSeeking, 1000);
});

演示：http://jsfiddle.net/NyEdE/3/

Answer 3

如果第三方脚本使用方法（如.appendChild）将元素添加到文档中，则可以通过用自己的函数替换相关对象的方法来实现此目的。

这样可以在所有浏览器中工作，我认为您只会生成一个HTTP请求（对于更改的URL，而不是原始的URL）。

Answer 4

以亚当建议为基础：

$(document).ready(function() {
  $("img[src='http://example.com/example.gif']").attr('src','http://example.com/new_src.gif');
});

检测/拦截<img/>到DOM的插入

4 个答案: